Everything so far comes together: a real multi-page site, responsive on a phone, deployed on the open internet with your name on it.
A "website" is usually more than one page. A home page, an about page, a projects page. These are just separate HTML files in the same folder, linked together with <a> tags.
Browsers and servers treat index.html as the default "home" file. When someone visits yoursite.com, they automatically get index.html. Always name your home page this.
Over half of all web traffic is on phones. A "responsive" site adapts its layout to different screen sizes. The key tool: CSS media queries.
/* Default: desktop layout */ .cards { display: flex; gap: 24px; } /* On small screens (phones): stack them */ @media (max-width: 768px) { .cards { flex-direction: column; } }
Make my website responsive for mobile. Here's my current HTML and CSS: [paste it]. On screens smaller than 768px: stack columns vertically, reduce font sizes, make the nav a simple list. Add the viewport meta tag if I'm missing it. Explain what each media query does.
Netlify lets you take your local folder and put it on the real internet for free. No servers, no configuration, no credit card. Just drag and drop.
You created this account in Setup Day. Open it at app.netlify.com.
At the bottom of the screen you'll see a drop zone that says "Drag and drop your site folder here." Do exactly that :: drag your entire my-website/ folder there.
Netlify gives you a URL like random-name-123.netlify.app. That's your real site on the real internet. Share it with anyone.
Made changes? Drag the folder again and Netlify updates the live site. Takes about 10 seconds.
When you see your own URL live on the internet, something clicks. You built that. It exists in the world. Everyone has a slightly different reaction :: most people grin a lot.
The words on your site matter as much as the design. Use Claude to draft headlines, bios, project descriptions, and calls to action :: then refine them in your own voice.
Write copy for my personal portfolio site. I'm a [describe yourself] who is learning web development. Write: - A punchy 1-line hero headline - A 2-sentence bio for the About page - 3 short project descriptions (I built: [list your projects so far]) - A footer tagline Keep it honest, confident, and not overly formal.