Design comparison
Community feedback
- @Bayoumi-devPosted over 2 years ago
Hey Gabriel, It looks good!... Here are some suggestions:
Document should have one main landmark
, Contain the component with<main>
.
<main> <div id="advice"> //... </div> </main>
- An
img
element must have analt
attribute, to provide alternative information for an image if a user for some reason cannot view it, but in this case, add an emptyalt
attribute to avoid the accessibility issue because it is an unnecessary icon for the content.
<img class="divider" src="assets/images/pattern-divider-desktop.svg" alt="">
- use
<button onclick='generateAdvice()' id="advice-btn">
instead of<div onclick='generateAdvice()' id="advice-btn">
... Buttons are used for actions
<button onclick='generateAdvice()' id="advice-btn"> <img class="btn" src="assets/images/icon-dice.svg" alt="Advice Generator"> </button >
-
Page should contain a level-one heading
, Changeh3
toh1
You should always have oneh1
per page of the document... in this challenge, you will useh1
just to avoid theaccessibility issue
that appears in the challenge report... but don't useh1
on small components<h1>
should represent the main heading for the whole page, and for the best practice use only one<h1>
per page. -
Use
REM
for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed... See this article ---> CSS REM – What is REM in CSS?
Hope this help!... Keep coding👍
Marked as helpful1@gabrielbarrosgPosted over 2 years ago@Bayoumi-dev Thank you so much for the feedback, Ahmed 😁. Your suggestions were very helpful, I'm definitely gonna improve my codes.
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