Design comparison
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing your second challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- This solution generates accessibility error reports due to
non-semantic
markup
- So fix it by replacing the
<div class="card">
with semantic element<main>
along with<div class="attribution">
with semantic element<footer>
to improve accessibility and organization of your page.
- Every site must want at least one
h1
element identifying and describing the main content of the page. Anh1
heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
- So Every site wants a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a
sr-only
class to hide it from visual users (it will be useful for visually impaired users)
I hope you find it helpful ! 😄 Above all, the solution you submitted is great
Happy coding!
Marked as helpful1@avaChristinePosted over 1 year ago@0xAbdulKhalid Thanks for providing valuable feedback.
0@avaChristinePosted over 1 year ago@avaChristine Can i you share best resources for learning Flex layout ?
Because I'm about to continue to learn web development after a long break, willing to learn the layout first.
Thank You.
0@0xabdulkhaliqPosted over 1 year ago@avaChristine, Sure here are the best resources for learning Flexbox.
-
MDN Web Docs - Flexbox Guide: Detailed explanations, examples, and interactive demos.
- Link: MDN Flexbox Guide
-
Flexbox Froggy: Interactive game for hands-on practice and understanding.
- Link: Flexbox Froggy
-
CSS-Tricks - Complete Guide to Flexbox: Comprehensive guide with detailed explanations and code examples.
- Link: CSS-Tricks Flexbox Guide
-
Flexbox Defense: Game for practicing Flexbox properties by defending against enemies.
- Link: Flexbox Defense
-
Flexbox Zombies: Interactive coding game where you learn Flexbox by saving the world from zombies.
- Link: Flexbox Zombies
-
Scrimba - Flexbox Course: Interactive coding platform with a Flexbox course including video lessons.
- Link: Scrimba Flexbox Course
-
YouTube Tutorials: Quality tutorials on channels like "Traversy Media," "The Net Ninja," and "Academind."
-
Flexbox Cheat Sheets: Printable cheat sheets for quick reference.
Remember, practice is essential to mastering Flexbox. Build projects and experiment with different layouts to reinforce your understanding.
Marked as helpful0 - @maykol-vallejosPosted over 1 year ago
Hi, how are you? I was reviewing your code and I saw that you had problems to center your card, which is not very responsive to use custom margin for accessibility issues, responsiveness and resizing on smaller screens (such as 768 px), your card will be displayed sideways and not in the center. So to correct this you can center it using flexbox or grid, in this case use grid with respect to your code, if you replace the following classes in your stylesheet you will see that it will be centered before any resizing:
body { width:100%; display:grid; place-items:center; min-height:100vh;
font-family: Red Hat Display, sans-serif; background-image: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; background-color: hsl(225, 100%, 94%); font-size: 1rem; background-size:contain;
}
.card{ width: 25rem; margin-top:8rem; }
section{ display: block; background-color: white; border-radius: 2rem; }
Finally remove in your stylesheet the classes named: "body,html{ }" and ".attribution{ }".
I hope these tips will help you, keep it up and may you succeed in your future coding! ;)
Marked as helpful0 - @HassiaiPosted over 1 year ago
Replace<div class="container">with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html
Always begin the heading of the html with <h1> tag because the <h1> is needed to make the content accessible, wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.
Give the body a background-size of contain, this will stretch the image on the entire width of the screen.
To center the section on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
USING FLEXBOX: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
USING GRID: body{ min-height: 100vh; display: grid; place-items: center; }
For a responsive content, there is no need to give the section a height rather give the second div in the section a padding value for all the sides and replace its width with
max-width
.Hope am helpful.
Well done for completing this challenge. HAPPY CODING
0
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