Build a School Digital Day website

Your goal

11.5.3.2 Create an interface using HTML and CSS.
11.5.3.3 Implement site navigation.

Use skills from earlier lessons: page elements, headings, paragraphs, links and form controls.

Your product: index.html, register.html and one shared styles.css. The Home page presents the event; the Register page contains a form.

You need a code editor and a browser. Unzip the folder first. No internet or server is needed. Work in the student folder. (download and unzip файл). Copy the supplied code, then complete the changes yourself.

1. Plan your website · 4 minutes

1. Open index.html, register.html and styles.css in your editor. Open index.html in the browser.
2. On paper, sketch two small page plans. Both need a header, a menu, main content and a footer.
3. On the Home plan, add a workshop card and a Contact section. On the Register plan, add a form.
4. Draw arrows for Home → Register and Register → Home. Add a Contact jump from each page.

2. Build the Home page · 6 minutes

1. In both HTML files, replace the STEP 2 comment in head with this line:

<link rel="stylesheet" href="styles.css">

In index.html only, replace the comment inside main with this code:

<section>
  <h2>Explore digital skills</h2>
  <p>Join our school event and try a new skill.</p>
  <article>
    <h3>Web design workshop</h3>
    <p>Create a page with HTML and CSS.</p>
    <a class="button" href="register.html">Register now</a>
  </article>
</section>
<aside>
  <h2>Before you join</h2>
  <p>Bring a notebook. Beginners are welcome.</p>
</aside>
<section id="contact">
  <h2>Contact</h2>
  <p>Ask your Computer Science teacher.</p>
</section>

2. Change the workshop title and paragraph to your own idea. Keep the Register now link.
3. Find header, nav (to be added next), main, section, article, aside and footer. Keep the nesting shown in the example.
4. Save and refresh. At this point the page still has the browser’s default appearance.

3. Add navigation · 7 minutes

Replace the STEP 3 comment in both files with this menu:

<nav aria-label="Main navigation">
  <a href="index.html" aria-current="page">Home</a>
  <a href="register.html">Register</a>
  <a href="index.html#contact">Contact</a>
</nav>

1. In register.html, move aria-current="page" from the Home link to the Register link.
2. Save both files. Test Home → Register → Home.
3. Test Contact on both pages. It must reach the Contact section on index.html.
4. On the Home page, test Register now.

Hint: index.html#contact means “open index.html and find id=contact”. CSS will underline the current page link in Step 5.

4. Create the registration form · 9 minutes

In register.html only, replace the comment inside main with:

<section>
  <h2>Your registration</h2>
  <p>Demo only: no data is sent or saved. Use fictional details.</p>
  <form onsubmit="event.preventDefault()">
    <label for="student-name">Name (required)</label>
    <input type="text" id="student-name" name="student_name" required>

    <label for="email">Email (required)</label>
    <input type="email" id="email" name="email" required>

    <!-- Add the workshop select here -->

    <label for="message">Your question (optional)</label>
    <textarea id="message" name="message" rows="3"></textarea>

    <button type="submit">Check my details</button>
  </form>
</section>

1. Replace the workshop comment with the select code below.
2. Add one more workshop option yourself. Give it a different value and a clear label.
3. Check that each label’s for matches its control’s id.
4. Save. Press Check my details with blank fields, then with an invalid email such as abc. Observe the browser’s message.
5. Test fictional valid details: Alex, alex@example.com, and one workshop.

<label for="workshop">Workshop (required)</label>
<select id="workshop" name="workshop" required>
  <option value="">Choose a workshop</option>
  <option value="web">Web design</option>
  <option value="python">Python</option>
</select>

The supplied onsubmit line prevents submission after browser validation. You do not need to write JavaScript in this task. With valid details, the page stays open and no success message appears. This is an interface exercise: the form does not register a person or save data.

5. Style the interface · 9 minutes

Paste this code into styles.css, save and refresh both pages.

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #243b35;
  background: #f2f6f5;
  line-height: 1.5;
}
header, footer {
  padding: 20px;
  background: #286d60;
  color: white;
  text-align: center;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: #dcebe5;
}
nav a, .button, button {
  display: inline-block;
  padding: 10px 16px;
  background: #286d60;
  color: white;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  font: inherit;
}
nav a:hover, .button:hover, button:hover { background: #194b42; }
nav a[aria-current="page"] { text-decoration: underline; }
main { max-width: 850px; margin: auto; padding: 16px; }
section, aside {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid #b9d1c6;
  border-radius: 10px;
  background: white;
}
article { padding: 16px; border-left: 4px solid #286d60; }
aside { background: #fff4d8; }
label { display: block; margin-top: 12px; }
input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #617d70;
  border-radius: 5px;
  font: inherit;
}
button { margin-top: 16px; cursor: pointer; }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #a64b00;
  outline-offset: 3px;
}

Make three changes yourself:

1. Change the header and footer background to a different dark colour. Keep the white text easy to read.
2. Change the padding of section and aside from 20px to 24px. Observe the space inside the border.
3. Change their margin-bottom from 16px to 24px. Observe the space between blocks.

Check that both pages share the same menu style. Make the browser window narrower: menu links should wrap, and form controls should stay inside their block.

6. Test and explain · 5 minutes

Work with a partner. Use fictional data. Do not fix a problem silently: note what failed and what you changed.

Submit: the student folder with all three files, plus three short answers: (1) one HTML element and its purpose; (2) one CSS change and its effect; (3) one navigation or form problem you fixed. If no problem occurred, describe a test and its result.