html css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  CSS 🎨:

  • Remove the max-width and min-wdith from the body element and allow it to occupy 100% of the screen width regardless of device; otherwise, your solution will not be centered on 4k screens.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  • You don't need to add font-family: "Outfit", sans-serif; to each <p>, <h*> separately. Instead, add it to body.

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    This will save you from writing margin: 0 on elements to remove their default margin.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0
• 

  RabbitMaid•1,020

  @AgbortokoPosted over 1 year ago

  • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

  You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

  Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

  It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

  There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

  Read

  • W3schools Accessibility Landmarks Notes for more information.

  • MDN Web docs notes for more information.

  I hope you find the above solution useful! 😄 Nevertheless, the solution you submitted is great! Happy coding!

  Marked as helpful

  0