📋 Lab Assignments: HTML + CSS

This section contains more structured, longer-form practical tasks that simulate real-world use cases for HTML and CSS development. Each lab is aligned with a specific lesson or topic covered during the course.

Lab 1: Build a Personal Introduction Page

Objective: Combine text, images, and links to create a basic personal page.

Use semantic HTML structure (<header>, <main>, <footer>)
Add a profile photo, short bio, and contact links
Style the page using an external CSS file

Lab 2: Create a Multi-Section Article Layout

Objective: Use sections and containers to organize content clearly

Structure article with <article>, <section>, and <aside>
Add headings, paragraphs, quotes, and a sidebar with related links
Style using margins, padding, and borders

Lab 3: Responsive Navigation Bar

Objective: Develop a responsive navbar with Flexbox

Use Flexbox for horizontal layout
Add media queries for vertical layout on mobile
Highlight active link and hover states

Lab 4: Contact Form with Validation

Objective: Create a working HTML form with required fields

Include inputs for name, email, message
Use required and type attributes for validation
Style form with focus and error states

Lab 5: Two-Column Layout Using Flexbox

Objective: Display content in two columns and adapt to smaller screens

Create a container with two divs: text content and an image
Use Flexbox to display side-by-side on wide screens
Stack on small screens using @media

Lab 6: Styled Data Table

Objective: Create and style an HTML table

Include table headers, rows, and columns
Style using border-collapse, colors, and hover effects

Lab 7: Landing Page Mockup

Objective: Create a landing page for a fictional product

Use hero image, CTA button, and feature sections
Style fonts, background, and layout
Ensure responsiveness

Lab 8: Interactive Button Effects

Objective: Explore advanced CSS effects for interaction

Create buttons with hover, active, and transition effects
Try gradients, shadows, and scaling animations

Lab 9: Styled Image Gallery

Objective: Create a flexible image gallery layout

Use grid or Flexbox to align multiple images
Style with borders and hover overlays
Ensure responsiveness on mobile

Lab 10: Final Responsive Web Project

Objective: Design and build a complete multi-section web project

Include navigation, sections, images, forms, and responsive layout
Deploy the final project using GitHub Pages
Ensure accessibility and semantic structure