A clear path from your first page to a working project.

Give a page a title, a heading, and a paragraph. Learn what the tags mean.

Find the head and body, and give your page the settings a browser needs.

Give text a readable hierarchy with headings, paragraphs, and meaningful breaks.

Add useful links and images that still make sense when the picture cannot be seen.

Choose an ordered, unordered, or description list based on what your content means.

Build a small table with a caption and headers that explain its cells.

Connect labels to inputs and understand the difference between a form and a working service.

Choose meaningful regions for navigation, main content, articles, and supporting information.

Turn plain text into headings, paragraphs, and a list.

Review labels, link text, alternative text, and keyboard access with practical checks.

Extend basic inputs with grouped choices, a dropdown, a message, and browser validation.

Use native media controls and provide captions or transcripts so the information stays available.

See how HTML provides a place for JavaScript to draw, remember values, or request location.

Stay in HTML for the overview; revisit its JavaScript exercises after variables and events. Not required to finish this course.

Use character references when text would otherwise be interpreted as markup.

Write useful page information for browser tabs, search previews, and shared links.

Combine your HTML skills in a personal learning portfolio built in your own files.

Connect CSS to HTML and read a rule as selector, property, and value.

Target the intended elements, then understand which matching declaration wins.

Separate text from background color and build readable surfaces.

Choose fonts, size, line spacing, and emphasis with a clear reading hierarchy.

Distinguish content, padding, border, and margin before sizing a card.

Give a simple card readable text and comfortable spacing.

Understand display modes and offsets before using Flexbox and Grid.

Separate container alignment from the sizing of its direct children.

Define tracks and place items using grid lines without confusing them with cells.

Combine flexible widths and media queries without shrinking text to force a fit.

Animate a state change, recognize keyframes, and respect reduced-motion preferences.

Name shared design values, inherit them, and override a theme in one place.

Distinguish pseudo-classes from pseudo-elements and finish with maintainable, accessible styles.

Reason about independent flex containers and visual order without repeating the basic row-and-column setup.

Compare align-self, text baselines, and auto margins with container-wide alignment.

Build a centered welcome card by writing the CSS yourself.

Calculate a wrapping threshold and separate line alignment from item alignment.

Arrange a brand and menu that adapt to small screens.

Distinguish free-space shares from final widths and diagnose content that refuses to shrink.

Separate explicit track definitions from implicit tracks created by extra content.

Calculate what remains after fixed tracks and gaps, then test the minimum behind 1fr.

Build three equal feature cards that stack on mobile.

Compare ordinary and dense auto-placement when spanning items leave holes.

Reveal the empty-track difference and protect a responsive minimum on very narrow screens.

Combine a responsive navbar, centered hero, and feature grid in one page.

Add behavior to a page and see your first message in the Console.

Use let and const, recognize basic types, and follow a variable's scope.

Calculate results, compare values, and recognize conversion surprises.

Use if, else, and switch to make decisions from values.

Read a loop's start, condition, update, and stopping point.

Define functions, pass arguments, and use returned values.

Read indexes, change items, and choose map, filter, or reduce.

Group named properties, read nested values, and add a method.

Select existing elements and create new content safely.

Connect page events to callbacks, read current input, and update a message.

Make buttons change a number with click events.

Read a name and respond when a form is submitted.

Use templates, defaults, destructuring, and spread without hiding their meaning.

Follow this, shared objects, shallow copies, and prototype lookup.

Serialize values, parse text, and check data before using it.

Save strings, restore validated data, and handle unavailable storage.

Combine form events, text input, and DOM creation in a usable project.

Compare immediate work with callbacks scheduled for later.

Follow pending, fulfilled, and rejected results through a chain.

Await promise results and recover with try, catch, and finally.

Separate network failure, HTTP status, JSON parsing, and data validation.

Give files clear homes and connect them with paths that work.

Reconnect stylesheets, scripts, images, and links using a folder tree.

Take your practice out of Tuklas: open real files, make an edit, and see it in your browser.

Compare what you expected with what happened, investigate a cause, and test one small change.

Investigate three bugs in a small counter page.

Build a sample-weather interface locally, with loading, missing-data, and error states.

JavaScript capstone · combines the completed courses.