Frontend Mentor | QR code component coding challenge solution

Community feedback

@mohammedlahboub

Posted almost 2 years ago

Hi @maria-js you did great on your first project !!

To Center the card (horizontally and vertically) u can use display flex on the <body> instead on margins on the <header>

body{

           ` width: 100vw;  ` to make body width equal to screen width

           ` height: 100vh; ` to make body height equal to screen height

           ` display: flex; ` set display mode for body as flex

           ` align-items: center; ` to center items inside the body vertically

           ` justify-content: center; `  to center items inside the body horizontally

}

Marked as helpful

María José• 10

@maria-js

Posted almost 2 years ago

@mohammedlahboub Thank you very much for your comment, I will take it into account for future exercises. :)

Kehinde• 660

@jonathan401

Posted almost 2 years ago

Congrats on completing this challenge @maria-jose :). You did a really good job :). Just a few suggestions though.

To fix your accessiblity issues you should wrap you whole card component in a main tag.
Also, it is a good practice as well as required by the WCAG guide that every page should contain one h1 element. This provides a good way for users that with disablities like coordinative abilities or users that find it hard to see to easily navigate your site (or your page).
This is a small project so this might much be very important but you should consider adding classes to your html elements. This will make it easier for you to style the elements when you're working on a large project in the future. For example, when you have a lot of p elements in your page, adding a class to each of these p elements could save you a lot because in you might want to style a p element different from another p element. I hope you get that ;). This article by w3schools might provide better understanding on this concept. Feel free to do more research on this :).
I noticed in your css that you were using absolute units to style your css. This is good in some cases but it leads to your site to break and not responsive. You should consider using relative units like % or rem instead ;). (You don't have to do this though, It depends on what you are building). You could check out this article by freecodecamp.

I have to apologize for making this so long :). Congrats on completing the challenge :). Happy Coding :D.

Marked as helpful

María José• 10

@maria-js

Posted almost 2 years ago

@jonathan401 Thank you for your suggestion, I will take it into account.

Kehinde• 660

@jonathan401

Posted almost 2 years ago

@maria-js You're welcome 😇

QR code component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community