2.1 HTML: Studio Profile Setup

Every website starts with a skeleton — the basic structure that tells the browser "this is a webpage." This week you're building the front door to your studio profile: three real pages, connected together. Work through the tasks below in order — each one builds toward a complete, visible page.

Before You Start

Your project folder has one exact home. If it's anywhere else, Live Preview and your links will break.

Your folder structure needs to look exactly like this:

H:\
└── ICT 9\
    └── 2_web_development\
        └── your-slug\          (e.g. emma-r — see Step 5 below)
            ├── index.html
            ├── about.html
            ├── work.html
            ├── css\
            │   └── style.css
            ├── js\
            │   └── script.js
            └── images\

1. Open File Explorer and go to your H: drive.
2. Create a folder called ICT 9 if you don't already have one, then inside it create a folder called 2_web_development.
3. Download student-site.zip — just let it save normally. It'll land in your Downloads folder.
4. In Downloads, right-click the zip → Extract All, and leave the destination as Downloads. This creates a new student-site folder right there.
5. Rename that extracted student-site folder to your slug — while it's still in Downloads — your first name plus the first letter of your last name, all lowercase, no spaces (e.g. Emma Rodriguez → emma-r). This will be the exact name of your published site later, so it's worth getting right now. If someone else in your block already has that slug, check with your teacher — you'll get a number added (emma-r2).
6. Move (cut and paste) your renamed folder out of Downloads and into the 2_web_development folder on your H: drive.
7. Open your renamed folder in VS Code — not 2_web_development, not a folder still called student-site, and not a folder called student-site (1) or anything else. Check the VS Code Explorer sidebar: you should see css, js, images right away, with no extra folder in between — like this:
8. Add the Live Preview extension in VS Code, which lets you see your changes in real time as you edit your HTML files.

VS Code reminders

• Always open your folder from your H: drive — that's where all your real files live, and it's what you should be updating.
• Turn on Auto Save — File > Auto Save — so you don't lose your work.
• Alt + Z turns on word wrap, so long lines of code stop running off the screen.

You're building your Home page: the front door to your studio profile. It needs four things: your name, your avatar image, a tagline, and your studio role.

1. In the VS Code Explorer sidebar, first click on your folder name at the very top so nothing else is highlighted — if css, js, or images is still highlighted blue from clicking around, your new file will get created inside that folder instead. Then click the New File icon (a page with a +) at the top of the sidebar and name the new file exactly index.html.
2. Double-check it worked: index.html should appear at the same level as css, js, and images — not nested inside any of them. If it ended up inside a folder, drag it out to the top level (or delete it and try again).
3. Copy the starter code below into index.html.
4. Add your New Hire Avatar image into your images folder — full steps below.
5. Change the two spots marked "Your Name" to your actual name.
6. Update the image src to match your avatar's filename exactly, and write real alt text describing your avatar.
7. Replace the placeholder tagline with a short one-line tagline (think: how a game studio would describe an employee — e.g. "Web Department • Problem-solver, gamer, coffee enthusiast").
8. Replace the placeholder sentence with one real sentence about your studio role — what you're excited to work on, or what you bring to the team.
9. Save, then open with Live Preview to see it live.

Step by step: adding your avatar image

This trips people up more than anything else this week — follow every step, in order.

1. Find your New Hire Avatar file (the Canva PNG you made in Unit 1, Lesson 1.3). It's probably in your Downloads folder or OneDrive.
2. Copy it (right-click → Copy, or click it and press Ctrl+C).
3. In File Explorer, navigate to H:\ICT 9\2_web_development\your-slug\images (your renamed folder, not student-site).
4. Paste it there (Ctrl+V).
5. Look at the exact filename — including capitalization and the file extension. Avatar.PNG and avatar.png are not the same to a website. If you want, rename it to something simple and all lowercase, like avatar.png.
6. In index.html, make the src match that exact filename: src="images/avatar.png".
7. Write real alt text — a sentence describing what the avatar actually looks like (e.g. alt="Cartoon avatar of a person with short brown hair, glasses, and a green hoodie"), not alt="image" or alt="".
8. Save and check Live Preview — you should see the image, not a broken-image icon.

Starter code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Name — Studio Profile</title>
</head>
<body>
  <h1>Your Name</h1>
  <img src="images/avatar.png" alt="Describe your avatar here">
  <p>Your tagline goes here — one line, studio-employee style.</p>
  <p>Write one sentence introducing yourself and your studio role here.</p>
</body>
</html>

Now build a second page that tells people more about you. Your Home page was a quick intro — this page is where you actually say something. It'll have a few short sections, each with its own heading, so it's easy to read at a glance.

1. Create a new file called about.html in the same folder as index.html.
2. Copy the starter code below into it.
3. Write a real bio (2–3 sentences) under "My Story."
4. Replace the three list items under "A Few Things I'm Into" with three real things about you.
5. Fill in the "Quick Facts" section — one short line per fact, using the prompts below.

20 Questions About Me

You don't need to answer all 20 — just pick enough to fill your three sections: a few for "My Story," a few for "A Few Things I'm Into," and a few short ones for "Quick Facts."

1. What should people call you? (nickname's fine)
2. What grade were you in last year, and how's this year different so far?
3. What's your favourite subject (besides this one)?
4. What's one hobby or activity you spend a lot of time on?
5. What's your favourite video game, show, or movie right now?
6. Do you play any sports or an instrument?
7. What's a skill you're actually proud of?
8. What's your favourite food?
9. If you could have any superpower, what would it be?
10. What's the weirdest food combination you genuinely enjoy?
11. Cats, dogs, or something else? (or no pets at all)
12. What's a goal you have for this course?
13. What's something you're good at that has nothing to do with school?
14. If you could visit anywhere in the world, where would you go?
15. What's your favourite season, and why?
16. What's a fun fact most people don't know about you?
17. Morning person or night owl?
18. What's your favourite way to spend a weekend?
19. What's a game or show you'd recommend to literally anyone?
20. What do you want to build or make by the end of this course?

Starter code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Me — Your Name</title>
</head>
<body>
  <h1>About Me</h1>

  <h2>My Story</h2>
  <p>Write your bio here — a couple sentences about who you are.</p>

  <h2>A Few Things I'm Into</h2>
  <ul>
    <li>Thing one</li>
    <li>Thing two</li>
    <li>Thing three</li>
  </ul>

  <h2>Quick Facts</h2>
  <p>
    Favourite subject: your answer here<br>
    A skill I'm proud of: your answer here<br>
    Goal for this course: your answer here
  </p>
</body>
</html>

Your third page is where your projects will live — but you haven't made any yet! That's OK. For now, build a placeholder so the page exists and looks right. Then you'll connect all three pages together with navigation, so anyone visiting your site can move between them.

1. Create work.html using the starter code below.
2. Replace the three placeholder list items with three real project ideas you're hoping to build this year (a game, an app, a website feature — anything, even rough ideas count).
3. Add the navigation code to the top of all three pages (index.html, about.html, work.html) — it's the same three links every time.
4. Test every link from every page — you should be able to get anywhere from anywhere.

work.html starter code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Work — Your Name</title>
</head>
<body>
  <h1>My Work</h1>
  <p>Coming soon — here's what I'm hoping to build this year:</p>
  <ul>
    <li>Project idea one</li>
    <li>Project idea two</li>
    <li>Project idea three</li>
  </ul>
</body>
</html>

Navigation code (add to the top of <body> on all three pages)

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About Me</a>
  <a href="work.html">My Work</a>
</nav>

Unlocks after all three Green tasks are done.

Right now your pages work, but the code is pretty plain. Let's clean it up so it reads like a real website.

1. On all three pages, replace <h1> + <nav> at the top with a <header> wrapping both.
2. Wrap your main page content in <main>.
3. Add a <footer> at the bottom of all three pages with a short line like <p>&copy; 2026 Your Name</p>.
4. Clean up your indentation — everything nested inside <header>, <main>, and <footer> should be indented one level in from its parent tag. This is one of the easiest ways to tell professional code from messy code, and it makes your own file way easier to read and fix later.
5. Add a horizontal rule (<hr>) between major sections on your About Me page — one before "A Few Things I'm Into" and one before "Quick Facts."
6. Add this to the <head> of all three pages (swap in your own one-line description):

   <meta name="description" content="One sentence describing this page.">

7. If you have a favicon image, add it too:

   <link rel="icon" href="images/favicon.ico">

What a professional page should look like

Here's the Home page, fully wrapped and indented:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Name — Studio Profile</title>
  <meta name="description" content="One sentence describing this page.">
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About Me</a>
      <a href="work.html">My Work</a>
    </nav>
  </header>

  <main>
    <img src="images/avatar.png" alt="Describe your avatar here">
    <p>Your tagline goes here — one line, studio-employee style.</p>
    <p>Write one sentence introducing yourself and your studio role here.</p>
  </main>

  <footer>
    <p>&copy; 2026 Your Name</p>
  </footer>
</body>
</html>

Checkpoint (self-assessed): pages still work exactly the same in the browser, but the code is organized into <header>/<main>/<footer> sections, indentation is consistent, and <hr> divides your About Me sections.

Friday Submission

Zip your renamed folder (your slug, e.g. emma-r.zip) and attach it to the Lesson 2.1 assignment in Teams. Whatever task you've reached by Friday is what you hand in — you can re-attach an updated zip any time before then.