Software EngineeringAlliance Girls High School
TERM 3 / WEEK 02

JULY 13 · MODULE 2

Welcome to the Web · HTML + CSS

WEEK 2 · JULY 13 · WELCOME TO THE WEB

Your idea.
Now on a page.

Build a landing page for the community project you sketched.

HTML gives it structure. CSS gives it style.

TOFA × Alliance Girls AlumniGrade 10 · Term 3
01

SKETCH → CONTENT · 5 MIN

One page.
One clear purpose.

  • Who?Name your audience.
  • Why?Write a helpful headline.
  • What next?Choose one action for a visitor.

Our example: a school opportunities club. Replace its words with yours.

02

SET UP · 5 MIN

Editor on one side.
Browser on the other.

  • CreateMake a project folder with index.html and style.css.
  • OpenUse a plain-text editor, such as VS Code. Open index.html in a browser.
  • RepeatEdit → save → refresh. Keep both files together.

Browser-only? Use CodePen: body content in HTML, styles in CSS. Copy your work to local files before leaving.

03

BUILD ALONG · INDEX.HTML · 5 MIN

Start with
the structure.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Opportunities Club</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>Hello, community!</body>
</html>

Save and refresh. See “Hello, community!”? You have a webpage.

04

BUILD ALONG · 7 MIN

Make the message
yours.

<main>
  <h1>Find your next opportunity</h1>
  <p>Free clubs and challenges for our school.</p>
</main>

Replace “Hello, community!” inside body with this. Change the heading and paragraph for your project.

05

BUILD ALONG · INSIDE MAIN · 5 MIN

Give visitors
a next step.

<a href="#join">How to join</a>
<section id="join">
  <h2>Join the club</h2>
  <p>Ask the club patron at the next school meeting.</p>
</section>

Click the link. Does the URL end in #join? A link navigates; a button performs an action.

06

BUILD ALONG · STYLE.CSS · 7 MIN

Same content.
A new feeling.

body {
  font-family: sans-serif;
  background: #f8f4ea;
  color: #11172d;
  line-height: 1.6;
}
h1 { color: #315ee7; }

body is the selector; color is a property. Change one value, save and refresh.

07

BUILD ALONG · STYLE.CSS · 5 MIN

A little space.
A big difference.

main {
  max-width: 50rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 2px solid #315ee7;
  border-radius: 1rem;
}

Padding = space inside the border. Margin = space outside. Try doubling each, one at a time.

08

DESIGN CHECK · 7 MIN

Beautiful means
usable, too.

  • ReadUse clear headings and short paragraphs.
  • SeeCheck text colours with the contrast checker. Aim for 4.5:1.
  • NavigatePress Tab, then Enter. Keep the focus outline visible.

If you add an image, describe its purpose with alt text. Use only images you have permission to share.

09

PEER REVIEW · 8 MIN

Swap screens.
Say less. Watch more.

  • Ask“What is this page for?”
  • ObserveCan your partner find and use the link?
  • FeedbackGive one strength and one specific improvement.

Review the page, not the person. Swap roles halfway.

10

IMPROVE · 8 MIN

One change.
Test it again.

  • ChooseAct on one piece of feedback.
  • DebugNo styles? Check style.css spelling and the link in head.
  • SaveKeep your folder and a screenshot for next week.

Explain what improved for the visitor—not just what changed in the code.

11

THIS WEEK · YOUR DELIVERABLE

A landing page.
Made by you.

  • BuildHTML with a heading, useful information and a working link.
  • StyleCSS with readable colours, spacing and type.
  • ReviewKeep peer feedback and a before/after screenshot.

Next: make it work on phones and start the team website →

12
01/12

← → to navigate · F fullscreen

Slide 1 of 12