Responsice Flex Basis QRCode-Improvement Guidence Appreciated🤝
Design comparison
Solution retrospective
Please provide me guidance on how should I further improve my development, I know a lot more than that displayed on this project, such as how to setup get and post routs for specific api requests, but at the same time I want to improve my design skills. Please provide guidance upon next step on development process.
I appreciate any kind of help and support.
Thank you.
Community feedback
- @MelvinAguilarPosted 10 months ago
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML 🏷️:
- 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.
- Since this 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 🎨:
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful2 - Use the
- @danielmrz-devPosted 10 months ago
Hello @Mr-Khaira!
Your solution looks very good!
I have a few suggestions for improvement:
-
Use
min-height: 100vh;
instead ofheight: 100vh;
on the container. Usingheigh:100vh
can cause some bugs and depending on the size of the screen, part of the content might be cut off. -
For semantic reasons, and since that is the main title of the screen, you can replace the
div.card-text-header
withh1.card-text-header
.
The
<h1>
to<h6>
tags are used to define HTML headings.<h1>
defines the most important heading.<h6>
defines the least important heading. Only use one<h1>
per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with<h1>
, then use<h2>
, and so on.I hope it helps!
Other than those details, you did an excelent job!
Marked as helpful1 -
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