first challenge

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <p class="strong"> with <h1> to fix the accessibility. click here for more on web-accessibility and semantic html

  To center #card on the page using grid, replace the height in the main with min-height:100vh.

  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

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Florent•30

  @floHalletPosted almost 2 years ago

  @Hassiai, thank you ! This is really helpful :)

  0
• 

  Pedro Celeste•130

  @Pedro-CelestePosted almost 2 years ago

  Hey @floHallet! Congratulations on completing your first frontend mentor challenge! 😎👍🏻

  You did great, here is some things you could change to improve your code:

  HTML:

  • All pages with text should have a <h1> tag, this makes the main text more accesible to those using screen readers. Instead of using <p class="strong">, you could use a <h1>element.

  • You should add an alternative text in the alt attribute in the <img>element. This provides a text in case there is a problem loading the image that will also help those using screen readers. You can learn more about the alt attribute here.

  CSS:

  • I would recommend for the next challenges (and personal projects as well) to write your css code on a separate file. This makes your code much more organized and readable. You can learn more about linking to external CSS files here.

  • Notice that you only used absolute units in your css rules, and that might work fine in screens with certain sizes but might break completely in smaller screens. It is usually a better idea to use relative units. Here's an awesome article that explains why and how.

  • Last thing, the main card has a slight box-shadow when you look at the original design. Tip: You can convert the hsl color to an rgb equivalent and use rgba to define an opacitiy level and make the shadow more transparent.

  Welcome to the community! Hope to see more of your solutions to challenges soon!

  Marked as helpful

  0

  ---

  

  Florent•30

  @floHalletPosted almost 2 years ago

  @Pedro-Celeste, thank you very much for this code review ! It helps a lot :)

  0