Using Vanilla HTML/CSS for Results Summary Component
Solution retrospective
I decided to focus on vanilla HTML/CSS since I'm a complete beginner and wanted to practice in understanding the fundamentals before introducing things like Sass into my workflow.
When making the projects, I had a hard time understanding how to break the components into different parts, resulting in me needing to restart the project. Initially, I was trying to tackle different parts of the design all at once which ended up making things really messy. Eventually, I came up with a result by taking it by the outer layer of the design before going into the details, but I definitely feel like I could have made this more efficiently.
My main question is about best practices: how does someone start off their HTML/CSS before building on top of that foundation to create the rest of it?
Thanks!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @tpercival01
I believe you have the idea down quite well.
Personally I like to start how the Readme suggests: build your html first. Just look at the design and decide what components you need, perhaps even researching typical HTML elements used for certain aspects, i.e. flexbox or grid for positioning elements within an element. Then when you're happy with the structure, start adding your CSS in segments; top-to-bottom, right-to-left. I prefer to work on getting the general styling down for everything before going back over with all the colours, shadows, etc.
Marked as helpful - @taco-neko
Can you explain what exactly you mean by breaking the components down and starting from the "outer layer"? I think I get what you mean, but the wording is confusing for me and I don't want to assume only to get it wrong. If you could elaborate a little more on what your workflow was I could offer some advice on it.
Personally, I always start with getting the basic layout of the page down without worrying about styling until everything is in the right place. Your HTML is well structured, with the exception that you don't have a
<main>tag. Just wrap your whole card in that, and it should be good.One piece of advice I'd like to give you based on your code: avoid
display: table. It's really rare that you'll ever need to use it,flexorgridis a much better (and simpler) option for this kind of layout. I think you could have simplified the CSS for the summary elements a lot.I think despite the troubles you had, you nailed the design down pretty well! Keep it up!
Marked as helpful
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