Results summary component challenge responsive solution
Design comparison
Solution retrospective
I have mentioned a tricky solution I had to implement, in the README of this repository. The resources for this challenge also included some images as .svg files, fonts as .ttf files and some data as a .json file. I integrated the .svg and .json files into the webpage by directly typing in their code and linked the fonts from Google Fonts. I would appreciate any feedback to solve these issues.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have some 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, which lack landmark for a webpage
- So fix it by replacing the
<div class="container-full">
element with the semantic element<main>
in yourindex.html
file to improve accessibility and organization of your page.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>
or<span>
- They convey the structure of your page. For example, the
<main>
element should include all content directly related to the page's main idea, so there should only be one per page
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1@harigsr1998Posted over 1 year ago@0xAbdulKhalid Thanks for the feedback. I am interested and it is helpful. I just haven't yet gotten to learning about semantic elements (that name itself is new to meπ ). Will try to update these solutions once I've learnt those. TYSM for the feedbackππππ
0 - @DamsithcoderPosted over 1 year ago
GREAT job .well done . if you use the main tag for the first div in your html code ,some issues might disappear in your code
<div class="container-full"> to <main> keep codingMarked as helpful1@harigsr1998Posted over 1 year ago@Damsithcoder Thank you for the info. I have read about <main> tag and such but haven't gotten to learning about it yet. TYSM for the feedbackππππ
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