Frontend Developer Path

Start with the job, not the tool list.

Ever wondered what makes Facebook, WhatsApp Web, Telegram Web or YouTube appear in a browser? It is not magic: someone turns structure, style and behaviour into the interface people touch.

Frontend development is the work of building the part of a website or web app that people see and use in a browser. A frontend developer turns content, designs and data into pages that are clear, responsive, accessible and dependable.

Six words to know

Website

Connected web pages, often centred on information such as a portfolio or news site.

Web app

A browser experience where people complete tasks, such as booking, messaging or managing work.

Frontend

The interface that runs in the browser: structure, presentation and interaction.

Backend

Server-side code and data systems that support the interface.

Browser

Software such as Chrome or Firefox that requests, reads and displays web resources.

Source code

The human-readable HTML, CSS, JavaScript and related files used to create the result.

What can you make?

Landing pages, portfolios, dashboards, online shops, community platforms, booking tools, learning apps and installable web experiences. The visual result matters, but so do keyboard use, loading speed, error handling, privacy and whether the page works on a small phone.

You do not need to memorise every framework. First learn the browser and HTML, CSS and JavaScript. Then tools such as Git, npm, Vite, Tailwind, React, TypeScript, Jest and Vercel will solve problems you already understand.

A page begins with a request.

When you enter a web address, the browser has to find the correct server, ask for resources and turn the response into something you can see and use. The full internet is complex; this smaller model is enough to start building well.

1. You enter a URL. It identifies a resource and the protocol used to request it.
2. DNS finds the address. The domain name is matched to the server's network address.
3. HTTPS protects the journey. The browser establishes an encrypted connection and checks the site's certificate.
4. HTTP carries the message. The browser sends a request; the server responds with a status, headers and content.
5. The browser builds the page. It parses HTML into the DOM, applies CSS, runs JavaScript and paints pixels.

Request:  GET /opportunities HTTP/1.1
Response: 200 OK
Content-Type: text/html

<h1>Community opportunities</h1>

See it in your browser

Open Developer Tools, choose the Network panel, reload a page and select its first document request. Find the request URL, status code and content type. Do not paste private tokens or personal data into screenshots.

Install a small, dependable toolkit.

You need a modern browser, a code editor, Git, a GitHub account, and a current Node.js long-term-support release that includes npm. Use official downloads and verify each installation before creating a project.

Windows

Install VS Code, Git for Windows and Node.js LTS from their official sites. Use PowerShell or the VS Code terminal.

macOS

Install VS Code and Node.js LTS. Install Git with the supported installer or Apple's command-line tools.

Ubuntu

Install VS Code from its official Linux instructions, Git from Ubuntu packages, and Node LTS using the official Node guidance.

Every system

Create a GitHub account, enable two-factor authentication and keep recovery codes somewhere private.

Verify before continuing

git --version
node --version
npm --version

Each command should print a version without an error. Do not use sudo npm install -g to “fix” permissions, and never paste an access token into a project file or commit it to GitHub.

Create a React project later

npm create vite@latest opportunity-board -- --template react
cd opportunity-board
npm install
npm run dev

This command belongs after the HTML, CSS and JavaScript foundations. Vite is the selected build tool for this path; it is not a replacement for understanding the browser languages.

Finish one small loop before chasing speed.

Your first week should make the web less mysterious and produce one simple page you can explain. Use a 50-minute learning block: 10 minutes recall, 20 minutes reading and typing, 15 minutes building, then 5 minutes writing what confused you.

A practical first week

1. Session 1 · 60–90 minutes: define the role, inspect a request and draw the browser-to-server journey.
2. Session 2 · 60 minutes: install and verify the editor, Git, Node and npm with the free guide.
3. Session 3 · 90 minutes: write a semantic HTML page with headings, lists, links and a useful title.
4. Session 4 · 90 minutes: add readable CSS, keyboard focus, a small-screen layout and no unnecessary animation.
5. Session 5 · 60 minutes: inspect it, fix one problem, commit it with Git and explain the page without looking at notes.

How the project checks work

Each starter repository includes requirements and automated checks. Create a repository from the template, work on an attempt/... branch and push it. GitHub runs the code checks and reports PASS or REVISE without waiting for a maintainer. You still test the interface with a keyboard and explain your decisions because automation cannot prove understanding.