WebJavaScriptCourse 2 of 3 · The Front-End Foundation

The Interactive Web

Intermediate HTML and CSS, plus JavaScript fundamentals, the DOM, and a real capstone project.

4 sessions
60 min each
Intermediate

Builds on Course 1
Browser editor or VS Code
Certificate when you finish all 3 courses

Course overview

What you'll learn

Build a responsive photo gallery with CSS Grid, a featured item and media queries.
Variables, conditions, loops, functions, arrays, objects and template literals, run in the browser console.
Make a page react: select elements, change text, listen for clicks, build a click counter and toggle classes.
Plan, build and test an interactive to-do list: add tasks, remove them, and handle the edge cases.

Who this course is for

You finished Course 1, The Structure & Style, or already know what it covers.
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 1NextLayouts That AdaptBuild a responsive photo gallery with CSS Grid, a featured item and media queries.
1. Welcome, warm-up and setup10 min
2. The cascade, specificity and inheritance10 min
3. CSS Grid basics10 min
4. Featured items and rows10 min
5. Responsive design with media queries10 min
6. Flexbox or Grid? And wrap-up10 min
Start session
Session 2Your First JavaScriptVariables, conditions, loops, functions, arrays, objects and template literals, run in the browser console.
1. Welcome, warm-up and setup10 min
2. Variables and data types10 min
3. Operators and control flow10 min
4. Functions and arrow functions10 min
5. Arrays, objects and template literals10 min
6. Final review and wrap-up10 min
Start session
Session 3The DOM & EventsMake a page react: select elements, change text, listen for clicks, build a click counter and toggle classes.
1. Welcome, warm-up and setup10 min
2. The DOM, selecting and changing elements10 min
3. Event listeners10 min
4. Reading what the user typed10 min
5. The click counter and a Reset button10 min
6. Classes instead of inline styles, and final check10 min
Start session
Session 4Capstone: A To-Do ListPlan, build and test an interactive to-do list: add tasks, remove them, and handle the edge cases.
1. Welcome back, warm-up and plan10 min
2. Structure and style, no JavaScript yet10 min
3. Adding tasks10 min
4. A Remove button on every task10 min
5. Testing and polish10 min
6. Final check 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

interface Course {
  title: string;
  level: "BEGINNER" | "ADVANCED";
  pages: number;
}

function firstOf<T>(arr: T[]): T {

WebTypeScriptThe Type-Safe UpgradeCourse 3 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

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Why JavaScript says it cannot read addEventListener of null, the usual causes (a missing #, a script that runs too early, a class instead of an id, a shared script) and how to fix each one.

21 October 2026 · 6 min read

Frequently asked questions

What students ask before they start The Interactive Web.

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 2), 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?

This course builds on Course 1, The Structure & Style. Take the sessions in order.

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