Lab05_Tasks

🌐 Lab 05 – CSS Layout Techniques & Responsive Design

Course: CS-224L Web Technologies
Instructor: Mr. Mohammad
Department of Computer Science
University of Engineering & Technology, Peshawar
Author: Mukhtiar Ahmad

🔗 Live Project: View on GitHub Pages

---

🎯 Objective

This lab focuses on mastering modern CSS layout systems and responsive web design principles.
The goal is to create flexible, accessible, and mobile-friendly layouts using techniques such as Flexbox, CSS Grid, Positioning, Float-based layouts, and Media Queries.

---

📚 Learning Outcomes

By completing these exercises, I learned to:

• Understand and apply various CSS display properties
• Implement float-based layouts and clearfix techniques
• Master CSS positioning (static, relative, absolute, fixed, sticky)
• Create responsive designs using Flexbox and CSS Grid
• Build complex layouts combining multiple CSS methods
• Implement mobile-first design using media queries
• Handle accessibility preferences (dark mode, reduced motion, contrast)
• Develop real-world responsive web components and page structures

---

🧩 Task Summary

Task No.	Title	Description
Task 1	Display Property Showcase	Comparison of block, inline, inline-block, and responsive visibility
Task 2	Float-Based Magazine Layout	Multi-column text layout using floats with responsive behavior
Task 3	Positioning Challenge	Fixed header, sticky sidebar, modal dialog using positioning
Task 4	Flexbox Navigation System	Responsive navbar with hamburger menu and dropdowns
Task 5	Flexbox Card Layout	Equal height responsive cards using flexbox
Task 6	CSS Grid Photo Gallery	Masonry-style responsive photo gallery with hover overlays
Task 7	Holy Grail Layout	Implemented using Float, Flexbox, and CSS Grid for comparison
Task 9	Dashboard Layout	Admin dashboard using CSS Grid + Flexbox components
Task 11	Responsive Magazine Layout	Asymmetric desktop grid → simplified mobile single-column layout
Task 12	Flexbox Form Builder	Responsive, multi-column form layout that stacks on mobile
Task 13	Portfolio Layout	Combined Grid, Flexbox, and Positioning for a portfolio site
Task 14	Responsive Data Table	Converts full table → card layout → single column on mobile
Task 15	Mobile-First Landing Page	Base mobile design progressively enhanced for larger screens
Task 16	Media Query Breakpoints	Demonstration of common device width breakpoints
Task 17	Responsive Utility Classes	Custom responsive utilities for visibility, spacing, and flex behavior
Task 18	Dark Mode & Preference Media Queries	Support for dark mode, reduced motion, high contrast, and print view

💡 Each task demonstrates a specific layout principle and responsiveness strategy using pure HTML5 and CSS3.

---

🧠 Technologies Used

• HTML5 – Semantic page structure
• CSS3 – Styling and layout control
• Flexbox & Grid – Modern responsive layout systems
• Media Queries – Device-specific styling
• GitHub Pages – Deployment and hosting

---

🖥️ Project Structure

---

⚙️ How to View

1. Visit the live site:
   👉 https://mukhtiar-1090.github.io/Lab05_Tasks/
2. Click on each task file to view its output.
3. Resize your browser window or switch devices to test responsiveness.

---

🏁 Conclusion

This lab demonstrates proficiency in:

• Responsive and adaptive web design
• Combining legacy (floats) and modern (Flexbox, Grid) CSS techniques
• Accessibility-aware styling for user preferences
• Clean, semantic, and maintainable CSS structure

Through these tasks, I have gained strong practical knowledge in front-end layout systems essential for modern web development.

---

👨‍💻 Developed by

Mukhtiar Ahmad
Department of Computer Science
University of Engineering & Technology, Peshawar
📅 October 2025

---