Design comparison
Solution retrospective
Hi, i'm Adnan Haydir. I'm Junior Web Developer. Currently learning about HTML, CSS and Javascript. Any feedback accepted! Thankyou! Cheers
Community feedback
- @superpooperxxxPosted almost 2 years ago
Hi, good job on making this project🔥
- You are using <section> incorrectly. <Section> is some huge part of website, for instance "Testimonials", "Contacts", "About us" and so on. In this project you actually have only one section which is this hole project.
<section class="qr-image">❌ <img src="images/image-qr-code.png" alt="" /> </section> <section class="text">❌ <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> </section>
✅ <section class="container" ... </section>
- Always give alt description to image elements. Those are crucial, as they replace the image if it is broken or cannot load with text in alt.
✅ <img src="images/image-qr-code.png" alt="QR code to move to frontend mentor website" />
Happy coding❤️ Hope this was helpful
Marked as helpful1 - @HassiaiPosted almost 2 years ago
Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html
To center .container-box on the page, replace the height in .container with min-height:100vh.
There is no need to give .container-box a height value, replace that with a padding value for all the sides.
padding: 15px
. there is no need to style .qr-image, give the img a max-width of 100%.Add a font-size of 0.9375rem which is 15px to .text this will be the font value for both h1 and p, There is no need to give h1 and p font-weight values.
Use relative units like rem or em as unit for the padding, margin and width 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
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