Vanza Setiaβ’ 27,795
@vanzasetia
Posted
Hi, @keziarkts! π
About your questions:
- You have done a great job with the curve background patterns. You decided to make them as background images for each section. You should have done the same thing for the curve background pattern of the
<footer>
. - The sizes on the
style-guide.md
have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As a front-end developer, you should make your website looks good at all screen sizes, including smaller, larger, and everything in between.
I have some suggestions to improve your solution.
- Any words that are related to "image" (for example, picture, photo, logo, icon, graphic, and avatar) should not be included in alternative text.
- For images containing text, make sure the alternative text includes the image's 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 - Not every image needs alternative text. 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 are images that don't add any information and serve only aesthetic purposes.
- Use CSS to uppercase the text. It is not recommended to uppercase it manually within the HTML. Screen readers might spell the uppercased word in the HTML (spelled letter by letter).
- Use one
@import
rule to import both Google Fonts. Even better, I recommend using<link>
tags to improve the page performance.
I hope my suggestions help you. Happy coding! π
Marked as helpful
2
keziarktsβ’ 370
@keziarkts
Posted
@vanzasetia thank you for your feedback and suggestions! ππ
0
Vanza Setiaβ’ 27,795
@vanzasetia
Posted
@keziarkts
You are welcome! π
0