Bálint Korpai• 620
@kemenyfa-szu
Posted
Hello there!
Congratulations on completing a new FrontendMentor challenge!
A few observations:
- The purple background section is part of your main content, it is better to place them it the <main> section istead of the <header> section. The <header> section is for mainly header informations such as a nav-bar, the logo of a company if you are making a site for a company etc.
- The page doesn't have any styling below 320px viewport width. It is not necessary to enclose all you styling in a media query. The best practice is to start at one end of the viewport width range that you are planning to handle without any media-queries, look at it as your base styling, and make your way through to the other end of the viewport width range. The most used practice is the mobile first approach when you start with the smallest screen width. Just be consistent :)
- The summary data is directly in the <main> section. It is advised to put your content in container tags (preferrably semantic markup elements, such as <section> and <article>). You can imagine it like this challenge's whole content is one component on your page contained by a <section> element and in that the two halves are each contained by an <article> element.
- You can make use of more classes on your elements. It is better to get used to them in the long run. Such as styling of the "Great" text you can wrap it in a <h[1-6]> tag, or give it a class like <p class="large-text"> for easier identification. This way you don't have to select the normal text ("You scored higher than...") with a p+p combinator. Just keep it as simple as possible. Also it is easier to make changes later if you know which css selector selects which element.
I hope I helped a little on your frontend journey :)
Best wishes! kemenyfa-szu
Marked as helpful
0
