Design comparison
Community feedback
- @kodan96Posted 5 months ago
hi there! ๐๐ป
A couple of tips:
HTML:
-
all content within the
body
should be wrapped in landmarks. these landmarks are the header, main and footer HTML tags. for a project like this you at least a<main>
tag. -
semantically its more meaningful if you wrap your social links (which are not even anchor tags at the moment) in a ul and separate li tags:
<ul> <li><a href="#">Github</a></li> .... .... </ul>
-
<div>
-s shouldn't contain plain text, try to use semantically correct text-based HTML tags for your text -
all HTML document should contain an h1 tag
-
if you close the entire thing into a container you can move them all together, now you just positioned sections one by one, which is why your layout is all over the place as you resize your browser window.
CSS:
- dont't specify width or height to your containers explicitly, especially not using pixels. again, if you wrap your content into container divs, it will adapt to the content's size automatically
Hope this was helpful ๐
Good luck and happy coding! ๐
Marked as helpful2 -
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