Coding Activities by Abdur Rehman

(Discontinued)McDonald's Delivery

In this activity, you will animate a McDonald's order tracker using CSS @keyframes. You will make a countdown ring spin, a delivery bike ride across the screen, the active order step pulse with colour, and the typing dots bounce up and down.

(Discontinued)Netflix Vibes

In this activity, you will build a Netflix-inspired homepage by writing five CSS gradients. You will fade the page background, colour the logo with a gradient, layer three gradients on the hero banner, add a radial glow to the Play button, and overlay a dark fade on movie cards.

My Space Page

In this activity, You will build a space-themed webpage called My Space Page. The page has a dark gradient sky that fades from dark blue to navy. A colourful banner at the top fades from purple to coral. Below it sits a fun fact card, and a small glowing circle twinkles between yellow and white using a CSS animation.

My Colour Card

You will create a personal webpage called My Colour Card. The page has a heading, a short tagline, an About Me card with four detail lines, and a Favourite Things section. Students style the page using all five CSS methods covered in the lesson.

Here’s a Drop Down

Write a program to create a webpage to enter marks of 3 different subjects for different students and display the average for these three subjects. To select a value of the subject, create a drop-down list using the select element of HTML.

Group The Form Fields

Write a program to create a webpage to collect personal details like - email, name, gender, and date of birth by using the form element of HTML. Make sure you group these fields by using the fieldset element and give a caption to it as well.

My Doctor's Appointment Form

A doctor's appointment form with grouped sections, a drop-down to choose a doctor, date of birth, visit reason, notes, preferred visit day, and a Book My Appointment button.

Kids Health Guide

In this activity, you will transform a plain HTML page into a fully structured semantic webpage. You will replace generic div containers with meaningful semantic tags, add navigation links, embed a real image with a caption, and complete the footer to build a real Kids Health Guide.

Super Game Zone

In this activity, you will use the iframe tag to embed a live Scratch game directly inside your own HTML page. You will learn how each iframe attribute works — src, width, height, frameborder, scrolling, and allowfullscreen — and how they combine to create a clean, professional-looking embed.

Aquatic Beats Party

In this activity, you will combine the audio and video tags on a single webpage, building an ocean-themed multimedia experience. You will link source files, set format types, enable controls, add loop behaviour, and use the poster attribute — experiencing how sound and moving images work together on one page.

Rocket Mission Gallery

In this activity, you will use the img tag to build a visual storytelling webpage set in outer space. You will go through the complete image workflow — providing the file path, writing meaningful alt text, and controlling image size using width and height — all inside one themed page.

Olympic Records

In this activity, you will build a webpage displaying real Olympic Games data in two HTML tables. You will structure rows and columns, add bold header cells, and use the border attribute. By the end, you will have a fully working data table page built entirely in HTML.