Assignment 1: HTML & CSS Tasks
Deadline: 25 September 2025
HTML Tasks (15 Marks)
i. Create a web page with a navigation bar (menu & sub menu). When you click on a
button in the navbar, the related content should appear in the center area. (3 marks)
ii. Add a marquee element to your page. (1 marks)
iii. Create a tab that shows 6 images. Build a responsive image gallery using Flexbox or Grid
so that images automatically adjust to fit different screen sizes. (3 marks)
iv. Add another tab that contains a form with multiple fields. Use regex validation for
inputs (e.g., email, phone number, password strength, cnic). Apply 5 different types of
validation. (5 marks)
v. Add a footer section with useful links. And also give title to your page and display
relevant webpage icon. (3 marks)
CSS Tasks (15 Marks)
i. Use CSS variables (for example, theme colors) and apply them throughout the web page
for a consistent design. (2 marks)
ii. Add different CSS animation for each of the 6 images shown in the image tab. (4 marks)
iii. Make the navigation bar sticky so it stays visible while scrolling. (2 marks)
iv. Ensure the entire layout is responsive using CSS Grid or Flexbox so it looks good on both
desktop and mobile screens. (2 marks)
v. Apply hover effects on navbar buttons and images to make the page more interactive.
(2 marks)
vi. Use CSS transitions to create smooth effects for tab switching and hover actions.
(2 marks)
vii. Style the footer links using CSS pseudo-classes like :hover, :visited, and :active.
(1 marks)
Note:
I will check this assignment in Thursday’s class. Each student must complete it
individually on their own laptop, and everyone should use a different design and theme.
If you do not have a laptop, you must complete the tasks in the upcoming lab session
using a lab computer.
No excuses will be accepted after the due date.