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!
