HTML & CSS basics

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Ibrohim,

  Congratulation on completing this challenge. your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • You can use <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation.

  • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use <h1> instead of <h2>.

  • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. (not describes the image).

  CSS:

  • Adding max-width on the body tag to prevent layout from stretching. If you try to zoom out on your browser, you'll see that the layout stretches, adding max-width will prevent that. Personally, I don’t restrict the width of the body element.If I need to restrict the width I use a container div with a max-width on it.

  • Consider using min-height: 100vh instead of height: 100vh to the body , that let the body grows taller if the content of the page outgrows the visible page.

  • width: 300px;an explicit width is not a good way. consider using max-width to the card inrem instead.

  • height: 480px; It's not recommended to set height to component, let the content of the component define the height.

  • Using percentages for widths, using max-width and avoiding to set heights for the components, with these things is the key to mastering responsive layouts.

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  • It's recommended to include a git ignore. This came with your starter files. It's less important in this challenge but will become extremely important as you move onto larger projects with build steps.

  Aside these, Good work! Hopefully this feedback helps

  Marked as helpful

  1

  ---

  

  Ibrohim•210

  @Ibrohim2001Posted over 2 years ago

  @PhoenixDev22 I tired to fix them as you said, this was great thank you very much

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Ibrohim2001 Glad to help. Happy coding!

  0
• 

  Divine Obeten•2,415

  @Deevyn9Posted over 2 years ago

  Hi Ibrohim, congrats on completing this challenge, everything looks great and well representation. The container isn’t centered on the the mobile view, so look into it.

  Good luck

  Marked as helpful

  1

  ---

  

  Ibrohim•210

  @Ibrohim2001Posted over 2 years ago

  @Deevyn9 yeap, I forgot margin: auto; thank you so much

  0

  

  Divine Obeten•2,415

  @Deevyn9Posted over 2 years ago

  @Ibrohim2001 Glad i could help

  0