You can make a page look deliberate on any screen.
That is not a vague cheer. It is a concrete claim about what the last twelve lessons put in your hands. Run the page below. Scroll the preview to Skills and Contact if you do not see them yet. The header sits above them. If you already ran the exercises in lessons 11 through 22, this sandbox should open with your own version. If not, it opens with the completed Act II starter, the same styling either way. Try DESKTOP and PHONE both.
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
What this page can do
Everything on that page was styled on purpose, one lesson at a time, on top of the structure Act I already gave it.
It attaches CSS through a stylesheet of its own, styles.css, reached with a <link>. It targets elements by tag, by class, and by id, choosing the right one for each job. It has a chosen palette instead of browser defaults, and type with a real font stack, sized and spaced for reading. Its sections have padding, a border where one was chosen, and margin that gives the page rhythm instead of clutter. Its Skills list and its GitHub and LinkedIn links are shaped by display, not by accident. Its nav and its Skills cards are flex containers, aligned and spaced with justify-content, align-items, and gap. The whole page sits in a centered column instead of stretching edge to edge. Now it also adapts. A media query gives the nav and the Skills cards a column layout on a narrow screen and a row on a wide one. Check both with the DESKTOP and PHONE buttons in the sandbox preview.
You can download those files from the sandbox and open them outside this site. The styling is real CSS, not a demo that only works here.
What it cannot do yet
It looks considered now, colored, spaced, laid out, and readable on a phone. That is not the same as responding to a visitor. Click a link and it jumps to a section. Focus a field and type into it. Submit the form and this sandbox catches the moment and reports it, instead of reloading. On a real deployed page, that submit would send the data and reload. Nothing on the page reacts to a click by changing itself, remembers anything you typed, or shows or hides content on demand. Custom behaviour after a click, a keystroke, or a submission belongs to Act III.
What comes next
Act III teaches behaviour. JavaScript is how a page stops being static and starts responding to whoever is looking at it. A click can change text on screen. A form can answer back before ever reaching a server. A toggle can switch the whole page between light and dark. You will not throw away the structure from Act I or the styling from Act II. You will make both of them react.
Act III continues on this same page. It starts with the smallest piece JavaScript needs: a <script> tag, a value, and console.log.