qr code componenet using html and css

Solution retrospective
How i can do it better? not sure if this will work perfect in any situation.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @devriquesant
Hello @rodrigobeckmann
Congratulations for completing this challenge!!
✏️ Here are some tips and suggestions for this and your future projects ;) ✏️
1. 🚀 Contain your "main" content in a "main" tag:
<main>
is a semantic element from HTML which provides accessibility and organization for your web page;- semantic elements provides detailed info about the contents in your page.
- Others semantic elements includes:
<header>
,<footer>
,<figure>
,<figcaption>
... - To implement this, you should exchange the
<div class="main">
for<main>
and wrap all the necessary and main content of your page
2. 📱 Build a responsive web page:
- Use
px
unit to dimension your components in the page makes it a appearance of static. - To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.
- To deeper details, take a look at it
3. 🌐 Build an accessible web page:
- There are a lot of users of all kinds around the world! in order to make everyone able to use the program you just made you could provide some accessibility. But how?
- The
<img>
tag has thealt
property which helps screen readers to get all the content and info in your page. - It’s simple, just add an
alt
based on description of the image as:<img src=”cat.jpg” alt=”A cute cat”>
Overall your project is great and keep coding, I'm sure you will discover new things and become even better
Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)
Marked as helpful - @Davidmide02
Hi Rodrigo, you did a nice job but there is always room for improvement. Below are what you can Improve on:
- your choice of html tags, always make use of the Semantics tags where appropriate. It make your code more readable just to mention but a few.
- make sure your image tag always has alt.
For the layout, you did a perfect job! keep building, it can only get better!
If this is helpful you can hit the helpful button.
Marked as helpful
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