@alexanderokeagu
Submitted
All review is welcomed,Thank you.
@TanDevv
@alexanderokeagu
Submitted
All review is welcomed,Thank you.
@TanDevv
Posted
Good job on this, alexanderokeagu. I have a few suggestions for ya :)
Try placing your container in a main
tag after body
for more semantic HTML.
You skipped h1
entirely and went straight to h2
, unfortunately it is not good practice to skip levels of heading, especially the h1 as this tells visual-impaired users what the whole page even is. You can always put a h1 in a landmark like main and set it to be visually hidden so it does not show up in the page but it is still read out by screen-readers.
Your alt
text "Your image here
" does not make much sense in this context, consider changing it to "QR code to Frontendmentor.io"
so someone with a screen-reader can better understand what the image is doing to the website.
Try to avoid using px
units for pretty much anything, unless you are using decorative properties like borders, box shadow etc.. and want something to look more precise, px units do not scale well when it comes to accessibility features in browsers like zooming in and out. I suggest looking into the rem
and em
units.
Here are some references if you feel inclined to read them!
Visually Hidden elements via Webaim
"Are you using the right CSS units?" via Kevin Powell on Youtube
Marked as helpful
@Gerald-LeCour
Submitted
Can somone tell me why the icon with the suv is missing?
Thanks!
@TanDevv
Posted
Hi, Gerald. Really good work on this one! I only see a few things I could suggest :)
Try to only have just one <h1>
per page. You could also replace all h1 with <h2>
instead and make a h1 titled "3 Column Preview Card" visually hidden so it does not appear on your page but will still be called out by screen readers.
With your <img>
elements, I would suggest leaving the alt
blank as they do not have any meaningful content due to being decorative, so screen-readers will avoid calling them out. Also because you have put them in a img tag, screen-readers will already specify that it is an image, so no need to put "icon"
or "icon of"
etc..
Because the buttons are labeled as "Learn More", these are better fitted into an <a>
tag as they will lead the user to somewhere else. Normally <button>
tags are for actions, for example on the current page : validating/resetting a form, showing a modal... While <a> tags are for links and navigation between pages or views.
Lastly, I would suggest you try to avoid using px
units for everything, especially font sizes. They are not accessible when it comes to users who may increase the font size via their browser. Try using em
or rem
instead as they adapt to browser zooming and are more friendly towards accessibility. Px units are usually best suited for when you want something very specific, decorative elements like borders, border radius or box shadows for example.
Other than those suggestions, you did a great job on this project, well done!
Marked as helpful
@kays20
Submitted
@TanDevv
Posted
Hello, kays20! Good work on this one. I can give you a few suggestions regarding your code. :)
px
units for everything, especially for font sizing. Use rem
or em
instead. Relative units such as rem and em can adapt to accessibility for when when the users change the browser's font size setting. Px units will always stay the same size as what you set it as.(You can read this article regarding which units suit your content)
(There is a lot to choose, if you feel unsure which to use, my recommendation that I use at the moment ā Josh Comeau - Custom CSS Reset)
@media (min-width: 375px) {
body {
background-image: url('../images/pattern-background-desktop.svg');
}
I would suggest looking into the <picture>
tag for when you need to provide different versions of the same image. It saves you having to use a media query.
(For more information on using <picture>, you can read this article by MDN)
margin-top: 20px;
that is commented out, did you forget to delete or un-comment it? :)PS: I would suggest reading through the accessibility report that has been automatically made for you and implementing their fixes into your future projects, especially the errors regarding alt text for <img>
elements.
I hope you find these suggestions helpful, overall good effort with this one! š
@Victor20231
Submitted
@TanDevv
Posted
Hi, Victor20231! Good effort on this one! Let's talk about a few things in the accessibility report. :)
PS: There seems to be a broken link to your github code, this may be difficult for others to give you feedback as they don't have easy access to your repository.
šHTML:
After your body tag, consider adding landmarks such as, <nav>
, <main>
and <footer>
as a parent to the corresponding content you have where it makes sense. This helps keep your HTML organized and makes it accessible for users using screen-readers, so a win-win for everybody.
(For more information on what is semantic markup, you can read this article by MDN)
šØ CSS:
px
units for everything. Pixel units do not scale well once you take into account users who may increase the font size via their browser for accessibility, if the website explicitly sets font-sizes in pixels, a heading set at 30px will always be 30px. Which may cause issues for users with visual impairment.rem
or em
units both respectfully scale when needed and would be much preferred when it comes to font sizing, padding/margins and media queries.
If you want something to be a constant size that does not need to be responsive to changes in other elements or little things such as borders, border radius or box shadows then pixel units are the way to go.
(For more information on using units and which are best for what, Kevin Powell does a great video explaining a few of them)
I hope you find this information helpful. Above all, you did well, well done! š
Marked as helpful
@riteshkumarldh
Submitted
please provide feedback about my code
@TanDevv
Posted
Hi, riteshkumarldh! Great work on this one! Here are a few suggestions regarding your code. :)
šHTML:
<img src="./images/icon-cart.svg" alt="cart">
, I would suggest leaving any icons/decorative images (eg: pattern backgrounds) that hold no meaningful content with an empty alt attribute, so screen-readers will ignore it and not confuse the users depending on them.(For more information regarding <alt>, you can read this article also by MDN)
šØ CSS:
px
units for everything. Pixel units do not scale well once you take into account users who may increase the font size via their browser for accessibility, if the website explicitly sets font-sizes in pixels, a heading set at 30px will always be 30px. Which may cause issues for users with visual impairment. rem
or em
units both respectfully scale when needed and would be much preferred when it comes to font sizing, padding/margins and media queries.If you want something to be a constant size that does not need to be responsive to changes in other elements or little things such as borders, border radius or box shadows then pixel units are the way to go.
(For more information on using units and which are best for what, Kevin Powell does a great video explaining a few of them)
.btn {
display: inline-block;
width: 100%;
background-color: var(--dark-cyan);
border: none;
outline: none;
height: 60px;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
display
rules, I would suggest removing one of them as the one below the other will just overwrite it, making it redundant.I hope you find this information helpful. Above all, your solution is great, well done! š
Marked as helpful
@Hyckael
Submitted
@TanDevv
Posted
Hi, Hyckael! Great work on this one! Let's talk about a few things in the accessibility report. :)
šHTML:
Every site must have a h1
where it may make sense, (eg: a title) to describe the main content of your page. This provides vital navigational assistance for users that use assistive systems for impairment, helping them easily find the main content they want to get to.
If sometimes your page may not have something you think deems as a h1, we can use what is called visually-hidden by hiding it from visual users but will still be called out by a screen-reader for visually impaired users.
(For more information on this, you can read this article by Webaim)
Ensure all your headings <h1>
to <h6>
are in a logical order. Try to always start from <h1>
, followed by <h2>
and so on.
This is good practice for not only general organization of your page but importantly for users of screen reading software as they may want to jump from different headings to quickly determine the content of the page.
Not doing so may create confusion, as the user navigating this way may be left wondering where the missing heading is!
(For more information regarding Headings and how to write them, you can read this article also by MDN)
šØ CSS:
width= 100%
on your body
is not needed as it is a family of block elements, (such as html
, div
and p
) it will automatically have a width of 100% as it takes the length of the page.@media (max-width:562px) {
.container{
height: 80%;
}
.card{
width: 60%;
}
.qrContainer{
height: 60%;
}
}
@media (max-width:562px) {
.container{
height: 70%;
}
.card{
width: 70%;
}
}
I hope you find this information helpful. Above all, your solution is great, well done! š
@Quinten-14
Submitted
The sizes and padding is not perfect but everything that needs to be there is. Worked on it for around 10 minutes
@TanDevv
Posted
Hi, Quinten-14! Great work on this one! Let's talk about a few things in the accessibility report. :)
PS: There seems to be a broken link to your github code, this may be difficult for others to give you feedback as they don't have easy access to your repository.
šHTML:
After your body tag, consider adding landmarks such as, <nav>
, <main>
and <footer>
as a parent to the corresponding content you have where it makes sense. This helps keep your HTML organized and makes it accessible for users using screen-readers, so a win-win for everybody.
(For more information on what is semantic markup, you can read this article by MDN)
šØ CSS:
min-height: 100vh
instead of height
on your body. Setting the height to 100vh may result in your content being cut off on smaller screens, such as a mobile phone in landscape orientation or possibly a screen-size below 375px width.I hope you find this information helpful. Above all, your solution is great, well done! š
Marked as helpful
@divyanshthakurx
Submitted
@TanDevv
Posted
Hi, divyanshthakurx! Great work on this one! Let's talk about a few things in the accessibility report. :)
šHTML:
After your body tag, consider adding landmarks such as, <nav>, <main> and <footer> as a parent to the corresponding content you have where it makes sense. This helps keep your HTML organized and makes it accessible for users using screen-readers, so a win-win for everybody.
(For more information on what is semantic markup, you can read this article by MDN)
Every site must have a h1
where it may make sense, (eg: a title) to describe the main content of your page. This provides vital navigational assistance for users that use assistive systems for impairment, helping them easily find the main content they want to get to.
If sometimes your page may not have something you think deems as a h1
, we can use what is called visually-hidden by hiding it from visual users but will still be called out by a screen-reader for visually impaired users.
(For more information on this, you can read this article by Webaim)
Ensure all your <img>
elements have short, descriptive alternate text such as, <alt="drawing of a cat">
as it is incredibly useful for accessibility; screen readers will read your alt description out to their users so they know what the image means while exploring your page.
Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking or links expiring.
For other elements such as icons or images that are purely decorative that hold no meaningful content, you can give it an empty <alt>
description so screen-readers will ignore it!
(For more information regarding <alt>, you can read this article also by MDN)
šØ CSS:
Use min-height: 100vh
instead of height
on your body
. Setting the height to 100vh may result in your content being cut off on smaller screens, such as a mobile phone in landscape orientation or possibly a screen-size below 375px width.
I would suggest maybe increasing the width at which your @media
break-point is at, 375px
for a desktop design is quite low and as such is causing horizontal scrolling for mobile/tablet until it has enough width to fully show all your content.
I hope you find this information helpful. Above all, your solution is great, well done! š
Marked as helpful
@iamis15
Submitted
Hello. To whoever's reading, if you have the time, please check out this recreation of a design from this website.
-The part i found hardest was getting the website to be responsive. Almost all options i tried always ended up in an undesirable result
I am very new to this so any feedback and tips will be greatly appreciated. Thank you
@TanDevv
Posted
Hello, iamis15. Great work on this one! Let's talk about a few things in the accessibility report. :)
šHTML:
After your body tag, consider adding landmarks such as, <nav>, <main> and <footer> as a parent to the corresponding content (such as your div
with the id=root
) where it makes sense. This helps keep your HTML organized and accessible for users using screen-readers, so a win-win for everybody.
(For more information on what is semantic markup, you can read this article by MDN)
Ensure all your headings <h1>
to <h6>
are in a logical order. Try to always start from <h1>
, followed by <h2>
and so on.
This is good practice for not only general organization of your page but importantly for users of screen reading software as they may want to jump from different headings to quickly determine the content of the page.
Not doing so may create confusion, as the user navigating this way may be left wondering where the missing heading is!
(For more information regarding Headings and how to write them, you can read this article also by MDN)
Ensure all your <img>
elements have short, descriptive alternate text such as, <alt="drawing of a cat">
as it is incredibly useful for accessibility; screen readers will read your alt
description out to their users so they know what the image means.
Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking or links expiring.
For other elements such as icons or images that are purely decorative that hold no meaningful content, you can give it an empty <alt>
description so screen-readers will ignore it!
(For more information regarding <alt>
, you can read this article also by MDN)
PS: Your repository link seems to be coming up as Page Not Found, is your repository set as public? :)
I hope you find this information helpful. Above all, your solution is great, well done! š
@dav9go
Submitted
I wonder if profesional developers always include all the accesibility options available or its not always necessary.
@TanDevv
Posted
Hello, dav9go. Great work on this one! Let's talk about a few things in the accessibility report. :)
HTML:
After your body
tag, consider adding landmarks such as, <nav>
, <main>
and <footer>
as a parent to the corresponding content you have where it makes sense. This helps keep your HTML organized and accessible for users using screen-readers, so a win-win for everybody.
(For more information on what is semantic markup, you can read this article by MDN)
Every site must have a h1
where it may make sense, (Title) to describe the main content of your page. This provides vital navigational assistance for users that use assistive systems for impairment, helping them easily find the main content they want to get to.
If sometimes your page may not have something you think deems as a h1
, we can use what is called visually-hidden by hiding it from visual users but will still be called out by a screen-reader for visually impaired users.
(For more information on this, you can read this article by Webaim)
I hope you find this information helpful. Above all, your solution is great, well done! š
Marked as helpful