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

I use sass for the first time

#sass/scss
Hadrien Janssensโ€ข 30

@BlackPigCompany

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


give me advice about good practice please what can I improve ?

Community feedback

Roan Macmillanโ€ข 820

@RoanMacmillan

Posted

Hey there. Consider using semantic HTML elements. For example;

  • Wrap the main content of your html in a '<main></main>' tag instead of using '<div class='container'>'.

  • Wrap the 'Your result' element in a h1 tag instead of a p tag.

This will make sure you avoid accessibility issues and will provide more context and structure to your content.

Marked as helpful

0
Francisco Carrilloโ€ข 5,540

@frank-itachi

Posted

Hello there ๐Ÿ‘‹. Congratulation for completing the challenge๐Ÿ‘!

I have some suggestions about your code that might interest you.

HTML ๐Ÿ“„:

  • Wrap the <div class="container"> element content in the <main> tag.
  • Wrap the <div class="attribution"> section inside the <footer> tag.
  • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more heading in your html code. So you can replace the <p class="gris">Your result</p> by <h1 class="gris">Your result</h1>

CSS ๐ŸŽจ:

  • To center the <div class="container"> element do the following: FlexBox
body {
	min-height: 100vh;
        display: flex;
	align-items: center;
	justify-content: center;
}
  • Add the following rule to the .container selector so the direction will be row instead of column:
.container {
	/* height: 100vh; */
    	/* max-width: 375px;*/
	display: flex;
}

I hope you find it useful! ๐Ÿ˜„ Above all, you did a good job!

Happy <coding /> ๐Ÿ˜Ž!

1

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