All comments

• 

  Vitor César•20

  @lordvitor11Submitted about 2 years ago

  

  Product-preview-card

  2

  40
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi lordvitor11! You've done great 💪

  Here are some suggestions to improve your code:

  • Use letter-spacing property to add spacing between letters

  The letter-spacing property increases or decreases the space between characters in a text.

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  0
• 

  Pedro Aparecido Valério•10

  @pedroddjkkkSubmitted about 2 years ago

  

  QRCode using flexbox

  1

  40
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @pedroddjkkk ! You've done great 💪

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

  Click here for more information

  Good job, and happy coding!

  1
• 

  JP•250

  @jamilplSubmitted about 2 years ago

  

  Product preview card using HTML and CSS

  2

  71
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @jamilpl! You've done great 💪

  Here are some suggestions to improve your code:

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

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  0
• 

  gustavo•40

  @machadogustavoSubmitted about 2 years ago

  

  Order Summary Component

  2

  60
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @machadogustavo You've done great 💪

  Here are some suggestions to improve your code:

  • To center the component using flexbox add this property min-height: 100vh; to body element

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Guido Guasch•50

  @guidoghgSubmitted about 2 years ago

  What's the easiest way to get a mobile version of the same webpage? I use @media (max-width: 600px) and put all the modification there, but I don't know if that is the most efficient way of doing it.

  

  Product preview card component solution using HTML and CSS

  2

  30
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @guidoghg ! You've done great 💪

  Here are some suggestions to improve your code:

  • You need to add the alt attribute to your image like this <img src="images/image-product-desktop.jpg" class="desktopProduct" alt="qr code to frontendmentor">

  The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

  You can learn more here

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

  Click here for more information

  Good job, and happy coding!

  1

  This comment has received 1 replyShow
• 

  Keiffon A Broxton•50

  @keiffonSubmitted about 2 years ago

  

  Product Preview

  2

  30
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @keiffon You've done great 💪

  Here are some suggestions to improve your code:

  • You can center the component using flexbox Add this property to body element

  main {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  You can learn more about flexbox here

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

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  0
• 

  Jack•30

  @JackgomezSubmitted about 2 years ago

  

  Product Preview Card

  2

  40
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @Jackgomez You've done great 💪

  • You can center the component using flexbox Add this property to body element

  main {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  And delete margin: 15rem auto; from .box

  You can learn more about flexbox here

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

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  1
• 

  Aman•40

  @Amany4Submitted about 2 years ago

  

  Product preview card component

  1

  30
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi! You've done great 💪

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

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  0
• 

  Dekroo_•70

  @InityeSubmitted about 2 years ago

  

  qrcode-fm

  1

  60
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi! You've done great 💪

  Here are some suggestions to improve your code:

  • You need to add the alt attribute to your image like this <img src="image-qr-code.png" alt="qr code to frontendmentor">

  The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

  You can learn more here

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

  Click here for information

  Good job, and happy coding!

  Marked as helpful

  0
• 

  John•20

  @LorgenskySubmitted about 2 years ago

  All feedback is welcome. Thank you in advance!!!

  

  Responsive web using only html and css

  3

  50
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi! You've done great 💪

  Here are some suggestions to improve your code:

  • 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.
  • Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.

  Click here for more information

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  MohamedYousry•10

  @WeirdAssProgrammerSubmitted about 2 years ago

  • the challenge is pretty easy and there are no difficulties at all
  • I think I am unsure of the CSS variables part, I think I didn't need them
  • No, no questions at all <3

  

  QR code component challenge using HTML and CSS

  3

  50
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi! You've done great 💪

  Here are some suggestions to improve your code:

  • The component isn't centered correctly on larger screens to solve it you need to change max-width: 1440px; from body to max-width: 100%;

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

  Click here for more information

  Good job, and happy coding!

  2
• 

  natalia dragutan•30

  @nataliadragutanSubmitted about 2 years ago

  

  qr-code-frontend-mentor-challange

  3

  40
  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi! You've done great 💪

  Here are some suggestions to improve your code:

  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.

  Click here for more information

  0