qr-code-component solution using simple HTML and CSS (divs and flexbox
Design comparison
Solution retrospective
pretty simple project for a beginner like myself, (styling wise), however, I find these small projects useful as they get you familiarized with "must know" developments concepts among other things...
edit: I will make my next project more accessible by using more semantic HTML
<p> lets get coding </p>Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML π:
- Use the
<main>
tag to wrap all the main content of the page instead of the<div>
tag. With this semantic element you can improve the accessibility of your page.
- Use the
<footer>
tag to wrap the footer of the page instead of the<div class="attribution">
. The<footer>
element contains information about the author of the page, the copyright, and other legal information.
-
The <div> tag defines a division or section on a website. It is used to style a container with CSS, set special alignment, or position content. It might be more efficient to use the <p> tag; the <p> element represents paragraph-level content, usually text:
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
- The text
Improve Your Front-End Skills by Building Projects
is considered a heading element.
- Since the component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS π¨:
-
You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.
Popular CSS resets:
I hope you find it useful! π
Happy coding!
Marked as helpful1@samaelwebdevPosted almost 2 years ago@MelvinAguilar thank you for taking the time to look at my solution and providing me with useful advice, I am somewhat familiar with semantic HTML as I am learning by following the guides on w3schools and they give you all the theory which I actually enjoy, I will take your advice into consideration in future projects and make use of proper syntax to be best of my abilities no matter how small the project may be.
happy coding,
samaelwebdev
1 - Use the
- @AhmedMahroussPosted almost 2 years ago
good jop my bro Congrats on completing your first challenge!ππ»If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! ππ
2@samaelwebdevPosted almost 2 years ago@amahrous176 thank you my friend I appreciate your helpfulness.
0
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