Submitted over 1 year ago
huddle landing page with alternating feature blocks master
@fnwork
Design comparison
SolutionDesign
Solution retrospective
Any comments or suggestions will be appreciated
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, Faith! π
Here are some suggestions for improvements.
- Download and use the necessary icons instead of importing the whole Font Awesome library. This can improve the loading speed of your website.
- Make sure the alternative text includes the image's text for images containing text. In this case, the Huddle logo should have an
alt
value of βHuddleβ. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text - Remove all
<br>
elements. Screen readers may read out<br>
elements as "break" and not read the content within<br>
s. Let lines wrap where they need to. Learn more about accessibility issues that can happen when using<br>
β <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns - Decorative images should not have alternative text (
alt=""
). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page. - For your information, decorative images do not add any information and serve only aesthetic purposes.
- Alternative text should not be hyphenated like class names or code. It should be human-readable.
- Wrap the text with a meaningful element like a paragraph element. There should not be text in
<span>
and<div>
alone. - Use
aria-label
to label each of the social media link in the<footer>
. - Always use unitless numbers for
line-height
values to avoid unexpected results. Learn more β line-height - CSS: Cascading Style Sheets | MDN - Use
clamp()
for fluidpadding
andmargin
instead of just percentage numbers.clamp()
allows you to set a maximum and minimum value. This can prevent an element from having very small spacing or very large spacing. Recommended tool: Fluid Responsive Design | Utopia - Use
rem
orem
instead ofpx
for font sizes. Never usepx
unit. Relative units such asrem
andem
can adapt when the users change the browser's font size setting. Learn more β Why you should never use px to set font-size in CSS - Remove
max-width
from the<body>
. It should always fill the entire page. Treat it as the main element of the web page. - Remove
width: 100%
from the<body>
styling. It is already the default styling.
I hope this helps. Have a great coding day! π
Marked as helpful1
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