Project: Your Personal Page

Time to build something real: your own personal page. It uses everything from the course, and by the end it can be online for anyone to visit.

1. Plan the sections

Before any code, decide what goes on the page:

2. The whole page

Here it is, built from the course's pieces. Make it yours: change the name, text, colours (in :root) and projects. Use the width buttons to check phone and desktop.

Things to notice:

• Variables in :root hold the whole design: change --brand and every button, link and tag follows.
• Flexbox lays out the header; Grid with auto-fit lays out the projects; one media query puts the photo beside the intro on wider screens.
• The project images have alt="" because they're decorative: the card titles already say what each project is.
• The sticky header and #about-style links make a one-page site easy to move around.
• Forms on a static site need a service to receive messages: Formspree or Netlify Forms give you an address for action.

3. Check it

Before publishing, go through the list:

1. Widths: Phone, Tablet and Desktop all look right; nothing overflows sideways.
2. Keyboard: Tab through every link, the button and the form; the focus is always visible.
3. Headings: one h1, then h2 for sections, h3 for cards.
4. Images: meaningful alt text, or alt="" for decoration.
5. Contrast: text is easy to read on its background.
6. Validate: paste your HTML into the W3C validator (validator.w3.org) to catch typos.

4. Put it online

Make a folder with index.html, your CSS (in a <style> or a style.css file) and your images, then pick one:

Netlify Drop (quickest)

1. Go to app.netlify.com/drop.
2. Drag your folder onto the page.
3. You get a public web address in seconds. Make a free account to keep it and update it.

GitHub Pages (great if you're learning Git)

1. Create a repository on GitHub and upload your files, with index.html at the top level.
2. In the repository, open Settings → Pages, choose the main branch and save.
3. After a minute, your site is live at https://your-username.github.io/repository-name/.

Both give you HTTPS for free, and you can connect your own domain name later.

5. Make it yours

Ideas to keep going:

1. Dark mode: add @media (prefers-color-scheme: dark) { :root { --bg: #0f172a; --text: #e5e7eb; … } }.
2. More pages: a blog post page linked from a project card.
3. A web font for headings from Google Fonts.
4. Animations: fade cards in with a transition on hover.
5. Next course: add interactivity with JavaScript, like a menu button, a photo lightbox or form checks.

Course recap

Over 14 days you learned:

• HTML: elements and tags, text and lists, links and images, semantic layout, tables and forms.
• CSS: rules and selectors, the cascade, the box model, typography, colour and variables.
• Layout: Flexbox for rows and columns, Grid for two-dimensional layouts.
• Responsive design: the viewport, fluid units and mobile-first media queries.
• Polish and accessibility: positioning, transitions, focus, contrast and a checklist.

Next, take the HTML & CSS skill test, then bring your pages to life with the JavaScript course.