All solutions

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

Took my time with this one and came back to it a few times over a couple of weeks. I guess it's a fairly simple exercise, but I tried to focus in on a few areas:

• Making use of what I think are correct HTML tags
• Ensuring CSS is well structured with block element method naming
• Making use of variables and responsive units of measure
• Testing from the begining with 320px in mind
• Adding comments to html and css to explain the approach.

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

Nothing significant, a bit of reading up on formatting list markers and the different ways to do it, and I had to look up table formatting guidelines.

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

For some reason I couldn't seem to get the 'Outfit' font to apply to the ordered list markers. It seems to show up when inspecting, but the actual digits displayed look wrong.

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

I decided to try and go a bit further than the template and add a second verison with colour and content adjustments. I used JavaScript to do this. I found this experience useful as I learnt a little bit about inheritence and precedence when trying to switch styles between CSS items with id selectors using classes. I also hadn't realised getElementByClassName returned a live collection vs. documentQuerySelectorAll returning a static nodelist.

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

Just getting used to precedence.

Was initially a bit unsure on whether to use alternate classes in CSS for styling changes or whether to hard code the alternate styles values in JavaScript. I decided on the former approach as I think it's easier to manage future style adjustments if all style factors are in CSS. I think the content changes have to be hardcoded into JavaScript, at least without having a database?

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

Wondering if my JavaScript approach is relatively efficient or if there are better ways to do this?

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

I feel like setting the main frame of the card as a flexbox, and utilising flex alignment settings along with padding makes it easy to add the various inner elemements with minimal CSS adjustments to them.

I also set up all the colours and the base paragraph font as variables. I then used calc() to adjust font across elements based on the base paragraph variable rather than using rem or %. I felt this approach makes it easier to adjust on a relative basis to the base paragraph.

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

No major challenge. Variable fonts were new, so it was a learning experience to find out how to reference them in CSS.

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

I was wondering about good practices on images within containers.

In this exercise I kept default content box settings and I use a width and padding on the container. It was then easy to specify the same width for the image element.

But from a responsiveness point of view, is this the best way to approach images. Specifying width in px of image and container, or is there a better way to do this. For example I remember there is object-fit which can crop an image to fit a container, would this have been better?

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

I'm very happy to have worked through and learned how to use git from the terminal.

In terms of HTML and CSS I think my solution was fairly straightforward. I used %vw and % of container in my sizing so I hope it's decently responsive. I also used variables which I want to get into the habbit of doing.

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

Nothing serious. I had to look up a few things as refreshers:

• Structure of the google fonts stylesheet links
• Using max() for font sizes
• Aligning items in flexbox.

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

I would be happy to receive any feedback on accessibility or responsiveness good practices that I may have missed.