Responsive landing page with grid and background images.

Solution retrospective
I fixed the HTML validation errors.
But here's a question for the community: what do you do about the info messages about headings? Supposed the design does not lend itself well to having headings? Not to say that I couldn't have made some headings in this design but I am curious how we manage those situations where there is nothing to put in a h1-6 section... thoughts?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hi
What is it about this that you think doesn't lend itself to using headings? They are essential for giving semantic meeting to a page's contents, and they need to go in order in the html. You can change their order via css if needed, if that's what you mean.
Marked as helpful - @grace-snow
Now I'm on a computer and able to inspect I can give more feedback for you
- You need a h1 on the page. This is essential for content structure (accessibility) and SEO. Heading order is the most important part of html semantics, followed by element choice
- It looks like you are definitely misunderstanding when to use padding vs margin. Padding is to create space within an element, like a box, when you want to keep content away from edges. Margin is for spacing between elements, like headings, paragraphs, buttons etc.
- What would you expect to happen when someone clicks 'download'? That may be ok as an anchor tag, but I suspect it may be the wrong element choice there
- If using svgs inline like this for those decorative numbers, they need to be aria-hidden. They definitely do not belong in a section. (p.s. did you create these? Or did they come with the starter files?)
- Not essential, but you are cluttering the html with a lot of content in empty divs or that get's ignored by screenreaders. For example, those header images could be in the html (that would be much easier) or they could be in pseudo elements rather than empty divs which is generally considered bad practice. Similarly, those numbers could be in pseudo elements, or even those two sections as list items in an ordered list with the 01 and 02 as the counter elements.
- No sections should ever be outside of other landmarks (in this case main)
I hope this is helpful
Marked as helpful - @shashreesamuel
Hey good job completing this challenge
Keep up the good work
Your solution looks great however I think that the title of the website is supposed to be a bit bigger. Secondly the images need to be a bit bigger as seen in the design
In terms of accessibility issues simply wrap all the content between main tags
I hope this helps
Cheers Happy coding 👍
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