Flex-box and BEM
Design comparison
Solution retrospective
I await your opinions of the code to be able to improve ( ͡❛ ͜ʖ ͡❛)✌
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, awesome work on this one. Layout in desktop looks great, the responsive state could be better since adjusting the screen starting from desktop up to the point before mobile breakpoint, the layout is small as well as the text which is hard to read. The mobile layout looks great.
Some suggestions would be:
- Avoid using
height: 100vh
on a large container like thebody
tag, since this limits the element's height based on the remaining screen's height. Instead replace it withmin-height: 100vh
this takes full height but lets the element's height expand. - Website image should be using website's name as the
alt
likealt="huddle"
, remember that website logo is a meaningful element on a site. - When using
alt
avoid using words that relates to "graphic" such as "image",img
tag is already an image so no need to describe it as one. - Hero-section's
img
could be hidden since it is just a vector image so usealt=""
and addaria-hidden="true"
attribute on theimg
tag. - Social media could use
ul
since those are "list" of links. - Each
a
tag in the social media should be using eitheraria-label
attribute or screen-reader element inside it. The value for whatever method you use should be the name of the social media likearia-label="facebook"
on thea
tag. You do this if there are no text-content inside the element that assistive tech could read. - The
img
inside the social media link could be hidden by the above method I mentioned, since those are only decorative images. - Lastly, check on the responsiveness of the site:>
Aside from those, really great work on this one.
Marked as helpful1@HernanAlex61ChoqueCondori8Posted about 3 years ago@pikamart Thanks for the recommendations they helped me a lot to learn a little more about HTML and to use the "min-height" property with CSS. ✍(っ^▿^)💨
1 - Avoid using
- @fidellimPosted about 3 years ago
Hi Hernan,
Great work on this project! It looks well for both desktop and mobile views! You even implemented BEM methodology :)
Good luck to your future projects!
Marked as helpful1@HernanAlex61ChoqueCondori8Posted about 3 years ago@fidellim thanks, Thanks for the help, that other people see my code and can give their opinion, it helps me a lot to improve and keep moving forward
1
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