After building Nature’s View, I learned that making a website responsive is more than just shrinking things to fit smaller screens.
I initially designed the layout for desktop using CSS Grid, and it looked great. But when I tested it on mobile, problems showed up immediately — cramped sections, awkward spacing, and elements that didn’t flow naturally.
This forced me to rethink my approach and focus on mobile-first design.
Key Lessons I Learned
Designing for mobile first makes layouts simpler and cleaner
CSS Grid is powerful, but Flexbox works better for stacking content on small screens
Fixed widths and heights can easily break mobile layouts
Testing on real devices is better than only resizing the browser
What I Improved
Simplified the layout for smaller screens
Made images scale properly using flexible units
Improved spacing and readability on mobile
Kept the design clean without adding frameworks
Why I Chose No Frameworks
I wanted to understand what was really happening under the hood.
Using plain HTML, CSS, and JavaScript helped me strengthen my fundamentals and gave me more confidence when debugging layout issues.
Final Thoughts
This project taught me that responsiveness is not an add-on — it’s a core part of modern web development.
Every project after this will start with mobile in mind.
Links
Live Demo: (https://mahlombehopewell.github.io/Nature-s-view-mobile-variation-/)
GitHub Repository: (https://github.com/mahlombehopewell/Nature-s-view-mobile-variation-)
Feedback and suggestions from other developers are welcome.
webdev #frontend #css #responsiveDesign #javascript #learningInPublic