Web Development Lab Problems

By Ankit Sir
Date: 28 Nov

✅ PART 1 — CSS LISTS (LAB TASKS)

Task 1:
Create an unordered list with circle bullets.

Task 2:
Create an ordered list with upper-roman numbering (I, II, III...).

Task 3:
Create a list where the bullet is replaced with a custom image icon.

Task 4:
Create a horizontal navigation menu using a list: Home | About | Contact

Task 5:
Create a list with:

Task 6:
Create 4 link states:

Task 7:
Create a link without underline and show underline only on hover.

Task 8:
Create a button-like link using: padding, background-color, border-radius.

Task 9:
Create a navigation bar using links inside list items.

Task 10:
Create a link with a smooth hover effect using: transition: 0.3s.

Task 11:
Create a div with:

Task 12:
Create a box with different border styles:

Task 13:
Create a circle using border-radius: 50%.

Task 14:
Create a card with rounded corners using border-radius: 10px.

Task 15:
Create a div with only bottom border (3px solid red).

Task 16:
Create a box with: padding: 20px 40px and blue background.

Task 17:
Create two boxes spaced using margin-bottom: 25px.

Task 18:
Center a div horizontally using: margin: 0 auto.

Task 19:
Make a button bigger using: padding: 15px 30px.

Task 20:
Create an example showing margin collapsing between two paragraphs.

Task 21:
Create a heading with text-shadow.

Task 22:
Create a paragraph with line-height: 2.

Task 23:
Create text with letter-spacing: 3px.

Task 24:
Transform text to:

Task 25:
Create a div with center aligned text and gradient text color.

HTML Interview Questions are available here:

Prepared By Ankit Sir | Web Development Lab