@correlucas
Posted
👾Hello , congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
1.Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem
2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.
3.Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
4.The main heading has the tag <h2>, in this case, you should replace it with <h1> since this heading is the main title on this page. Remember that every page should have one <h1> to declare which is the most important title and that you should follow the hierarchy using the heading sequence (h1, h2, h3, h4, h5) and never jump a level.
✌️ I hope this helps you and happy coding!
Marked as helpful
@AppaSapkal01
Posted
@correlucas Thank you for your valuable suggestion. I'll follow your instructions. I am not comfortable yet with rem or em units. But as you suggested, I'll try to use them more frequently.
Okay, I'll keep that in mind that my page should have <main> tag, and sorry about using <h2> heading. I'll keep that in mind too. Thank you taking your time to go through my code.
