A Mobile first Responsive landing page using scss and flex-box & grid.
Design comparison
Solution retrospective
Spent time trying to get the right html structure. Also really lacking in accessibility properties, an area I'm looking forward to improving on.
Community feedback
- @dwhensonPosted about 3 years ago
Hey @talentlessDeveloper (nice name - I have no talent either, but I find persistent hard work and luck makes up for this!). Lovely job here š
Here's some comments focused on the HTML as that is what you are working on:
ā¢Ā I'm not sure you need to wrap your logo in a
figure
element, or many of the other images. You can just add theimg
directlyā¢ For your alt text, please remember that this will be read out by screen readers so the text should describe the image. It shouldn't be a file name/class descriptor like you have.
ā¢ I think that your button in the first intro section should be a link. It's worth having a google and reading up on the difference between
a
andbutton
elements.ā¢ Inside your features section, I would suggest that you might consider putting these items in a
ul
rarther than adiv
. This will announce to people using assistive tech how many items then can expect.ā¢ Similarly for the testimonials, you could consider wrapping these in a
ul
as well for the same reasons.ā¢ In the form, I would consider adding the
novalidate
attribute to the form using JS, that way if JS fails for any reason, you can fall back to the browser validation.ā¢ I would put the list of links to other pages in the foooter inside a
nav
element. It's fine to have more than one on a page.Aside from the basics of alt attributes on your images, and not removing outline properties (or adding a styled alternative) I wouldn't worry at this stage about accessibility too much at this stage. If you focus on getting the right HTML element for the job, you are already 90% of the way there. Once you have that down you can go on to think about some of the finer points...
Hope this helps - Lovely job over all š
Cheers š
Dave
Marked as helpful6@talentlessDeveloperPosted about 3 years ago@dwhenson Thank you for taking time out to help Dave, this is helpful.
0 - @fidellimPosted about 3 years ago
Hi!
Great work finishing the project! Just a suggestion I would like to share, you can change the media query width of your footer from around 640px to 760px, the site is not responsive. This is because the social icons on the footer prevent the footer from shrinking.
I hope it helps :)
Marked as helpful1@talentlessDeveloperPosted about 3 years ago@fidellim
Hey!
Thanks, would check that out, also thank you for the regular tips, it's well appreciated.
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