Design comparison
SolutionDesign
Solution retrospective
1st challenge and new to CSS so took me a while. Plenty of YouTube (Kevin Powell!)
Community feedback
- @KoiHastPosted over 1 year ago
Hey, great job on your first project! If you want, here are just a couple of tips to improve your code a bit ^_^
- You want to wrap the main part of your HTML in a
<main>
element, just to improve semantics and readability. - This one is more for FrontEndMentor itself, but to avoid getting the "Pages should contain a level-one heading" error message in your accessibility report, you can just add a
<h1>
at the top of your page and hide it using CSS. It's kind of a cheatsy way, but since FEM doesn't recognize that these are only components and not entire web pages, it judges them as if they are, so you have to kinda work around it. - Instead of using classes for the different stylings that you did on your
<h3>
and<p>
elements, you can just use a combinator selector likeh3, p { }
to style your text. For instance, yourtext-padding
andtext-center
styles could've just as easily been put under a selector forh3
andp
, and you wouldn't have had to make so many classes. It just makes for an easier time for you and keeps you from having a million classes on everything. You don't want to depend on classes as your only method of styling. If you can get your styles across using element selectors, then that's usually a better way to go.
I'd analyze your CSS, but I'm still learning a lot of those rules myself, so I don't want to steer you wrong. I hope the HTML tips help you out, though! 🌺✌
Marked as helpful1 - You want to wrap the main part of your HTML in a
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