Three CSS Projects and What They Taught Me

Posted by Ben Weaver on March 19, 2024
a laptop placeholder

It's been a while since my last post, mainly because I've been focused on my development course. While most of my recent work has involved challenges to match pre-created models, which aren't particularly thrilling, I've realized that writing things down matters. Posting regularly keeps me accountable and serves as a way for me to reflect on my process. So, here are three projects highlighting my recent work in CSS, each offering unique lessons and insights.

Note: These projects have been archived because I've started focusing on adding more self-created content to my portfolio rather than guided challenges, and they are no longer visible on GitHub.


Web Design Agency Page

I began by creating a basic single-page site, implementing media queries to ensure responsiveness. While the process was straightforward, it underscored the importance of exploring alternative CSS tools. I'm grateful for the existence of these options, as relying solely on media queries could quickly become cumbersome.


Pricing Table

Next, I crafted a dynamic pricing table using Flexbox. Flexbox's intuitive nature and resources like the Flexbox guide from "A Complete Guide to Flexbox" proved invaluable, reinforcing my understanding of responsive design principles.


Mondrian Painting

Lastly, I recreated a Mondrian painting using CSS Grid. While Grid offered powerful layout capabilities, I stumbled upon a challenge when attempting to add a black border to a blue rectangle. It wasn't a matter of complexity; rather, I misunderstood the approach and tried to make the line another Grid cell, rather than a border. That threw off the rest of the layout and took me some time to correct. This misstep served as a valuable reminder of the importance of clarity and understanding in coding.


All told, these projects pushed my CSS a long way and refining my problem-solving skills. Despite the occasional roadblock, each endeavor has contributed to my growth as a developer. I plan to keep documenting this and sharing what I pick up. Stay tuned for more updates! Next on my agenda? Exploring Bootstrap and its applications in web development.