HTML, CSS, and JavaScript Tasks

Files

How to build the browser tasks

Each task below is split by file so you can paste code into the right place without guessing.

For the small CSS tasks you only need index.html and style.css. For the interactive tasks you also add script.js.

Step order

Create files first, then paste HTML, then CSS, then JavaScript.

Keep it local

Use one folder per task so the file links stay simple.

Edit safely

Run the example once before you change colors, text, or images.

HTML/CSS/JS

CSS exercise 1: gray and blue paragraphs with classes

This task is good as a first example of how one HTML file connects to one CSS file.

Track: HTML/CSS/JSFiles are listed below

Build steps

Create index.html and style.css in the same folder.
Link the CSS file in the HTML head.
Give two paragraphs the class gray and one paragraph the class blue.
Save both files and open the HTML file in the browser.

Quick test

The first and third paragraphs should be gray.
The second paragraph should be blue.

FILE: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paragraph classes</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Paragraph colors</h1>

  <p class="gray">This paragraph is gray.</p>
  <p class="blue">This paragraph is blue.</p>
  <p class="gray">This paragraph is gray again.</p>
</body>
</html>

FILE: style.css

style.css

body {
  font-family: Arial, sans-serif;
  margin: 24px;
}

.gray {
  color: #666666;
}

.blue {
  color: #1f5fae;
}

HTML/CSS/JS

CSS exercise 2: color the second paragraph with nth-of-type

This is the same visual result as the first task, but the selector does the work.

Track: HTML/CSS/JSFiles are listed below

Build steps

Create the HTML with three normal paragraphs.
In the CSS, use p:nth-of-type(2) for the second paragraph.
Give the first and third paragraphs a base color with the normal p selector.

Quick test

Only the second paragraph should be blue.
The other paragraphs should keep the base gray color.

FILE: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>nth-of-type example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>nth-of-type</h1>

  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</body>
</html>

FILE: style.css

style.css

body {
  font-family: Arial, sans-serif;
  margin: 24px;
}

p {
  color: #666666;
}

p:nth-of-type(2) {
  color: #1f5fae;
}

HTML/CSS/JS

CSS exercise 3: bold first letter

Keep the same paragraph structure and add one more rule for the first letter.

Track: HTML/CSS/JSFiles are listed below

Build steps

Start from the previous task or make the same HTML again.
Add a CSS rule for p::first-letter.
Use a larger font size or bold text so the change is easy to see.

Quick test

The first letter of every paragraph should look different.
The second paragraph can still keep its blue color from the previous exercise.

FILE: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>First letter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>First letter styling</h1>

  <p>First paragraph for the example.</p>
  <p>Second paragraph for the example.</p>
  <p>Third paragraph for the example.</p>
</body>
</html>

FILE: style.css

style.css

body {
  font-family: Arial, sans-serif;
  margin: 24px;
}

p {
  color: #666666;
}

p:nth-of-type(2) {
  color: #1f5fae;
}

p::first-letter {
  font-size: 1.4rem;
  font-weight: bold;
}

HTML/CSS/JS

CSS exercise 4: span and links

This small task shows how inline elements behave differently from full paragraphs.

Track: HTML/CSS/JSFiles are listed below

Build steps

Create one paragraph with a highlighted span inside it.
Create two links under the paragraph.
Style the span with a background color.
Style the links and add a simple hover rule.

Quick test

The span should be highlighted inside the paragraph line.
The link color should change when the mouse moves over it.

FILE: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Span and links</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Span and links</h1>

  <p>This sentence has a <span>highlighted part</span> inside it.</p>

  <p>
    <a href="#">Open article</a>
    <a href="#">Go back</a>
  </p>
</body>
</html>

FILE: style.css

style.css

body {
  font-family: Arial, sans-serif;
  margin: 24px;
}

span {
  background: #fff2b0;
  padding: 2px 6px;
}

a {
  color: #1f5fae;
  margin-right: 12px;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

HTML/CSS/JS

Landing page with background image, dialog, menu and subscribe form

This page is still plain on purpose. It uses one image file and simple layout blocks.

Track: HTML/CSS/JSFiles are listed below

Build steps

Create index.html and style.css.
Put one background image called hero.jpg next to the files.
Build the page in this order: top menu, hero text box, subscribe form.
Open the page and replace the text with your own topic.

Quick test

The menu should stay at the top.
The hero text box should stay readable on top of the background image.
The form should have one text input and one button.

FILE: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple landing page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="topbar">
    <h1>School Club</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Events</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main class="hero-box">
    <div class="dialog">
      <h2>Community robotics club</h2>
      <p>Build simple robots, learn sensors, and show your work at local events.</p>

      <form class="subscribe-form">
        <label for="email">Email</label>
        <input id="email" type="email" placeholder="name@example.com">
        <button type="submit">Subscribe</button>
      </form>
    </div>
  </main>
</body>
</html>

FILE: style.css

style.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
  min-height: 100vh;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.9);
}

.topbar a {
  margin-left: 12px;
  color: #1f5fae;
  text-decoration: none;
}

.hero-box {
  padding: 56px 24px;
}

.dialog {
  max-width: 420px;
  background: rgba(255, 255, 255, 0.92);
  padding: 24px;
  border-radius: 10px;
}

.subscribe-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

input,
button {
  padding: 10px;
  font: inherit;
}

HTML/CSS/JS

Image slider with optional fullscreen

This is a good first JS page because the HTML stays simple and the script has one clear job.

Track: HTML/CSS/JSFiles are listed below

Build steps

Create index.html, style.css, and script.js.
Create an images folder with three pictures: 1.jpg, 2.jpg, and 3.jpg.
Paste the HTML, CSS, and JS into the right files.
Open the HTML file and test the buttons.

Quick test

Next should move to the next image and wrap back to the first one.
Previous should move backwards.
Fullscreen should open the image container in fullscreen on supported browsers.

FILE: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple slider</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="slider">
    <h1>Image slider</h1>

    <div id="slider-box" class="slider-box">
      <img id="slide-image" src="images/1.jpg" alt="Slide image">
    </div>

    <div class="controls">
      <button id="prev-button" type="button">Previous</button>
      <button id="next-button" type="button">Next</button>
      <button id="fullscreen-button" type="button">Fullscreen</button>
    </div>
  </main>

  <script src="script.js"></script>
</body>
</html>

FILE: style.css

style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 24px;
  background: #f3f4f6;
}

.slider {
  max-width: 720px;
  margin: 0 auto;
  background: white;
  padding: 24px;
  border: 1px solid #d1d5db;
}

.slider-box {
  margin: 20px 0;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
}

.slider-box img {
  max-width: 100%;
  max-height: 100%;
}

.controls {
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 14px;
  font: inherit;
}

FILE: script.js

script.js

const images = ["images/1.jpg", "images/2.jpg", "images/3.jpg"];
const image = document.getElementById("slide-image");
const sliderBox = document.getElementById("slider-box");

let index = 0;

function showImage() {
  image.src = images[index];
}

document.getElementById("next-button").addEventListener("click", () => {
  index = (index + 1) % images.length;
  showImage();
});

document.getElementById("prev-button").addEventListener("click", () => {
  index = (index - 1 + images.length) % images.length;
  showImage();
});

document.getElementById("fullscreen-button").addEventListener("click", () => {
  if (sliderBox.requestFullscreen) {
    sliderBox.requestFullscreen();
  }
});

HTML/CSS/JS

Analog clock

The old version of this task had broken leftover markup. This version is clean and file-based.

Track: HTML/CSS/JSFiles are listed below

Build steps

Create the three files.
Make the clock face in HTML and CSS first.
Add the JavaScript last to rotate the hands.
Open the page and check that the hands move every second.

Quick test

The second hand should move every second.
The minute and hour hands should also rotate to the correct position.

FILE: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analog clock</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="clock-page">
    <h1>Analog clock</h1>

    <div class="clock">
      <div id="hour-hand" class="hand hour-hand"></div>
      <div id="minute-hand" class="hand minute-hand"></div>
      <div id="second-hand" class="hand second-hand"></div>
      <div class="center-dot"></div>
    </div>
  </main>

  <script src="script.js"></script>
</body>
</html>

FILE: style.css

style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f3f4f6;
}

.clock-page {
  text-align: center;
}

.clock {
  position: relative;
  width: 300px;
  height: 300px;
  border: 8px solid #1f2937;
  border-radius: 50%;
  background: white;
  margin: 24px auto 0;
}

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(90deg);
  background: #111827;
}

.hour-hand {
  width: 8px;
  height: 80px;
}

.minute-hand {
  width: 6px;
  height: 110px;
}

.second-hand {
  width: 3px;
  height: 130px;
  background: #b91c1c;
}

.center-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #111827;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

FILE: script.js

script.js

const secondHand = document.getElementById("second-hand");
const minuteHand = document.getElementById("minute-hand");
const hourHand = document.getElementById("hour-hand");

function setClock() {
  const now = new Date();

  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();

  const secondDegrees = seconds * 6;
  const minuteDegrees = minutes * 6 + seconds * 0.1;
  const hourDegrees = (hours % 12) * 30 + minutes * 0.5;

  secondHand.style.transform = `translateX(-50%) rotate(${secondDegrees}deg)`;
  minuteHand.style.transform = `translateX(-50%) rotate(${minuteDegrees}deg)`;
  hourHand.style.transform = `translateX(-50%) rotate(${hourDegrees}deg)`;
}

setClock();
setInterval(setClock, 1000);

HTML/CSS/JS

Two-number browser calculator

This small page is perfect for a first JavaScript button-click task.

Track: HTML/CSS/JSFiles are listed below

Build steps

Create the three files.
Build the HTML first with two inputs, one button, and one result span.
Style it lightly in CSS.
Use JavaScript to read both values and print the sum.

Quick test

2 and 3 should give 5.
An empty field should show an invalid number message.

FILE: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple browser calculator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="calculator">
    <h1>Add two numbers</h1>

    <label for="number-a">First number</label>
    <input id="number-a" type="number">

    <label for="number-b">Second number</label>
    <input id="number-b" type="number">

    <button id="add-button" type="button">Add</button>

    <p>Result: <span id="result">0</span></p>
  </main>

  <script src="script.js"></script>
</body>
</html>

FILE: style.css

style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f3f4f6;
}

.calculator {
  max-width: 360px;
  margin: 40px auto;
  background: white;
  border: 1px solid #d1d5db;
  padding: 24px;
  display: grid;
  gap: 10px;
}

input,
button {
  padding: 10px;
  font: inherit;
}

FILE: script.js

script.js

const numberA = document.getElementById("number-a");
const numberB = document.getElementById("number-b");
const result = document.getElementById("result");

document.getElementById("add-button").addEventListener("click", () => {
  const a = parseFloat(numberA.value);
  const b = parseFloat(numberB.value);

  if (Number.isNaN(a) || Number.isNaN(b)) {
    result.textContent = "Please enter valid numbers.";
    return;
  }

  result.textContent = String(a + b);
});

Browser pages and UI exercises

Main idea

How to build the browser tasks

Step order

Keep it local

Edit safely

CSS exercise 1: gray and blue paragraphs with classes

Build steps

Quick test

CSS exercise 2: color the second paragraph with nth-of-type

Build steps

Quick test

CSS exercise 3: bold first letter

Build steps

Quick test

CSS exercise 4: span and links

Build steps

Quick test

Image slider with optional fullscreen

Build steps

Quick test

Analog clock

Build steps

Quick test

Two-number browser calculator

Build steps

Quick test