All solutions

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

Though I am still a practitioner and need much more practice, I am very proud that I understand each line of HTML and CSS! Something I want to do differently next time is to initially understand and expect what the page will look like on the desktop as well.

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

One challenge I encountered was altering the bullet points to a smaller size, and I figured out that by using ::marker and font size, you can alter them however you want!

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

I was unsure if using another div (.recipe) inside another div (.container) is efficient. I initially had issues when using paddings inside the .container div while leaving the image to fit fully inside the container. So, I decided to place another div (.recipe) to make it separate from the image. Later on, using a media query, I placed 0 padding to the div (.recipe) and added the padding to the div (.container). (I hope this makes sense... 🥺)

By learning that trying our best to keep HTML clean at most, I was unsure if using another div (.recipe) inside another div (.container) would be a nice practice.

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

I am most proud that I am getting familiar with flex, width, and heights. I can also now see how the box model is working, and not just having the 'knowledge/notion' of it. Due to the past challenges and feedbacks, I am now seeing how I can manipulate the CSS!

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

When aligning the card in the middle of the page, the card constantly shrank due to using align-items; center. But I figured out using main to wrap around the card is a way to place the card without shrinking it!

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

The container's padding difference in the card. I can see that the card's padding for mobile is narrower than the desktop. I really tried my best to figure out what I can do instead of using media query.. but could not ):

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

It feels like I could read and understand CSS much more than my first challenge. Especially when it comes to min/max-width, min/max-height. I am proud that most of the CSS units I used are not px!

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

Comparing to the last challenge, I noticed that using flexbox on the HTML tag did not work like the last challenge, instead it only worked by implementing it on the body tag.

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

I would love help with understanding why the flexbox for html did not work like the first challenge (QR Code Component) and only worked in the body tag to center the card. I would also love it if there is anything to optimize my HTML and CSS!

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

Using :root to initiate the assets (typography, spacing, and colors)! Next time, I am going to make sure to use rem instead of px for text and initiate my CSS with CSS reset.

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

min-width, max-width, min-height, max-height, width, height, usage of rem and em was very confusing! I had to go back and re-think the layout several times. I will have make sure I have more thorough knowledge with these!

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

Why I need to use min-height: 100svh instead of just height was very confusing.

Also, it would be helpful if my mentor could help revise my HTML and CSS, and identify what is unnecessary.