Skip to content
Submitted almost 2 years ago

Single Column

Paulo Victor•420
@paulovictor1997
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • Português : Mais um desafio feito, todo feedback é bem vindo.
  • English : One more challenge done, any feedback is welcome.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Paulo Victor! 👋

    You should make the <body> element the main container of the page instead of using the <main> element. Also, you don't need to set width: 100%;—it is already the default styling— and height: 100vh;—it can break the responsiveness of the page. So, you only need to set min-height: 100vh on the <body> element.

    Don't use id selectors for styling. There are two reasons for not using ID’s to style content:

    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.

    I recommend reading the following article that is written by an expert @grace-snow — What the ID attribute is REALLY for

    Empty label element—<label for="email"></label>—is not making the input have an accessible name. You should provide text content. But, you need to make it visually hidden or use aria-label to label the <input>.

    Next time, I recommend writing the CSS using the mobile-first approach (using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

    If you use the desktop-first approach, then you need to write more CSS to simplify the layout.

    The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

    Learn more — Responsive design ground rules | Polypane

    I hope this helps. Happy coding! 😄

    Marked as helpful
    0
  • Paulo Victor•420
    @paulovictor1997Posted almost 2 years ago

    thanks for the feedback

    0

Please log in to post a comment

Log in with GitHub

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