Design comparison
Solution retrospective
This is my solution please any tip that can improve my code would be appreciated. Thank you.
Community feedback
- @abdullah43577Posted over 1 year ago
Hey Ekene, great job taking on this challenge, After I've read what the other user-posted earlier, then what I've got to tell you is little. using
display: grid;
for websites like this, makes your styling much easier and faster.These kinds of websites are best built using grid.
There is a lot of documentation online talking about how grid works and tutorials on youtube as well. You could try implementing it in one of your future projects and see which works best for you.
Happy coding
0 - @Finney06Posted over 1 year ago
Hello there ๐. Good job on completing the challenge !
Here are some suggestions regarding your code that may be of interest to you.
HTML ๐ท๏ธ:
To clear the Accessibility report:
-
Wrap the page's whole main content in the
<main>
tag. -
Always avoid skipping heading levels; Starting with
<h1>
and working your way down the heading levels (<h2>
,<h3>
, etc.) helps ensure that your document has a clear and consistent hierarchy. -
Use HTML5 semantic elements such as
<header>
,<nav>
,<main>
,<aside>
, and<footer>
to define these sections. -
Use ARIA landmarks such as
<header role="banner">
and<footer role="contentinfo">
to provide additional information about the purpose of each section to assistive technologies.
Here is a web accessibility evaluation tool๐ to check your webpage for any remaining errors or warnings related to landmarks.
I hope you find it helpful!๐ Above all, the solution you submitted is ๐. ๐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