Skip to content
Submitted over 3 years ago

Four Card Feature Section - HTML/SCSS/Flexbox/BEM

Kris Pietrzak•340
@krisp-dev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey fellow coders,

This is my first project from Frontend Mentor after escaping the "tutorial hell". Timed myself on this one and from start to finish it was roughly at the 2 hour mark.

Spent the last 30 minutes playing around with the border-top-color trying to use :nth-child() and :nth-of-type() on the &__content element, but couldn't figure it out so ended up using a @mixin.

I used different width px's for the Media Queries, is that alright?

How would you rate my code readability? Is it easy enough to understand?

Anything else I could have done to minimize reusing the same code pieces, or simply making it shorter?

This will be my first code review, so looking forward to any tips and tricks.

Thanks!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hello there, Kris P! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice job on this one! 👏 I came to love Frontend Mentor after feeling like I was in tutorial hell for a while, too, so it's nice to see yet another person taking advantage of the opportunity to get their hands dirty with code (instead of just munching on information all of the time)! 😅

    Overall, your solution looks good and responds nicely! The only minor thing I might suggest is to use a single heading tag for the heading of the page (since it is really just a single heading, not two separate headings). You can easily style each part of the heading differently by wrapping one part in a <span> tag. 😉

    Your code also looks pretty good—it's certainly fine to use px in your media queries (that's a common practice) and it's nice to see you dividing your code into sections with comments. 🙂

    Keep coding (and happy coding, too)! 😁

    1
    Kris Pietrzak•340
    @krisp-devPosted over 3 years ago

    @ApplePieGiraffe

    Thanks for the feedback ApplePieGiraffe!

    So far so good and I will stay on Frontend Mentor for a long time :) Seems like just the thing for me as I like challenges and 'levels'. Will love 'leveling up' from Newbie to Junior to Intermediate etc, and see how far this journey will bring me.

    0

Please log in to post a comment

Log in with GitHub

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