All solutions

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

the alignment of the bullets with the heading tag...overcame it by applying the styling to the 'ol'/ 'ul' tag. the nutrition section of the recipe card...read another developer's solutions, realized I could table and its related tags.

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

The nutrition section a border-bottom for the last 'tr' tag. I created a '.tr' class just to not apply the border-bottom

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

I used to have issues with centering the card onto the center of the page, I was told about min/max height from a reviewer had given a solution to it in a previous challenge, Thank you! and that was fixed.

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

On 'role' or ARIA as landmarks... Is it better that I make it a good coding practice early on? and feel free to give any other tips and tricks for later projects!

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

Challenge #1: Getting the black background for the preview card:

• I initially was going to use two cards, one the preview card and the other a black-color background card. I had to learn a bit more on 'position', its types and got some understanding on how it works. I was already having trouble positioning/arranging the cards just right...figured developing the active state for it adds more complexity. So I looked into the solutions of others and saw one use 'box shadow' instead of how I did it. It was a lot more straightforward compared to my approach. So I used 'box-shadow'.

Challenge #2: Developing the active state.

• The logic goes as follows (for me at least)- Hover over the h1 (child) tag and affect the preview-card (parent) tag.
• But I hadn't come that right off the bat. At first I had developed the hover effect separately, the outcome was an odd one. Hover over the h1 tag, get it to turn yellow. Hover over the preview-card, get it to increase box-shadow.
• Realized 'Hang on! I should hover over the h1 tag and get it to turn yellow and the preview card to activate its hover effect simultaneously'. Didn't want to resort to ChatGPT...did a bit of searching around, found out about has(), not(), etc. Finally, found an article on stackoverflow mentioning 'pointer-event' and then problem solved!

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

I'd like help with figuring out how to make the preview card exactly centered. Its centered horizontally, but not vertically. Despite, justify-content and align-items...perhaps I put it in the wrong tag? should I put it in the body tag directly?

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

I would like to have known a better way to make the design responsive, like using media queries but I didn't see the need to so in this project. Perhaps there was a better way for the padding/margins to be coded in the way they were coded.

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

Not much...had some IDE issues, but got it resolved.