Coding Activities by Abdur Rehman

Animation

In this activity, learn about CSS animation.

Gradients

In this activity, learn how to use gradients used in CSS.

Background

In this activity, learn about different background properties.

CSS Styling Examples

In this activity, learn how to use inline, internal, external CSS and also learn about Element, class ,id and global selectors

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.

Personal Details Form

Write a program to create a webpage to collect personal details like - email, name, contact number(masked information), gender, and favourite city by using the form element of HTML.

Semantics HTML

Write a program to create a webpage using various semantic elements live - header, nav, footer, section, article, aside etc., by including the content of your choice.

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.

Table

In this activity, learn about the Table tag used in HTML.