All solutions

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.

What challenges did you encounter, and how did you overcome them?

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 the counter-rest and counter-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.

What specific areas of your project would you like help with?

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!

What are you most proud of, and what would you do differently next time?

This was one where I definitely had to go back and adjust my classes and HTML tags a few times as I ended up realizing better ways to accomplish what I was trying to do partway through, especially with styling button-like anchors, but I feel like that helped me get a better grasp on how better to handle them from the start in the future. I also learned some nifty ways of making elements easier to resize during development and for responsiveness.

What challenges did you encounter, and how did you overcome them?

I had to reconsider how implement button-styled anchors if I wanted the text to be styled on its own colored background, especially since I wanted a way to make it easier to adjust if the size of the buttons were to change, so I ended up with the following:

:root {
    --button-height: 2.2rem;
}

.socials-main ul li a {
    height: var(--button-height);
    padding: calc(((var(--button-height) - 1em) / 2) - 0.125rem) 0;
}

What specific areas of your project would you like help with?

I'm pretty happy with how this turned out, but I had to do a good bit of improvising and adjusting as I implemented my styling, so if there's any areas where I could have done better with keeping the code clean/avoiding redundancies or anything else of that sort, I'd be happy to hear it!

What are you most proud of, and what would you do differently next time?

I feel like my planning and development process while coding this went a lot more smoothly with my last project, and I was able to get more or less all of the HTML tags and classes I needed in place from the start. If anything, I probably could have skipped out on a few classes or containers, and simplified things a bit more, but I'm happy with the end result.

What specific areas of your project would you like help with?

This one was fairly straightforward for me and served as an opportunity to do some cleaner work from the start than on my last project, so I can't think of anything specific to call out on this one that I feel like I need to ask about - but I'm happy to hear any feedback or suggestions if there's anything I can do better that I haven't thought of!

What are you most proud of, and what would you do differently next time?

Ultimately I think I did pretty well at getting the size of the elements to match up with the design reference, though feel like I used too much hard-coding on the sizes for my preference.

What challenges did you encounter, and how did you overcome them?

I learned about clamp. I didn't end up using it since the research rabbit hole I was falling into on that topic seemed too time-consuming and excessive for what I needed to accomplish in this case, but learning new things is always a plus.

So anyway, I just ended up using my best guestimates to adjust sizes in pixels, which gets the job done if nothing else.

What specific areas of your project would you like help with?

What do you think, was using pixel measurements and hard-coding width/height a fine call here or was there a better solution that could work here? I definitely feel like designing things with responsiveness in mind is one of the trickier things for me to wrap my head around at the moment.

Updated: After updating the CSS, I've now utilized rem units and max-height/width to provide better responsiveness on especially small screen sizes, courtesy of advice from @weldu0.