What you'll make

A simple personal webpage with:

• a big heading and a short About Me paragraph
• 2-3 favourite links you actually use
• One image with a short credit
• One "punny" button (change the button text and the message it shows)
• One or two small CSS tweaks (colour/size/spacing)

Files you need

• student_template
How to save a copy of the template file.

1. Right-click on the link



2. Select your H: → ICT8 → 4. Web Development
3. Rename the copy to firstname_lastinitial





• Save as firstname_lastinitial in H: → ICT8 → 4. Web Development

Setting up VS Code (first time only)

1. Open VS Code



2. Open the folder that has your file
• VS Code → File → Open Folder



• Browse to H: → ICT8 → 4. Web Development and Select Folder



• If asked, choose Trust this folder
3. Turn on Auto Save
• VS Code → File → Auto Save (check it)



4. Open your file
• In the left sidebar, click the Explorer icon (top icon that looks like 2 files)
• Click your file firstname_lastinitial.html to open it

Preview your page

1. Install the Live Preview extension
• In VS Code, click the Extensions icon in the left sidebar (looks like 4 squares)
• Search for Live Preview
• Click Install



2. Start the Live Preview
• Click on the Live Preview button in the top right corner of the window



• Your default web browser should open and show your page



3. Keep it open while you work
• Whenever you make changes to your code, just save (Ctrl+S) and refresh the browser (F5)
• Press ALT + Tab to switch between VS Code and your browser

Timeline (3 classes)

Class 1 - Set up + core content

1. Download the template and save it as firstname_lastinitial.html in your H: Drive
2. Open in VS Code. Update the title, heading, About Me (3-4 sentences), and 2-3 links
3. Add one image (use a web image URL) + short credit.
4. Make the button a pun (change the button text + the message it shows).
5. Complete the course reflection (see below)
6. Preview in browser using Live Server

Class 2 - Polish + Style

1. Change at least one colour and the font type, tweak font size/spacing, and tidy the layout.
2. Optional: add another section or a short list
3. Change the background colour

Class 3 - Final tidy + and hand-in

1. Check spelling, links, image and the pun button
2. Hand in (instructions below)
3. Your website will be published to your class showcase.

ICT 8 - Final Reflection

Write 6-10 sentences total. For each unit, include:

• What you enjoyed most
• What you found challenging
• What you would like to learn more about
• How you might use what you learned in the future

Units to cover:

• Essential Skills & Digital Literacy
• Digital Media (Word, Excel, Canva)
• Game Development (GDevelop)
• Web Development (VS Code/HTML/CSS/JS)

Sentence starters you can use:

• "In _____, I learned ______ because ______."
• "A challenge in ___ was ___ ; next time I would ___ ."
• "I handled ___ by ____ ."

Success check:

• 6-10 sentences
• Each unit has a learned + challenge statement
• Clear, proofread, school-appropriate
• no personal info (first name + last initial only)