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

Responsive Results Summary Web

#bem
ManiNasihβ€’ 180

@ManiNasih

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


Hi Everybody!! Every suggestion is Welcomed!! Thanks!!!

Community feedback

Christianβ€’ 970

@FLCHRIS

Posted

Hi there! ✌️

Congrats on completing this challenge!! πŸ₯³

Your solution is very good, but it has some bugs... πŸ˜₯

Here are some tips to improve it πŸ™ƒ

HTML

Your main content should be inside the main tag, more info here.

You must not use the h1 tag more than once. You must remember that it is only used once, and continue successively with h1, h2, ..., h6 and NOT SKIP HEADER LEVELS. More info here.

CSS

Your reset is good, but you can improve it by using some popular resets like the following πŸš€:

I recommend that you learn the BEM methodology, this methodology is a way to name the classes of the nodes of your HTML and then attack them with CSS in an easy, simple and clear way. πŸ’―πŸš€

Your code is really good πŸ’―, keep it up don't give up!!! πŸ™ƒ

I hope I've helped you πŸ˜„

Happy coding! πŸ‘¨β€πŸ’»

Marked as helpful

0

ManiNasihβ€’ 180

@ManiNasih

Posted

@FLCHRIS Thank you very much!! and I will try to fix them!! and Thank you again!!!

0
ManiNasihβ€’ 180

@ManiNasih

Posted

@FLCHRIS But I have a question how can I use the resets ? Just copy and paste them? I might sound silly but.... I'm a beginner. and I really don't know what's css resets.

BTW I kinda fixed the class names with the BEM methodology. Thanks!!

0
Christianβ€’ 970

@FLCHRIS

Posted

@ManiNasih

Do not worry brother. πŸ™ƒ

just do this: πŸ‘¨β€πŸ’»

Copy the CSS and paste it into a file called reset.css (it can be named anything you like), then add it to your HTML file as you normally would with your CSS styles: <link rel="stylesheet" href="reset .css" />

And that would be all. πŸ˜„πŸ’―

So… why is a reset used?

Normally, web browsers add default styles to some tags, for example, button tag, h1 to h6, and many more; it generally gives buttons a gray background color and a darker border, and headers a margin and font-size, those are the styles that the browser gives them.

With the reset we eliminate them, and thus we can give styles to our interest.

And sorry for replying a little late. πŸ˜₯

Marked as helpful

1
ManiNasihβ€’ 180

@ManiNasih

Posted

@FLCHRIS

Thanks!

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