Responsive page created using widths, flex box, HTML and CSS.

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Arnello, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • use main tag to wrap the card and improve the Accessibility not as contaioner of card
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • remove all margin from .container class because with flex they are superfluous
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content

  Hope this help! Happy coding 😉

  Marked as helpful

  0

  ---

  

  Arnas•40

  @ArnasnePosted about 2 years ago

  @denielden got it. 🤝

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @Arnasne, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.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.

  2.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

  3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Arnas•40

  @ArnasnePosted about 2 years ago

  @correlucas thanks for feedback 😉👍 fixed ✔

  0