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, and properly organized the way real websites are built. 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. Answer ALL the questions in the "20 Questions About Me" section.

20 Questions About Me

Answer each question by either summarizing the question or including the question in your answer.

1. What should people call you? (nickname's fine)
2. What is your birth month and astrological sign?
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>20 Questions About Me</h2>
  <p>
    Name: Your Name<br>
    Birth Month: Your Birth Month and Astrological Sign<br>
    Favourite Subject: Your Favourite Subject<br>
  </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>

Right now every part of your page — the nav, the heading, the body content — sits loose in <body> with no organization. Semantic tags label what each part of the page actually is, which makes your code easier to read and is exactly how real websites are built. Every student's pages need to use the same structure — this is the part we'll be checking site-wide.

1. On all three pages, replace <h1> + <nav> at the top with a <header> wrapping both:

   <header>
     <h1>This page's heading</h1>
     <nav>
       <a href="index.html">Home</a>
       <a href="about.html">About Me</a>
       <a href="work.html">My Work</a>
     </nav>
   </header>

   Keep each page's own <h1> — just move it inside the <header>: your name on Home, About Me on about.html, and My Work on work.html. Don't copy your name onto every page.

2. Wrap the rest of each page's content — everything after </header> — in <main>...</main>.
3. Do this on all three pages, not just Home.

Optional — unlocks after Task 4 is done.

A couple of small extras that real websites have and yours doesn't yet.

1. Add a <footer> at the bottom of all three pages with a short line like <p>&copy; 2026 Your Name</p>.
2. 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.
3. Add a horizontal rule (<hr>) between major sections on your About Me page — one before "A Few Things I'm Into" and one before "20 Questions About Me."
4. 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.">

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

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

Checkpoint (self-assessed): each page has its own description in the <head>, and a favicon shows in the browser tab if you added one.

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.

Handing In Your Work

Instead of zipping and attaching your files, you'll upload your project folder to OneDrive and share it directly with your teacher. You only need to share it once — any time you update your files later, your teacher will see the latest version automatically through that same share.

Step 1: Check for your ICT 9 folder in OneDrive

Open OneDrive (in your browser, or through File Explorer) and look for a folder called ICT 9.

• If you already have one from a past lesson, use it.
• If you don't have one yet, create it now: click New → Folder, and name it exactly ICT 9.

Step 2: Copy your project folder into OneDrive

1. Open File Explorer and go to your project folder on your H: drive — H:\ICT 9\2_web_development\your-slug.
2. Copy it — right-click → Copy, or Ctrl+C. Keep working from your H: drive; OneDrive is just where your teacher checks your progress.
3. Go to your ICT 9 folder in OneDrive and paste it there (Ctrl+V).

Step 3: Share the folder with your teacher

1. Right-click your folder inside OneDrive and choose Share.
2. Enter your teacher's email address and set the permission to Can view.
3. Click Send.

Done? Once your folder is shared, you're finished for today — move on to Lesson 2.2.