• 

  Image of my css container query converter

CSS Container Query Converter Tool

Inspiration

I got frustrated switching between old media queries and modern container queries while building responsive components. Wanted a simple tool to automate the conversion and help other developers modernize their CSS faster.

What I Learned

• CSS parsing and string manipulation in vanilla JavaScript
• Building clean, user-friendly interfaces without frameworks
• Understanding the differences between media queries and container queries
• Regular expressions for pattern matching CSS syntax

How I Built It

Built with pure HTML, CSS, and JavaScript - no frameworks needed! The tool parses CSS media queries, converts them to container queries, and lets you copy the results instantly. Added Basic/Advanced modes to keep it simple for beginners while giving power users more options.

Challenges

The trickiest part was parsing nested CSS rules without breaking the formatting. Had to write custom regex patterns that could handle different media query formats while preserving the original code structure. Also spent time making the UI intuitive for developers of all skill levels.

Tech Stack: HTML5, CSS3, Vanilla JavaScript
Features: Real-time conversion, copy functionality, responsive design, browser compatibility options

Built With

• css
• html
• javascript
• vanilla