All solutions

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

It was a little scary to finish mobile layout only to see the desktop mock, with the whole card on its' side. But this problem highlights the beauty of CSS selections. I simply changed the container flex direction, resized the div, and pleasantly surprised how far along it got me.

I also noticed I'm wasting dev time on fine-tuning spacing one section at a time. I think if I start with the bigger changes across all elements (eg. font size), I will spend less time double-handling fiddling with margins to get it perfect.

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

I struggled most of all with the icon. My initial approach was an old school , but struggled to find the control I needed. I eventually tried a class to insert image via CSS, and instantly found control much easier.

I refactored HTML in the desktop stage, to wrap text content in a container for center-aligning. I think it's still decent practice rather than a rookie mistake. There simply was no need in mobile portrait, but was a need for desktop landscape.

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

It felt like I spent a lot of lines fine-tuning margins. I possibly could get the layout in a more elegant way.

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

Wow - this was deceptively difficult! A well-planned crash course in working through details.

I really enjoyed the HTML stage, trying to foresight what CSS selecting I would need. It was rewarding to minimize the refactoring.

I enjoyed learning about the element for the elegant section dividers. It took some Googling to understand the border and color properties, but I found the options intuitive.

Most of all it was great to work with a grid for the nutrition section. I've long found grids intimidating. But simply getting the content in the right cells, and then gradually applying each style, I really surprised myself. Especially applying nth-of logic, ie. no bottom border for last two elements, odd divs are left-margin, even divs are brown and strong etc. seemed really easy and intuitive.

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

I spent most of the project time fighting with list bullet points. The standard list properties were simple to work with, and the ::marker pseudo allowed me to color and indent with detail. It was all smooth-sailing - until - the sneaky bullet point being vertically center-aligned over multi-line threw everything out the window.

I went back-and-forth between trying ::marker and ::before properties. A lot of the advice I found gave poor-practice solutions with mixed results, and nothing centered the bullet point. Eventually a Stack Exchange solution explicitly said ::marker simply can't vertical align. Certainty at last! I then committed to ::before, and found an example to flex and vertically center each for the win.

The last hurdle was the ordered list numbers reverting to system font, which stood out different to the design. I tried selecting every element involved, and even used inspect to go through all the property inheritances, but it was telling me different to what I was seeing. Again, Stack Exchange rescued by explicitly saying ::marker does not take font-family, but rather only the shorthand font property. A detailed read through the property syntax, and I was able to get it looking close to design.

I was really proud of myself for working through these details, when a lot of problem-solving seemed to be "it depends". With enough persistance I think I found the best solution to the list problems.

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

I'm not really sure if I used semantic elements all that well for this project. I read the W3 descriptions, but struggled to interpret how to apply them to a recipe context. At times I was as semantic as possible just to fulfill the brief, but not certain if my usage has any real-world benefits.

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

With the five buttons, I took the opportunity to try a grid layout for the first time. It was a very simple case, but good to get starting in working with them.

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

When using media query to largen container for desktop viewport, I realised link button widths were relative to container, rather than fixed width like design. I had to refactor button width to avoid double-handling for each viewport size.

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

None

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

I measured layout sizes in a photo editor to get exact number of pixels. Working with these measurements I was really happy with how similar the result came out.

Still getting used to how best structure CSS selectors.

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

For the "Learning" badge, I struggled to align the background color box around the text. Originally I specified width in pixels to make it center around the word, but not good practice if the word length changes. I ctrl-spaced and discovered the fit-content property, which combined with padding, seems like a perfect solution.

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

Not sure if I could have systemized my class selectors better. Felt like I was having to fine-tune individual elements a lot.

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

Very happy how smoothly I could build structure with BEM classnames. This allowed me to scope between elements and containers really intuitively.

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

Spent most of the time trying to vertically center the card block container within body. Online solutions looked very old and deprecated. I eventually realised it was easier to use flex rather than block.

My stomach dropped a little as soon as I changed the container display. Body text below image was now alongside. But with a quick Google refresher I remembered flex direction, changed it to column, and all the properties clicked into place beautifully.

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

None