📱 Responsiveness Methods — HTML & CSS
A collection of small projects and examples demonstrating the core methods used to make websites responsive across different screen sizes.
🚀 Overview
This folder contains practical implementations of the major responsiveness techniques used in modern front-end development. Each file focuses on a specific layout or scaling strategy, helping you understand how websites adapt to mobile, tablet, and desktop screens.
📂 Contents
- media-query.html – Media Queries
Demonstrates how to apply CSS rules conditionally based on screen size.
Useful for creating breakpoints and adjusting layout for different devices.
- grid.html – CSS Grid
Shows how to use grid containers, tracks, and responsive grid layouts.
Perfect for building complex, flexible layouts with minimal code.
- flexbox.html – CSS Flexbox
Explores responsive alignment, spacing, and direction using Flexbox.
Great for navbar layouts, cards, and flexible content blocks.
- bootstrap.html – Bootstrap Framework
Using Bootstrap’s responsive grid system and utility classes.
Delivers responsiveness quickly with pre-built components.
🎯 What I Learned
How different responsiveness techniques compare and when to use each.
Creating layouts that adapt naturally to different screen widths.
Writing cleaner, more scalable CSS.
Introduction to framework-based responsiveness (Bootstrap).
🛠️ Technologies Used
HTML5 CSS3 Bootstrap 5 (CDN)
