Web Page Interface

1. What is an interface?

A web interface is what users see and use on a page: text, images, menus, links and buttons. A clear interface helps users answer: “Where do I go next?”

2. Build a simple interface

Create index.html and styles.css in the same folder. Copy the code below. Open index.html in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Coding Club</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <header><h1>Coding Club</h1></header>
 <nav aria-label="Main navigation">
 <a href="index.html" aria-current="page">Home</a>
 <a href="projects.html">Projects</a>
 <a href="#contact">Contact</a>
 </nav>
 <main>
 <section>
 <h2>Welcome!</h2>
 <p>Learn to build websites with us.</p>
 <a class="button" href="projects.html">See projects</a>
 </section>
 <section id="contact">
 <h2>Contact</h2>
 <p>Visit our club in the computer room.</p>
 </section>
 </main>
 <footer><p>School Coding Club</p></footer>
</body>
</html>

* { box-sizing: border-box; }
body {
 margin: 0;
 font-family: Arial, sans-serif;
 color: #243b35;
 background: #f2f6f5;
}
header, footer {
 padding: 20px;
 background: #286d60;
 color: white;
 text-align: center;
}
nav {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 padding: 12px;
 background: #e0eee8;
}
nav a, .button {
 display: inline-block;
 padding: 10px 16px;
 border-radius: 6px;
 background: #286d60;
 color: white;
 text-decoration: none;
}
nav a:hover, .button:hover { background: #194b42; }
nav a[aria-current="page"] { text-decoration: underline; }
a:focus-visible { outline: 3px solid #a64b00; outline-offset: 3px; }
main { max-width: 800px; margin: auto; padding: 16px; }
section {
 margin-bottom: 16px;
 padding: 20px;
 border: 1px solid #b6cec4;
 border-radius: 10px;
 background: white;
}

Notice three useful rules:

• padding adds space inside a block; margin adds space outside its border.
• display: flex puts the menu links in a row. flex-wrap: wrap lets them move to a new row when needed.
• :hover styles a link under the pointer. :focus-visible makes keyboard focus easy to see.

Your turn: change the header colour and section padding. Save, refresh and explain what changed.

3. Make navigation work

Navigation helps users move between pages or jump to a section.

<a href="projects.html">Projects</a>

<a href="#contact">Contact</a>

<section id="contact">
 <h2>Contact</h2>
</section>

1. Copy index.html and name the copy projects.html.
2. In the copy, change the title and h1 to Our Projects. Change the first section to describe a project. Remove its “See projects” link; keep the Contact section.
3. Keep the same stylesheet and menu. Move aria-current="page" from Home to Projects:

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

The current page link is underlined by our CSS. aria-current="page" also tells assistive technology which page is open.

<a href="#contacts">Contact</a>
<section id="contact">...</section>

Link or button? Use <a href="..."> to go somewhere. Use <button> for an action, such as submitting a form. Styling a link like a button does not change its purpose.

Three ways to style a menu

The same links can look different. These examples show only the menu. Try the links: they jump to sections of this lesson.

<nav class="wpi-menu-bar" aria-label="Horizontal bar">
 <a href="#wpi-interface">Interface</a>
 <a href="#wpi-build">Build</a>
 <a href="#wpi-practice">Practise</a>
</nav>

.wpi-menu-bar {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 padding: 8px;
 background: #286d60;
 border-radius: 8px;
}
.wpi-menu-bar a {
 display: block;
 padding: 10px 16px;
 color: white;
 text-decoration: none;
 border-radius: 4px;
}
.wpi-menu-bar a:hover { background: #194b42; color: white; }
.wpi-menu-bar a:focus-visible {
 outline: 3px solid #a64b00;
 outline-offset: 3px;
}

<nav class="wpi-menu-pills" aria-label="Separate buttons">
 <a href="#wpi-interface">Interface</a>
 <a href="#wpi-build">Build</a>
 <a href="#wpi-practice">Practise</a>
</nav>

.wpi-menu-pills {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.wpi-menu-pills a {
 display: block;
 padding: 10px 18px;
 border: 2px solid #286d60;
 border-radius: 24px;
 background: white;
 color: #215e51;
 text-decoration: none;
}
.wpi-menu-pills a:hover { background: #286d60; color: white; }
.wpi-menu-pills a:focus-visible {
 outline: 3px solid #a64b00;
 outline-offset: 3px;
}

<nav class="wpi-menu-vertical" aria-label="Vertical list">
 <a href="#wpi-interface">Interface</a>
 <a href="#wpi-build">Build</a>
 <a href="#wpi-practice">Practise</a>
</nav>

.wpi-menu-vertical {
 display: flex;
 flex-direction: column;
 gap: 5px;
 width: 260px;
 max-width: 100%;
 padding: 10px;
 background: #edf4f0;
 border: 1px solid #c5dacf;
 border-radius: 8px;
}
.wpi-menu-vertical a {
 display: block;
 padding: 10px 14px;
 border-left: 4px solid #286d60;
 background: white;
 color: #215e51;
 text-decoration: none;
}
.wpi-menu-vertical a:hover { background: #d5e9df; color: #194b42; }
.wpi-menu-vertical a:focus-visible {
 outline: 3px solid #a64b00;
 outline-offset: 3px;
}

Try: move through a menu with Tab and open a link with Enter. Which CSS property makes the third menu vertical?

4. Your task · 15–20 minutes

Use the example to make a two-page website for a school club of your choice.

1. Content: give each page a useful title, a heading and a short paragraph.
2. Style: choose a dark header colour and a light page background. Adjust the space inside content blocks.
3. Navigation: connect Home and Projects. Add a working Contact jump link and mark the current page.
4. Test: open both pages, click every link and make the browser window narrower. Press Tab to move between links and Enter to open one.

Exercises:

Ex. 1 CSS Practical Exercise for a School Digital Day (Eng) (Rus) (Download files)