🎨

Frontend Path

Frontend developers build everything users see and touch — layout, styling, and interactivity. If you enjoy design and making things feel smooth, start here.

1HTML — the structure

HTML (HyperText Markup Language) describes the content and structure of a page using elements written in angle brackets. Think of it as the skeleton: headings, paragraphs, images, links, lists, and forms.

index.html

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>My First Page</h1>
    <p>Hello, world! I'm learning to code.</p>
    <a href="https://developer.mozilla.org">Read the docs</a>
  </body>
</html>

Use semantic tags that describe meaning — <header>, <nav>, <main>, <button> — instead of wrapping everything in <div>. It helps accessibility and SEO.

Try it. Build a page about yourself with a heading, a short bio paragraph, a list of hobbies, and a link to a favourite site.

2CSS — the styling

CSS (Cascading Style Sheets) controls how things look: colors, fonts, spacing, and layout. You select an element and give it rules.

styles.css

.card {
  background: #fff;
  padding: 16px;        /* space inside the border */
  border: 2px solid #eee;
  border-radius: 12px;
  margin: 8px;          /* space outside the border */
}

The box model is the #1 thing beginners must master: every element is a box made of content → padding → border → margin (from the inside out).

Box model. If spacing looks wrong, it's almost always padding vs. margin. Padding is inside the border; margin is the gap outside it.

3Responsive layout — Flexbox & Grid

Modern layouts use two tools. Flexbox arranges items in one direction (a row or a column). Grid arranges items in two dimensions (rows and columns).

Flexbox — a navbar

.navbar {
  display: flex;
  justify-content: space-between; /* logo left, links right */
  align-items: center;           /* vertically centered */
  gap: 16px;
}

Grid — a 3-column gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

4JavaScript — the behavior

JavaScript makes pages interactive: responding to clicks, updating content, and talking to servers. Start with variables, functions, arrays, objects, and the DOM.

script.js — react to a click

const button = document.querySelector("#greet");
let count = 0;

button.addEventListener("click", () => {
  count += 1;
  button.textContent = `Clicked ${count} times`;
});

Learn async code too — fetching data from an API is a daily task:

Fetch data from an API

async function loadUser() {
  const res = await fetch("https://api.github.com/users/octocat");
  const user = await res.json();
  console.log(user.name); // "The Octocat"
}

5React — thinking in components

React lets you build UIs from reusable components and reactive state. When state changes, React re-renders the parts that changed. It has the most jobs and the largest beginner community.

Counter.jsx

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Don't skip fundamentals. Learn plain JavaScript before React. React is "just JavaScript" — arrays, functions, and objects show up everywhere.

6Version control with Git

Every project should live on GitHub. Git tracks your changes as commits and lets you collaborate. These four commands cover 90% of daily use:

Terminal

git init                 # start tracking a project
git add .                # stage your changes
git commit -m "message"  # save a snapshot
git push                 # upload to GitHub

Beginner project ideas

Personal portfolio website (HTML + CSS)
Tip calculator (JavaScript)
Weather dashboard using a public API (fetch)
To-do list app (React state + forms)
Movie or book search app (React + API)

Follow this in the 30-day plan

Knowledge Check

Test what you learned. Each correct answer earns XP. up to 65 XP

1. Which CSS features are the primary tools for responsive layouts?

2. What does `const [count, setCount] = useState(0)` do in React?

3. Which HTML is the most semantic and accessible for a clickable action?

4. What is Git mainly used for?

5. In the CSS box model, what order does spacing go from the content outward?