Created responsive landing page by using HTML and CSS.

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi manikanta-1341!

  🎉 Congratulations on finishing your first challenge! I notice in your README file that you want to create links but they don't work. To fix this issue, you can remove the space between the ] and (.

  - Website - [Manikanta](https://statscardchallenge.netlify.app)
  - Frontend Mentor - [@manikanta-1341](https://www.frontendmentor.io/profile/manikanta-1341)
  

  The result:

  • Website - Manikanta
  • Frontend Mentor - @manikanta-1341

  Now, the feedback for the solution:

  • Accessibility
    • There's no need to have an empty header.
    • Use main element instead of <section role="main">.
    • Don't use br to create spacing or white space. Use CSS instead.
    • Always wrap text content with a meaningful element (p).

  <div class="info">Discover the benefits of data ...</div>
  

  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Styling
    • Put the base styling outside of the @media query. Someone with screen below 320px can't get the styling. Also, with the method that you are using currently, it makes you repeat the same code over and over again which can make the stylesheet hard to maintain.
    • I would recommend writing your styling with mobile-first approach, which means that you write the base or default styling for mobile layout and use @media (min-width: <value>) to style bigger screen sizes.
    • Add max-width to the card content for mobile layout. Currently on mobile landscape view the card is too wide.
    • Add some padding to the card container to prevent the card from having full width and height on mobile view.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  0