Lec5

Lecture 5

Tasks

Task 1: CSS Box Model Practice

• Create an HTML page that displays a series of articles. Each article should have a headline, an image, and a short description. Using the CSS box model principles, style each article to have consistent spacing, borders, and padding. Experiment with different display types.

Task 2: Positioning Practice

• Design an HTML page with a sticky header, a footer, and a main content area. Use different positioning techniques (e.g., relative, fixed, static) to achieve the desired layout. The header should remain at the top of the page even when scrolling.

Task 3: Float Layout

• Create an HTML page with a series of images and captions. Use the float property to allow text to wrap around the images, creating a magazine-style layout. Ensure that the layout is responsive and looks good on both desktop and mobile views.