Skip to content
Submitted 8 months ago

Four card feature section

pure-css
amoeba25•140
@amoeba25
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Learnt using a follow-along from kevin powell. Learnt a few good things with this

  • had been using @import option for google fonts instead of the link tag but the link is better one in terms of optimization, so will start using that
  • using modifier classes to attach different colours to divs
  • learnt about BEM naming convention
  • learnt good basics for grid/flex
Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Structure & Semantics

    • Semantic HTML: Uses clear structure with <header>, <main>, and heading levels. Nice use of <div class="wrapper"> for layout constraint.

    • Responsive Grid: Implements a mobile-first responsive layout with a media query for min-width: 800px.

    • CSS Variables: Uses CSS custom properties well for fonts, colors, and sizes — makes it easier to maintain.

    • Typography & Consistency: Font-family and weights are defined in :root and reused properly.

    • Visual Hierarchy: Headings and descriptions are clearly styled, and card colors are well-differentiated.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord