Design comparison
Solution retrospective
10th build-up :)
Community feedback
- @correlucasPosted about 2 years ago
๐พHi Lakshan, congrats on completing this challenge!
I saw your preview site and I liked a lot the work youโve done here, it's almost complete, Iโve some suggestions you can consider applying to your code:
The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary
<div>
. For this solution you wrap everything inside a single block of content using<div>
or<main>
(better option for accessibility) and put inside the whole content<img>
/<h1>
and<p>
.<body> <main> <img src="./images/image-qr-code.png" alt="Qr Code Image" > <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main> </body>
โ๏ธ I hope this helps you and happy coding!
Marked as helpful1@M-lakshanPosted about 2 years ago@correlucas thanks Lucas, I'll follow your advice on my future build-ups. Appreciate your help ! ๐โ๐ผ
0 - @romila2003Posted about 2 years ago
Hi Lakshan,
Congratulations ๐ for completing this challenge, your Card component looks great, and it is great that you used flex to center the card. It looks pixel perfect.
The only thing I would suggest is to remove the
header
tag as it provides no use since there is no content within the tag. Theheader
tag is defined as representing 'a container for introductory content or a set of navigational links' HTML Semantic Elements. Also, I would recommend you setting the value ofjustify-content
tocenter
.Overall, great attempt and project and wish you the best for your future projects so keep coding ๐.
Marked as helpful1@M-lakshanPosted about 2 years ago@romila2003 tnx for the heads-up Romila! * yh I also doubt that keeping the header empty. I'll correct this in my future builds. * are you talking about the <main> component -> justify-content: space-between; ? I used 'space-between' because I'm using my footer attribution as a hidden one. it uses some padding-top value until we hover over it. because of that padding, the whole element behaves as it has some height. so if I used <main> component -> justify-content: center; instead of justify-content: space-between; the center alignment of the QR section moves upwards in the mobile version. I couldn't able to fix it using margin & padding so I used this simple method. Inspect the site preview then you can understand what I achieved there. appreciate your help! ๐โ๐ผ
1@romila2003Posted about 2 years agoHi Lakshan,
I was referring to the
<body>
not the<main>
tag for thejustify-content
. But I see what you meant when you said that the card goes up when a user hovers over it. An option you could try, is giving your footer aposition
property and setting it toabsolute
. Then, give it abottom
property and set it to2em
, to prevent an overflow at the bottom of the screen. This will also prevent the card from going up and down too.Hope this helps.
Marked as helpful0@M-lakshanPosted about 2 years ago@romila2003 ah ha. got it. Tnx Romila, I will try your method in the next build (12th) ๐
1
Please log in to post a comment
Log in with GitHubJoin 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