My first project in frontend mentor code scanner

Community feedback

• 

  P

  Lo-Deck•3,820

  @Lo-Deck

  Posted about 2 years ago

  Well done, you finished your first challenge too.

  01

  Marked as helpful
• 

  Hassia Issah•50,390

  @Hassiai

  Posted about 2 years ago

  Replace <div class="container"> with the main tag and <p class="firstP"> with <h1> to make the content/page accessible. click here for more on web-accessibility and semantic html

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  Use the font-family that were given in the styleguide.md found in the zip folder you downloaded.

  to center .container on the page using flexbox or grid instead of margin,

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

  • USING GRID: add min-height:100vh; display: grid place-items: center to the body

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  For a responsive content,

  • Replace the width in .container a max-width and reduce its value max-width: 320px which is 20rem/em
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  02

  Marked as helpful
• 

  Michael•240

  @mksoofian

  Posted about 2 years ago

  Hey Abdel,

  Nice first attempt here. I'm no pro but here is some feedback that I hope is helpful to improving your code:

  -You can remove the <div class="attribution">, it is only meant as a placeholder in the starting code. Removing it will help you execute your project more accurately as well.

  -This is not a responsive project, or at least not required. Therefore, you can remove the media query. Additionally, I tend to format it as @media (max-width: XXpx). When the screen size is less than the max-width, it will execute the code within your media query.

  -Remove from Body:

  • margin: 26px
  • width: 90% After I did this, your design actual centered better on the page. I would actually recommend setting the margin to "0" as the Browser automatically is putting on some margin here and we should reset that unless you intentionally want it there.

  -It is good practice to fill out the alt=" " in your <img>. This is what they call "accessibility" in coding. People who are visually impaired, the screen reader will read them what the alt=" " is since they can't see there is a QR code there. So, in this case you would write something simple like, alt="QR code".

  -You can remove the font weight on the main <p> text as it is not doing anything really. It is superfluous as your font is already at that weight.

  There are a few approaches to getting the <p> to split into three rows but I will spare you unless you want help. Let me know.

  TIPS: I checked your site by using the chrome dev tools. I would suggest you familiarize yourself with how to use it. It makes really easy to play with without affecting your actual code.

  Also, check out Kevin Powell on youtube. He is really fantastic to watch on youtube and explains things very well. I have and continue to learn a lot from his content.

  Wishing you the best of luck on your coding journey! Mike

  03

  Marked as helpful