Design comparison
Solution retrospective
I tried to make it looking as close to the design sample as possible. Its actually very easy to make up the QR code card by using bootstrap card class. But I felt that I have too much classes for trying to place it in the center of the screen as well as trying to put a frame behind it. Hope you can share your solution to this oneοΌTHANKS!
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the 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, "All page content should be contained by landmarks" is due to
non-semanticmarkup, which lack landmark for a webpage
- So fix it by replacing the
<div class="container">element with the semantic element<main>along with<div class="attribution">into a<footer>element in yourindex.htmlfile 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
HEADINGS β οΈ:
- And, this solution has also generated accessibility error report due to lack of level-one heading
<h1>
- Every site must want at least one
h1element identifying and describing the main content of the page.
- An
h1heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
- So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a
sr-onlyclass to hide it from visual users (it will be useful for visually impaired users)
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
0@mygodefiPosted over 1 year ago@0xAbdulKhalid I really appreciated your comments and learned a lot from that.
0@0xabdulkhaliqPosted over 1 year ago@mygodefi Glad you found this helpful ! π€
0 - @FabianWassermannPosted over 1 year ago
Great work! Here are some points for improvement.
- You should use a bigger border radius on the card as on the image.
- The card of the design has not border and a slight shadow effect.
I can not look at your code because you linked the wrong repo.
Keep it going!
0@Mitko90Posted over 1 year ago@FabianWassermann
It's quite simple actually
- right click > view page source (html) > click on the linked .css
0@mygodefiPosted over 1 year ago@FabianWassermann Thats very detailed aspects that I didnt pay attention to. Great suggestion! btw, its the right repo, if you check index.html, and css folder you will find the right file. Its one of my repos has been working on nodejs.
0@FabianWassermannPosted over 1 year ago@Mitko90 Your code is clean but I noticed that the bg-primary-subtle container overlays with the card when the screen height gets smaller than the card height.
0
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