🎨 Class 3 — Continue Inline Styling

Topic 1 · HTML & CSS — 3 hours · Recap, nav bars, buttons, tables, accessibility & colour

Part 1 · Recap & Inspect Tool

We started by recapping last week — building a page from scratch and using inline styling. Don't assume you remember it perfectly; rebuilding is the best way to lock it in.

Then we explored some live websites with the browser's Inspect tool (right-click → Inspect). This lets you see the HTML and CSS behind any website — a free education on how the web is built.

Building a Nav Bar with <ul>

A navigation bar is just an unordered list of links. We write the HTML first, get it working, then add styling — that way you understand what styling actually does to your raw structure.

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

With inline styling we turn the bullet-point list into a clean horizontal bar:

<ul style="list-style: none; display: flex; gap: 20px; background: #2f9ea0; padding: 12px;">
  <li><a href="index.html" style="color: white; text-decoration: none;">Home</a></li>
  <li><a href="about.html" style="color: white; text-decoration: none;">About</a></li>
  <li><a href="contact.html" style="color: white; text-decoration: none;">Contact</a></li>
</ul>

Part 2 · Buttons

Buttons are <button> elements. Like the nav bar, we'll write the HTML first then style it. Buttons can be wrapped inside an anchor tag (<a>) to turn them into clickable links.

<a href="contact.html">
  <button style="background: #ff8a3d; color: white; padding: 10px 24px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">
    Get in Touch
  </button>
</a>

Your turn: create two buttons. Link each one to a different page or section of your site.

Tables

Tables are great for tabular data — schedules, price lists, comparison charts. The building blocks:

• <table> — the table itself
• <tr> — table row
• <th> — table header cell
• <td> — table data cell

<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <th style="border: 1px solid #1a1a1a; padding: 8px;">Class</th>
    <th style="border: 1px solid #1a1a1a; padding: 8px;">Topic</th>
  </tr>
  <tr>
    <td style="border: 1px solid #1a1a1a; padding: 8px;">1</td>
    <td style="border: 1px solid #1a1a1a; padding: 8px;">Intro to HTML</td>
  </tr>
</table>

Personalise your page with your own table. Make it reflect content that matters to you.

Quick Recap Checklist

• ✅ Use Inspect to learn from real websites
• ✅ Build a nav bar from <ul>/<li>/<a>
• ✅ Make and style two buttons; wrap one in an <a> tag
• ✅ Build a 2+ row table using <table>/<tr>/<th>/<td>
• ✅ Always write HTML first, then add styling

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