Lab: About Me Page

This is your first independent build. No code-along this time: what goes on the page, and how it looks, is entirely up to you. That's a little scary and a lot of fun, usually in that order.

Setup

Copy the about-me-starter/ folder (your instructor has it) into your invent-the-future folder and rename it about-me/. Open both files, read the comments, and confirm the page loads in the browser before touching anything.

Working from home? The starter is small enough to type out:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>About Me</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <h1>Your Name Here</h1>
      <!-- TODO: add an <img> with alt text -->
      <!-- TODO: add two short paragraphs about yourself -->
      <!-- TODO: add a <ul> with three interests -->
      <!-- TODO: add an <a> link to something you love -->
    </div>
  </body>
</html>
body {
  background-color: #f5f5f5;
  font-family: sans-serif;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
}

/* TODO: change the colours to your own */
/* TODO: style your h1, p, and a elements */
/* TODO: add one class-based style of your own */

The <!-- TODO --> comments are your task list. The browser ignores them; you shouldn't.

Required HTML

Your page needs all of the following:

Element What it should contain
<h1> Your name or a chosen handle
<img> An avatar, photo, or character image — with meaningful alt text
Two <p> tags A short introduction. Write like you're describing yourself to someone you just met.
<ul> with three <li> items Three interests
<a> A link to something you love — a song, a project, a video, an article
<div class="container"> Wraps all the content above

Required CSS

Link your stylesheet in the <head> first:

<link rel="stylesheet" href="styles.css">

Then build up these rules:

  • A colour scheme: at least two colours used deliberately, not just whatever looked fine
  • A font (bonus: pull one from Google Fonts)
  • padding and margin so nothing is stuck to the edges
  • A centred container: max-width with margin: 0 auto
  • At least one class-based style — a styled link, a pull-quote, anything with a class

Save, refresh, look, adjust. That loop is how you debug CSS. It's also, between us, how professionals do most of their styling.

Stretch goals

Once the required elements are done, pick at least one:

  • Pair two Google Fonts — one for headings, one for body text
  • Build a four-colour palette: background, text, accent, links — applied on purpose
  • Add a:hover { } and img:hover { } rules that change something on mouse-over
  • Create interests.html linked from index.html, sharing the same stylesheet
  • Do an accessibility pass: every image has meaningful alt text, every link describes where it goes

Gallery walk

When your page is done, leave it open and walk the room. Visit as many pages as you can. For each one, write a sticky note with one thing you liked and one small suggestion.

Notice how differently the same tags and properties land when different people are behind them. Same ingredients, wildly different dishes. That's the part I'd want you to remember from today.