Responsive Article Preview Component (#Html5, CSS, JS, FlexBox)
Design comparison
Solution retrospective
Another JS project complete !!! Took quite a while but I got through. Any ideas to make my solution better are highly welcomed. Thanks
Community feedback
- @dusan-bPosted about 2 years ago
Hello Macaulay,
I've just looked at your code and I like your solution. There are just a few changes I would consider.
Headings
Always start with
<h1>and avoid skipping heading levels.For more information visit: <h1>–<h6>: The HTML Section Heading elements
Centering HTML elements using Flexbox
Although you've used the right flex properties, you may have noticed that the content isn't centered properly. To fix that you can specify a full height to the
<body>element by addingmin-height: 100vh;and removing the verticalpadding.Hope this helps!
Marked as helpful0@MacChristoPosted about 2 years ago@dusan-b Thanks for your reply. I will do just that. Regarding the always start with <h1>, What if the solution didn't require a <h1>?? What then do I do?
0@dusan-bPosted about 2 years ago@MacChristo Actually, each web page of a website has or should have a single
<h1>element that describes the most important content on the page.However, if you are working on a small project which contains let's say a single component without heading, like a very simple card, this would probably be one of the rare cases where you don't add a heading, since it's just a component that it's likely to be inserted into an existing web page.
Hope that makes sense. If it's still not completely clear to you, just check out MDN's article that I mentioned earlier.
Happy coding!
0
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