Design comparison
Solution retrospective
Yo everyone any feedback for this challenge.
Community feedback
- @dwhensonPosted over 3 years ago
Hey @errijahi lovely job on this one! š the site looks good and responds well at all viewports that I checked, here's a few points you might like to consider:
Mostly importantly don't confuse structure and style! At the moment you seem to have based the HTML elements you chose based on the size of the text you would like? I think I am pretty safe in saying this is not correct.
HTML should be for the page's structure only, with no consideration of what things look like, and then CSS can add the styles. So for example, in your solution:
-
Join our community should be a h1 as you have it, but the '$29' should probably just be a span styled to look big (also it's generally considered good practice to only have one h1 per page).
-
The the headings should follow a logical progression from there, with h2's, and then h3s if needed - with no levels skipped. In your example, 'monthly subscription' and 'why us' should be h2s for example.
-
Lastly also on semantics, I would suggest that the p tag under the 'why us' section should be a
ul
tag, with each item underneath an `li' tag. Again this will just improve the structure of the page and help people using assistive tech to use it.
One useful thing is to just remove the CSS link for and see how the page looks with just HTML. If you have the structure correct it should still make sense - even if it looks rubbish! I typically just work on the HTML alone first thinking only about structure and then return and do the CSS.
Hope this helps. Great work on this one it looks really nice!! š Cheers š Dave
Marked as helpful1 -
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