Design comparison
Solution retrospective
Hello community this is my first challenge in this great plattform. Now I want to start using semantic html because I learned using only div tags for everything, so I have a question:
It would be better use the article tag? or using main tag is ok?
All feedback is well recived. Have a great day!
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi Rodrigo León,
Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:
- You should use
<footer>for the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology. - Adding
rel="noopener"orrel="noreferrer"totarget="_blank"links. When you link to a page on another site usingtarget=”_blank”attribute , you can expose your site to performance and security issues. - Page should contain
<h1>. In this challenge , you can use<h1>to wrapImprove your front-end skills by building projectsas you should have used a header not<p>. - Images must have alt attribute. In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentornot describes the image. - In order to center the card on the middle of the page , you can use the
flexboxproperties andmin-height: 100vhfor the<body>add a little padding to the body that way it stops the card from hitting the edges of the browser. Then you can remove the large margin. width: 320px;an explicit width is not a good way to have responsive layout . Consider usingmax-widthto the card inreminstead .height: 497px;It's not recommended to set height to component, let the content of the component define the height.- Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices
- Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.
Overall, Excellent work! Hopefully this feedback helps.
0@ReyesRo10Posted about 2 years agoHi @PhoenixDev22, thank you very much for that detail feedback. I'm already added to my file.
Happy coding!
0 - You should use
- @shimul0022Posted about 2 years ago
@ReyesRo10 hey, first of all congratulation for the completion of your first challenge.🎉
now, you have used semantic elements in the correct way in this challenge. You can't really use more than one main element in a html file. but you can use multiple articles. and being that said, articles always go inside the main element. and usually used for blog post or wrapping a lot of written content.
So, if you want to divide your body for more semanticity, then at first add header, main and footer. then you can put things in the main element into different sections or articles.
and btw, you should delete the README.md file that's with the challenge files and rename the README-template.md file to README.md. then modify the content inside the new README.md file. all the instruction will be written there to guide you.
Happy Coding!
0@ReyesRo10Posted about 2 years agoHi @shimul0022 thank you for the explanation about main and article elements, it was easy to understand and remember.
Happy coding!
1
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