Design comparison
Solution retrospective
This was a really fun challenge. I could have saved myself a few headaches if I have really sat down and thought out the process before typing out the HTML, but the javascript turned out to be a lot more simple than I anticipated. Lots of CSS for such a small component, if anyone can suggest betters ways of doing it I'd love to hear about it.
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hi, Stephane Baroux! 👋
Good work on this challenge! 👍 Your solution looks good and works well! 👏 It's good to hear that enjoyed working on this project! 😀
A few very small things I suggest are,
- Adding
cursor: pointerto the range slider. - Taking a look at your solution report and trying to clear up some of the errors that are there. You need to add the
alttext to some of the images you've used on the page (or simply addalt=""if they are purely decorative images, as they seem to be in this case) to improve the accessibility of your solution and make sure to add a heading to each<section>tag you use to identify it. And don't forget to label the range slider in some way! 😉
Keep coding (and happy coding, too)! 😁
1@steppan26Posted over 3 years ago@ApplePieGiraffe Thank you so much for taking the time to take a look at my project and actually make comments.
I did pick up on the "alt" issue and I had already fixed it, but I haven't yet uploaded the fix to git as I also noticed some compatibility issues with browsers other than Firefox that don't display the slider "thumb" correctly.
Great point about the cursor on the range slider, that had completely passed me by.
In your opinion <section> tags should always have headings? even if your design doesn't require one? What would be the solution here? Would it be better to use a different tag or can I create an empty heading that's there for accessibility?
1@ApplePieGiraffePosted over 3 years ago@steppan26
Hmm... I think that, generally,
<article>and<section>tags should always contain headings to identify them for accessibility purposes (and it's better for SEO, too). If you don't have a visual heading in the design, you could always include a heading anyway (that contains some meaningful text, of course) and visually hide it using ansr-onlyclass so that it doesn't appear and affect the layout and stuff. 🙂In this case, I don't think the attribution of the page needs to be inside a
<section>tag because there just isn't very much content in it—another tag like<footer>(which doesn't require a heading, I believe) might be a better choice.You could load your JS in the
<head>of the page instead (just add thedeferattribute to the script tag so that the HTML loads before the JS runs), which is actually slightly faster than putting it in the<body>.Cheers! 😀
Oh, and hey, if you found these tips helpful, an upvote would be appreciated! ;)
1@steppan26Posted over 3 years ago@ApplePieGiraffe Oh wow, thanks for the fantastically detailed response. I opted for the <article> tag as I had come across it and documentation didn't seem to suggest that it needed a heading to be used. I have not come across the but I will certainly look into it. I have been learning through a very good and detailed Udemy course, which is where I learnt to put tag and put it in the header, it frees up the footer.
1 - Adding
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