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

@Sadikibenda

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


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

to get done with this challenge

What challenges did you encounter, and how did you overcome them?

shifting these cards

What specific areas of your project would you like help with?

any feedback

Community feedback

P

@medic-code

Posted

Not a bad go at the challenge.

HTML

  1. Try to reduce the number of div's in the markup, they're non-semantic, use main, article, section

  2. Try to be a bit more mindful with your classes - check out BEM, makes it easier to implement CSS when you split the HTML into quickly noticable classes.

CSS

  1. Try to setup your CSS with CSS variables rather than using precise px units for different parts of your CSS it will force you to be more consistent with the design
  2. The heart of this challenge is to try your hand at CSS Grid in desktop view as its tricky to set up the cards without it - you've managed to do this so well done but the styling compared to the design are slightly off and you could probably achieve near the design using grid a lot easier.
  3. Using grid for mobile is probably not the best choice - flexbox is great for doing layout in one axis like mobile. Use grid for larger layout concerns and when you need to layout something in both x and y directions.
  4. I would adjust your boxshadows to be more blurred
  5. The icon margin is off in the cards should be 40px
  6. Try to refrain from using px for everything, px are great for when you really need a fixed container - mostly you want max-width rather than a specific fixed container size. REM works well for font-sizes, padding and margins, using CSS variables will help you keep your spacing consistent which is important in UI
  7. The header title should be h1 not h2 and should have atleast 64px of space between subheading and the cards
  8. The card heading and descriptions spacing is little too large and the description font weight is a little too much
  9. The cards themselves are a little too short in both width and height in desktop mode
  10. The fontweight in your heading is too much should be around 200
  11. The space between the heading title and the top of the view port is too large, look at the design to re-arrange this.
  12. The fontweight of the card headers are too much reduce that done a touch in line with the design

A lot of the CSS feedback is nit picky about the UI which are lesser concerns. Do try to attempt to do the desktop cards in CSS grid though as it'll exposure you to grid.

Also worth thinking about when flexbox is useful to use and when CSS grid is more useful. i've provided a little bit on this but worth searching the web around this.

0

@Sadikibenda

Posted

Thank you so much @medic-code for your feedback, is truly what I wanted. I am not so good in CSS grid. I will put more effort into learning it.

I appreciate it

0
P

@medic-code

Posted

You're welcome! Happy to review when you've made changes@Sadikibenda

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