WebHTML & CSSCourse 1 of 3 · The Front-End Foundation

The Structure & Style

HTML from your first tag to real semantic pages, plus the CSS fundamentals to style them.

4 sessions
60 min each
Beginner

No coding experience needed
Browser editor or VS Code
Certificate when you finish all 3 courses

Course overview

What you'll learn

Build an "About Me" page from scratch: skeleton, headings, text, links, images and lists.
Turn your page into a small site: semantic sections, a contact form with labels, a table, media and an accessibility check.
Style your site with CSS: selectors, the box model, colors, units, typography and the browser developer tools.
Capstone: a styled landing page with a Flexbox navigation bar, a hero, a row of cards and a centered layout.

Who this course is for

Complete beginners: you need no coding experience.
You learn best by writing the code yourself, not by watching videos.
You want feedback on your own code, at your own pace, one hour at a time.
You would rather start in the browser than install tools first.

Course syllabus

4 sessions
24 blocks of 10 min
4 hours

Each session is one hour with the AI tutor and uses one credit. Sign in to start.

Session 1NextYour First Web PageBuild an "About Me" page from scratch: skeleton, headings, text, links, images and lists.
1. Welcome and setup10 min
2. The page skeleton10 min
3. Elements, attributes and text10 min
4. Links and images10 min
5. Lists and comments10 min
6. Final review and wrap-up10 min
Start session
Session 2HTML for Real PagesTurn your page into a small site: semantic sections, a contact form with labels, a table, media and an accessibility check.
1. Welcome, warm-up and homework10 min
2. Semantic page structure10 min
3. Forms: the contact page10 min
4. Tables10 min
5. Media and an accessibility pass10 min
6. Validation and final review10 min
Start session
Session 3Your First StylesheetStyle your site with CSS: selectors, the box model, colors, units, typography and the browser developer tools.
1. Welcome, warm-up and setup10 min
2. Linking a stylesheet10 min
3. Selectors10 min
4. The box model and the developer tools10 min
5. Colors, units and typography10 min
6. Final review and wrap-up10 min
Start session
Session 4Styling a Real PageCapstone: a styled landing page with a Flexbox navigation bar, a hero, a row of cards and a centered layout.
1. Welcome back, warm-up and plan10 min
2. Widths that surprise you10 min
3. A Flexbox header10 min
4. The hero section10 min
5. Sections, a wrapper and three cards10 min
6. Capstone final review and wrap-up10 min
Start session

How the tutor teaches

The same three rules in every session, from the first line of code to the last.

Practice, not videos

You write all of the code. The tutor reacts to what you actually typed, line by line.

Hints, not answers

A ladder from a light nudge to the solution, and only after you have made a real attempt.

Real output, never invented

Your code runs for real. The tutor reads what the machine showed, and trusts it.

Keep the momentum going

The next course of The Front-End Foundation, and where the other paths begin.

All courses

const btn = document.querySelector("#add-btn");

btn.addEventListener("click", () => {
  const li = document.createElement("li");
  li.textContent = input.value;
  list.appendChild(li);
  input.value = "";

WebJavaScriptThe Interactive WebCourse 2 of The Front-End Foundation · 4 sessions · Intermediate

name = "Craftstack"
age = 29

print(f"{name} is {age}")
# Craftstack is 29

for ch in name:

PythonThe WorkbenchPython from Scratch · 4 sessions · Beginner

SELECT students.name, courses.title
FROM enrollments
JOIN students ON enrollments.student_id = students.id
JOIN courses ON enrollments.course_id = courses.id
WHERE students.age >= 21
ORDER BY students.name;

SQLDatabases & SQL FundamentalsDatabases & SQL · 5 sessions · Beginner

Errors you may meet in this course

Web

CSS not working? 7 reasons your styles don't apply, and how to find which one

Why a CSS rule does nothing: the stylesheet isn't loaded, the selector doesn't match, a missing semicolon, an invalid value, another rule wins, the order, or an inline element. Each one tested in a browser.

31 October 2026 · 7 min read

Frequently asked questions

What students ask before they start The Structure & Style.

Do I need to install anything?

Not for this course. The editor in the page runs your code next to the chat. If you prefer, you can use VS Code on your own computer.

What if I get stuck?

The tutor gives a ladder of hints, from a light nudge to the solution, and only after you have made a real attempt.

Do I keep my code?

Yes. In the editor in the page, your project is saved on the server for this course, continues in your next session on any device, and downloads as a .zip.

Do I get a certificate?

Yes, for the whole path. When you have finished all 3 courses of The Front-End Foundation (this is Course 1), you get the The Front-End Foundation certificate of completion with your name: a link anyone can check, one-click LinkedIn and a PDF. Your progress towards it is on your dashboard.

Do I need anything from before?

No. This course starts from zero. Take the sessions in order: each one builds on the one before.

Write your first tag in the next 20 minutes.

Twenty minutes with the tutor, right in your browser. No card, nothing to install.

Start the free trial

A session: the tutor's chat on the left, the code editor with a Java program and its output on the right