Building Responsive Websites That Actually Work — Lessons from Real Projects

Why Responsive Design Matters More Than Ever

Over 60% of web traffic now comes from mobile devices. When I built my Flowerista project, I designed it for desktop first — and when I checked the mobile version, the layout was completely broken. That experience taught me how important it is to test across screen sizes early and often, not just at the end.

Using CSS Grid and Flexbox together changed everything for me. Grid handles the overall page layout, while Flexbox takes care of component-level alignment. This combo powers most of my projects now, including this portfolio.

Techniques That Made a Real Difference

Building Maploom (a WebGIS application with Leaflet and Flask) taught me how critical performance is. Maps with hundreds of markers can freeze a page — lazy loading and debouncing events solved that completely.

• Use clamp() for fluid typography instead of fixed breakpoints
• Optimize images with WebP format and loading="lazy"
• Test on real devices, not just browser DevTools
• Use CSS custom properties for consistent theming across breakpoints
• Implement skeleton loaders to improve perceived performance

What I Use in My Stack

For front-end, I rely on HTML5, CSS3, and JavaScript for most projects. When the project demands interactivity (like the Blockchain E-Voting System), I switch to React.js with component-based architecture.

On the backend, Node.js with Express handles API routing, while MongoDB or PostgreSQL manages data. For deployment, I use Netlify for static sites and Render for full-stack apps like AgroDrishti.

What I Wish I Knew Earlier

Looking back, I wish I had started building real projects sooner instead of just following tutorials. My biggest growth came from projects where I had to solve actual problems: making the Nestora room-finder work across screen sizes, or getting smooth animations right in Veloce-Kloths.

One thing I learned the hard way — always check your site on a real phone before calling it done. The gap between browser DevTools and an actual device caught me off guard more than once.