QR component viewer using vanilla HTML and CSS

Solution retrospective
Question about best practices:
- When should each unit (em, rem, %, vh/vw and px) be used?
- Why does auto work on some properties and not on others? Does it depend on the element being a block element and inline?
- Everything about Aria stuff when it comes to accessibility
Thanks <3
Please log in to post a comment
Log in with GitHubCommunity feedback
- @devriquesant
Hello Lord-Nickelbottoms
Congratulations for completing this challenge!!
✏️ After answering your questions, I want to give you 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="card">
for<main>
and wrap all the necessary and main content of your page
-
2. 🌐 Building 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?
-
There are a lot of ways to make it, There are the semantic elements and also the "Aria stuff" that you've said.
-
2.1. Aria Stuff:
Aria
properties are used to give additional info about the semantic and accessibility of a webpage content to assistive technology users.- There are a lot of
aria
properties as:aria-label
,aria-hidden
,aria-expanded
, and each one of them creates an exclusive feature to meet with the needs of these users.
-
2.2. Semantic elements:
aria
properties are good but should not be overused.- They don't override the good practice of using semantic HTML elements
- For this, get used to write semantic elements in your HTML file to give more accuracy of the things you do and want to give to your users.
-
2.3. 👍 Your good practices 👍:
- In your project I see you you've used the
alt
attribute for accessiblity on the<img>
tag - Also used an
arial-label
that with the help of a screen reader, will describe the element to the user. - These are real good practices, as they help users to understand what is your page and what is does have!
- In your project I see you you've used the
-
-
3. 📱 Building a responsive web page:
-
The use of
px
unit, to dimension your components in the page, gives 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.1. The units:
em
andrem
: These units are used to define thefont-size
,margin
and the fill of elements, butem
is relative to its parent element andrem
to the<html>
root element%
: is used to set a value relative to the parent element, unless the value you set as auto has the position set as absolute.vw
,vh
,vmin
andvmax
:vw
andvh
are units set relative to the viewport's width and height. 1vw and 1vh is 1% of its correspondent viewport.vmin
andvmax
is viewport's smaller dimension and larger dimensionpx
: as already said, gives a appearance of static, as the webpage has a kind of rule the set the metric in the page sized in pixels, so exchanging between devices, a button element of width100px
will remain with100px
in all devices.
-
3.2. Auto:
- Yes, not all properties can be set as
auto
, and the type of display the element can affect it. - Simply, the
auto
key-word will tell the browser to calculate the property based on its parent. - If a element has a
display:block
, width and height asauto
will fill all the the available space. - If a element has a
display:inline
, width cannot be set explicitly as it's calculated based on the element content, and height withauto
value will take the default height.
- Yes, not all properties can be set as
-
Sorry about all this stuff, really big, isn't it?
By the way, your project is really good 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 -
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