Day 14 – CSS Practical: Bringing It All Together

Hey folks

Today at Cudose Creative Agency, we wrapped up our CSS learning phase with a full practical challenge. The task? Create a responsive, styled webpage applying everything we’ve learned so far.

It was a chance to connect the dots between theory and real-world application.

--What We Practiced

1. Selectors & Specificity

From tag, ID, and class selectors to managing style conflicts with specificity and even the occasional !important rule.

2. Box Model & Display

Fine-tuning layouts with box-sizing, experimenting with block, inline, and inline-block elements, and controlling positioning with relative, absolute, fixed, and sticky.

3. Flexbox & Grid

Building adaptive layouts that are both structured and flexible, then using BEM naming conventions for clean, maintainable code.

4. Typography & Styling

Adjusting font-weight (100–900), line heights, and letter spacing for polished text design.

5. Responsiveness

Media queries, relative units, and fluid design to ensure our project looked great across devices.

---Key Takeaways:

Front-end Mentor is a good site to get challenges, also Planning your layout before writing code saves a ton of time.

Clean naming (like BEM) makes future edits easier.

Testing on multiple screen sizes is non-negotiable.

--- Final Thoughts:

This exercise proved that practice makes permanent. I’ve moved from simply “knowing” CSS properties to actually using them in a cohesive, professional way.

With HTML and CSS now under my belt, I’m excited for the next stage of my web development journey!