
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
While I ended up changing how I was going to style certain elements partway through, I was able to learn a good bit about additional topics like styling the counters on the ol
and li
elements, and border-collapse
on tables.
The two trickiest parts for this were probably the table and the counter styling for the ol
element.
- For the table, I was uncertain how best to approach a vertical layout and considered using flexbox or grid instead, though ended up with a much simpler implementation of a regular
table
element that I feel is cleaner and works better semantically. - The
ol
styling ended up with me in a rabbit hole which brought me to thecounter-rest
andcounter-increment
properties, which I do think will be very useful to utilize in the future. But then after an entire complex look into that and other potentially redundant styling methods, I looked at the the dev tools one last time and saw::marker
exists. That makes things a lot easier.
Are there any alternative approaches I probably could have used for any parts of this, especially with the ol
styling? At this point I'm not too sure if the methods I used are redundant or if they work well, but any pointers are always appreciated!
Community feedback
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