QR Component using CSS & HTML

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  Hey!

  Congrats with your first challenge here =)

  I can give you a few tips of how you can improve it.

  You are already use flex on the body tag for centering, so there is no need in margins for container element. To center it properly add min-height: 100vh property to body. That way it will stretch to the height of the screen and the content will be exactly in the center (don't forget about aligh-items as well).

  Than I suggest you to use semantic tags - the h1 tag for the main text, p tag for second text and main tag for the whole content.

  And for font sizes it's better to use rem units instead of pixels. It is a special relative units which depends on the user's font settings. By default most browsers treats 1 rem as 16 px.

  Hope that helps! Overall you did cool work, keep doing =)

  Marked as helpful

  1
• 

  Eman Salama•120

  @emzzz56Posted 3 months ago

  Congratulations Bailey for completing this challenge. you have created a super design; your design looks very much like the screenshot. As the next step, I suggest 1- Use semantic HTML tags like main, footer, section, etc for better accessibility so I think it would be good to wrap the card in main and add a footer for "Challenge by Frontend Mentor." 2- It's always a good practice to start your CSS with reset CSS so the layout looks the same on all browsers. You can try Josh Comeau approach for CSS reset.

  I'm looking forward to seeing more of your work. Keep up the good work :)

  Marked as helpful

  0