Hello Dev Community! π
Today marks Day 7 β a full week of documenting my journey toward mastering the MERN stack! After mastering Flexbox yesterday, today I tackled the most crucial aspect of modern frontend development: Responsive Web Design using Media Queries.
With more than half of web traffic coming from mobile devices, a layout that only looks good on a laptop is a broken layout. Today, I learned how to make my code adapt.
π§ Key Learnings From Day 7
1. The Mobile-First Approach
I learned that instead of styling for big desktop screens first and then trying to shrink everything for mobile, it is much cleaner to write CSS for mobile screens first, and then use Media Queries to add styles as the screen gets wider.
2. Understanding Breakpoints
Media queries allow us to apply CSS rules only when certain conditions are met, such as a maximum or minimum screen width (min-width or max-width).
I experimented with standard breakpoints today:
- Mobile screens (default CSS)
- Tablets (
min-width: 768px) - Desktops (
min-width: 1024px)
3. Combining Flexbox with Media Queries
The real magic happened when I combined yesterday's Flexbox knowledge with today's Media Queries. I learned how to change flex-direction: column; on mobile to flex-direction: row; on desktop screens smoothly.
π οΈ What I Actually Built / Refactored
I took the form and navigation bar from the previous days and made them fully responsive:
- The Navbar: On desktop, the navigation links sit horizontally next to the logo. Using a media query, I configured it so that on smaller screens, the links stack vertically and center neatly, making it touch-friendly for mobile users.
-
The Form Layout: Input fields that look great spanning across a desktop screen were wrapping tightly on mobile. I adjusted their widths using percentages (
width: 100%) inside mobile parameters so they scale flawlessly.
Opening my browser's inspect tool and dragging the screen size back and forth to see the layout adjust automatically was the perfect way to wrap up week one!
π― My Goal for Tomorrow (Day 8)
I have built a solid foundation in HTML structures and CSS layout principles over the last week. Tomorrow, it's time to add true logic, interactivity, and brainpower to the frontend:
- Starting JavaScript (JS) fundamentals.
- Learning about variables, data types, and how code runs in the browser console.
π¬ Let's Connect!
To the seasoned developers: What are your go-to breakpoint values when starting a clean CSS project? To fellow beginners: Have you tested your webpages on your actual phone yet?
My first fully responsive stylesheet is committed and pushed to GitHub!
[Links in the Comments]
One week down, many more to go. Keep pushing! π
