🎯 Class 4 — Practice Session

Topic 1 · HTML & CSS — 3 hours · Design thinking, digital résumé, and a themed practice site

Part 1 · Design Thinking

Before we wrote any code today, we had an important conversation: the way you see something visually is not always the way other people see it.

As a web developer, your job isn't to build the site you want — it's to listen to the client and build the site they need. Different people respond to colours, layouts, and tone in very different ways depending on their age, gender, culture, and context.

Colours influence us

We looked at adverts and websites and discussed:

💡 Key takeaway: Listen to your client. Be aware that what looks "obviously right" to you may not work for them or their audience. Design is a conversation, not a decree.

Build a Digital Résumé (with me)

We built a digital résumé together — HTML version first, then layered the styling in afterwards. This is the rule: structure first, style second.

A simple résumé skeleton:

<header>
  <h1>Your Name</h1>
  <p>Front End Web Developer · Perth, WA</p>
</header>

<section>
  <h2>About Me</h2>
  <p>A short, punchy paragraph about who you are.</p>
</section>

<section>
  <h2>Experience</h2>
  <ul>
    <li>Role · Company · Dates</li>
  </ul>
</section>

<section>
  <h2>Skills</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</section>

Part 2 · Themed Webpage Activity

This activity is your chance to practice everything you've learned and get more confident typing your own code. You'll build your own webpage and choose one of the following themes:

Use Coolors.co to pick a colour palette that fits your theme.

HTML Skeleton to Start From

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website Title</title>
</head>
<body>

  <header>
    <h1>Welcome to Your Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>About Us</h2>
      <p>This is where you can provide information about your company or yourself.</p>
    </section>

    <section>
      <h2>Contact Us</h2>
      <p>Feel free to reach out to us using the contact information provided.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Your Website. All rights reserved.</p>
  </footer>

</body>
</html>
🎨 Make it yours: Add real content. Pick photos that match your theme. Pick fonts and colours that match your audience. Spend the rest of the lesson getting it looking the way your audience would expect — not just the way you like it.

Quick Recap Checklist

🔗 References

Coolors.co — Colour Palette Generator

CSS Selectors (W3Schools)

Google Fonts

FrontEndClass4 sample code (ZIP)

Class 4 — Equinim College · Front End Web Development · 26B