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

Used External style CSS

@Majestic-K

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedbacks are welcomed. Pleas give me your suggestions so that I can get better at front end

Community feedback

Alexandra 550

@Alexandra2888

Posted

Hi! Congrats for finishing challenge! Here are some things I think you can improve:

  • use semantic HTML,
  • choose better names for classes, especially BEM naming convention is very useful,
  • make CSS reset: *, *::after, *::before {margin:0; padding:0; box-sizing: border-box;};
  • convert px into relative units (em/rem). Px are used mainly when coding for magazines/newspapers and you need fix units,
  • use shorthand properties eg for margin, padding,
  • make variables in :root{} eg for colors,
  • add in body tipoghraphy properties eg font-family, line-height etc,
  • don't use inline styles, in a big project will cause you a lot of bugs because of specificity,
  • add alt attribute for images, also check again src because svgs are not displayed. Happy coding!
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