Design comparison
Solution retrospective
Since I am self-educated in HTML5, CSS3 and JS, I find it very interesting in testing my basic knowledge. This first excercise confronted me with my lack of knowledge on flex/grid. Since there was only one element to center in the screen I managed, but if there would be more, I would have gotten into trouble.
I admit, I looked at some other code, and where I tend to use HTML-tags, others prefer <DIV> with a class associated. I am still in a phase where I tend to copy code from previous excercises I did during the online-courses, and not to write code from scratch.
Community feedback
- @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html
There is no need to give the body a min-width value. There is no need to give .container a margin value. There is no need to style .kaartje.
reduce the max-width value of .container for it to be equivalent to the width of the design.
max-width: 20rem which is 320px. Give the img a max-width of 100% instead of the width.Give .tekst a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top value for the space between the text. There is no need to give the img a margin value.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord