Design comparison
SolutionDesign
Solution retrospective
In this challenge I select SCSS. This was my first time using SCSS. I would like your feedback
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, DexterDC! 👋
I wrote a blog post that can help you to write Sass. It contains five code snippets. They can help you write media queries, convert
pxtorem, and much more.5 Handy Sass Code Snippets - CodeNewbie Community
There are a few changes you can do to make your solution better.
- Each page must only have one
<h1>. No more, no less. - Don't make most of the text content as headings. Use heading to give structure to the page. Dive deeper — How-to: Accessible heading structure - The A11Y Project
- Move the
<footer>to the outside of the<main>landmark. The attribution is not the main content of the page. - Alternative text should not be hyphenated like class names. Those text will be read by screen readers to the users.
- 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.
- In this case, use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
- For your information, anchor tags are for navigation. The
<button>element is for an action like opening a modal, submitting a form, toggling an element, etc. It is essential to use the correct elements. - Check the
srcvalue of the@font-face. Currently, the site is not using the Outfit font family. - Provide a fallback font family which in this case will be
sans-serif. This way, the site does not use the default font family. - Make the
<body>element flex container of the card and the attribution. You don't need to use an extra<div>.
I hope my suggestions help you. Happy coding! 😄
0 - Each page must only have one
Please log in to post a comment
Log in with GitHub
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