Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

Kris Pietrzakβ€’ 340

@krisp-dev

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

T
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

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-dev

Posted

@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
Discord logo

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