@Maryamhussein
Latest solutions
Responsive page using Flexbox, CSS custom properties and semantic HTML
#accessibilitySubmitted about 3 years ago
Latest comments
- @Christ-Kevin
Hello,
nice challenge. To center your body horizontally it's quite easy. remove the height you wrote and use "min-height: 100vh" for your body. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
Happy Coding
Christ
Marked as helpful - @MisiaczekOOO@Christ-Kevin
Hello, to avoid the Error "Image must have alternate text" you have to add the alt attribute in your image tag. This link(https://www.w3.org/WAI/tutorials/images/decision-tree/) helps you to decide what alt you can use. I also noticed that your image does not change on hover as it have to. To do this you can put your image inside a div container and then use another div container that will contain the eye(The eye image have to be added via css with the background image css property ) that will appear on the hover state.
Chech my solution here(https://github.com/Christ-Kevin/NFTchallenge/tree/main) to get more infos
Keep coding
Christ
- @jantoma@Christ-Kevin
Hello congrats on uploading your solution.
my suggestion is that you should use only one main tag as the child of the body to get rid of the warning "All page content should be contained by landmarks". I also noticed that you forgot the hover state on Equilibrium and Jules Wyvern. But in general your work is great.
Keep coding
Christ
- @pdroaq@Christ-Kevin
Hi @Pedro,
you have a nice looking challenge and I like how you use the transitions on your rating buttons. The only Issue that I see in your challenge is that a user can press on submit and get the thankyou message even if he has'nt clicked on a rating button.
A solution would be to disabled the submit button, when the user has not yet clicked on a button, or to display an alert message to the user when he click on submit althought he has not yet clicked on a rating button.
I hope this help.
Happy coding :)
Christ
- @arturo0427@Christ-Kevin
Hi @arturo0427, congrats on uploading this solution. I like how you used BEM in your HTML, and i'm impressed cause I never knew that it's possible to add an event listener to the container. I was always thinking that I should add the event listener to all the items using .forEach. I also like how you used your if ... else to avoid that the user press the submit button and a get an empty result, when he has not yet selected a rating.
The only recommendations that I can make is that to solve your accessibility issue you have to add at least one H1 tag in your html file "How did we do?" is a good candidate that can fit in one h1, but you would have to replace your sections in divs cause sections dont allow h2 as children. And you would've to put your two divs inside one main tag.
I really hope, this learn
Happy coding
Christ
Marked as helpful - @lheerme@Christ-Kevin
hi @guifrangolino,
i really like how you did this challenge. Your javascript file is the simplest one I've seen sofar concerning this challenge. I notice in your solution that the user is able to submit an empty "" rating even if he does not choose between 1, 2, 3 ... Would not it be a great idea if the using could submit his rating only after selecting one ? I'm just asking :). I mean that the button can be disabled until the user select a rating and then enabled after the rating has been selected
Nice job
Christ
Marked as helpful
