Build Your First Website

Step 1

Plan the Site Before You Code

Professionals never open an editor and start typing randomly. They plan first. Ten minutes of planning saves hours of confusion — this is the single biggest habit that separates a beginner from a pro.

We're going to build a personal portfolio — the website every developer needs to show who they are and what they've built. First, decide what sections it needs. A classic, effective structure is:

Header / Navigation — your name/logo and links to jump around.
Hero — the big first impression: who you are in one line.
About — a short paragraph about you.
Projects — cards showing your work.
Contact + Footer — how to reach you.

Animated example

Sketching the page as a wireframe

Hero — "Hi, I'm Sara"

About Me

Projects

Start with the header at the top — it stays visible as visitors scroll.
The hero is the first thing people see. One strong sentence about you.
An about section builds trust with a short bio.
Projects are the proof — the reason someone hires you.
A contact + footer closes the page. That's a complete, professional layout.

Draw it on paper firstSketch these boxes with a pen before writing any code. A wireframe turns a vague idea into a concrete plan you can build one box at a time.

Step 2

Set Up Your Project Files

Every website is just a folder of files. A clean, standard structure from day one keeps your project professional and easy to grow.

Create a folder called my-portfolio and put three files inside it. These three are the heart of almost every website you'll ever build:

Animated example

The three files of a website

index.html

styles.css

script.js

index.html — the structure. Browsers always look for "index" as the home page.
styles.css — the styling. Linked from the HTML's <head>.
script.js — the behaviour. Linked at the end of the <body>.

Connect them inside index.html so the browser loads all three together:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sara — Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- our sections go here -->
  <script src="script.js"></script>
</body>
</html>

Don't have an editor? Use oursYou can build this whole project right now in the Pro Web Editor — it already has the three files and a live preview. Follow along there.

Step 3

Build the Structure (HTML)

Structure first, always. We write the whole page in plain, semantic HTML — no styling yet. It'll look bare, and that's exactly right: get the skeleton solid before adding skin.

Using the semantic tags from the HTML course, each planned box becomes a real element. Notice how the HTML reads like the wireframe you drew. Why not just use <div> everywhere? By using semantic tags like <header>, <nav>, <section>, and <footer>, you create a document that is accessible to screen readers, friendly to search engines (SEO), and easier for other developers to read. Every tag has a purpose.

index.html — body

<header>
  <h1>Sara</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
  </nav>
</header>

<section class="hero">
  <h2>Hi, I'm Sara — a Web Developer</h2>
  <a class="btn" href="#projects">See my work</a>
</section>

<section id="about"> … </section>
<section id="projects"> … </section>
<footer> … </footer>

Animated example

The raw HTML page (no CSS yet)

index.html

Sara

About · Projects

Hi, I'm Sara — a Web Developer

About: I build clean, fast websites…

Projects: • Site 1 • Site 2

The <header> renders your name as an <h1>.
The <nav> links appear — plain and underlined for now.
The hero <h2> states who you are.
The about and projects sections stack below.
It's ugly — but the structure is complete and correct. CSS is next.

Type this structure in the Editor

Step 4

Style the Layout (CSS)

Now the transformation. With the box model, Flexbox and a few colour variables from the CSS course, the bare skeleton becomes a real, designed website.

Start every stylesheet like a pro: a reset, some CSS variables for your palette, and a base font. Then style section by section. We rely heavily on Flexbox to align items inside the header and CSS Grid to lay out our projects. These modern layout systems eliminate the need for hacks like floats, allowing us to align elements flawlessly with just a few lines of code (e.g., justify-content: space-between;).

styles.css

* { margin: 0; box-sizing: border-box; }
:root { --brand: #b534ff; }
body { font-family: 'Outfit', sans-serif; line-height: 1.6; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}

Animated example

CSS transforms the bare page

Hero

About

Projects

Style the header: Flexbox spreads the logo and nav apart, with padding.
The hero gets a background, big centred text and a button — the eye-catcher.
The about section gets comfortable spacing and readable width.
Projects and footer are styled too. Same HTML — now it looks like a real site.

Style top-to-bottomWork through your sections in order, previewing after each. Small, visible steps keep you motivated and make bugs easy to spot.

Step 5

Make It Responsive

Over half of all web traffic is on phones. A site that only looks good on a laptop is only half-finished. Media queries make one site adapt to every screen.

The recipe: use flexible units (like rem and %), let content wrap, and add a media query for narrow screens that stacks columns and swaps the desktop nav for a mobile menu. A Mobile-First approach is often best: write your default CSS for small screens, and then use @media (min-width: 768px) to add complexity for larger screens. For this project, we show a desktop-first approach to start, which scales down the grid when the screen width drops below 700px.

styles.css

/* projects: 3 columns on desktop */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* phones: stack into 1 column */
@media (max-width: 700px) {
  .projects-grid { grid-template-columns: 1fr; }
  nav { display: none; }
  .burger { display: block; }
}

Animated example

The same site on desktop and phone

On a wide screen: full nav on top, projects in a 3-column grid.
Shrink to a phone — the media query fires: columns stack to one, and the nav collapses into a burger menu.
Back to desktop, the full layout returns. One codebase, every device.

Test narrow constantlyIn your browser, drag the window narrow (or press F12 → device toolbar) after every change. Responsive bugs hide until you actually look at a small screen.

Step 6

Add Interactivity (JavaScript)

A static site is fine, but a touch of JavaScript makes it feel alive and professional. Using the DOM and events you learned, we'll wire up the mobile menu.

The burger button needs to open and close the menu. This is the exact "select an element → listen for a click → toggle a class" pattern from the DOM course. In addition to this, a professional site often includes smooth scrolling, which can be achieved purely in CSS (html { scroll-behavior: smooth; }) or with JavaScript for more control. Here, we focus on the core interaction:

script.js

const burger = document.querySelector(".burger");
const menu = document.querySelector(".mobile-menu");

burger.addEventListener("click", () => {
  menu.classList.toggle("open");
});

Animated example

Tapping the burger toggles the menu

About Projects Contact

On a phone, the menu is hidden and only the burger shows.
The user taps it → the click event fires → classList.toggle("open") slides the menu down.
The visitor picks a link and navigates.
Tapping again toggles the same class off — the menu closes. Clean, professional behaviour in 4 lines.

Good places for a little JSMobile menu toggle, smooth-scrolling nav links, a "back to top" button, a simple contact-form validation, a dark-mode switch. Small touches, big professional feel.

Step 7

Polish & Details

The difference between "a student's site" and "a professional's site" is 20 small details. Here's the checklist that elevates any page.

Typography — use one nice web font (Google Fonts) and consistent sizes.
Spacing — generous, consistent padding. Cramped pages feel amateur.
Hover states — buttons and links should react (:hover + transition).
Shadows & radius — soft box-shadow and rounded corners add depth.
A colour system — 1 brand colour, 1 accent, neutrals. Don't use ten colours.
Alt text & a good <title> — accessibility and SEO.
Semantic Contrast — ensure text has high contrast against the background so it is readable by everyone.
Performance — compress your images so the site loads instantly.

Animated example

A project card, before and after polish

Project One

A small web app

A flat, plain card. Functional, but forgettable.
Round the corners — instantly friendlier.
Add breathing-room padding so the content isn't cramped.
A soft shadow lifts it off the page.
A hover lift + accent border. Now it looks designed, not default.

Polish your card in the Editor

Step 8

Publish It Live on the Internet

A website on your laptop isn't really a website until the world can visit it. The best part: publishing a static site is completely free and takes minutes.

Your site is just three files, so any static host works. Two beginner-friendly, free options:

GitHub Pages — push your folder to a GitHub repository, enable Pages in the settings, and you get a yourname.github.io address.
Netlify — even simpler: drag your project folder onto app.netlify.com/drop and it's live in seconds with a free URL.

Animated example

From your folder to a live URL

your folder

→

upload / push

→

host builds

→

live!

https://sara.netlify.app

You have your finished folder of three files.
Upload it (Netlify drag-and-drop) or push it (GitHub).
The host copies your files to its servers worldwide.
Seconds later it's live at a real URL anyone on earth can open. You have a website. 🎉

You did it — you're a web developerYou planned, structured, styled, made responsive, added interactivity to, and published a real website. That is the entire front-end workflow professionals use every day. Everything from here is just more practice and bigger projects.

Congratulations — you can build websites now 🚀

You've completed the entire Web Development track: HTML, CSS, JavaScript, the DOM, React, and this full build. You genuinely have the skills to make your own first website. So go build it — for real, for you.

Build it in the Editor Take the final Quiz All Courses