n/a
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?n/a
Hey, great job! Consider changing the width of the grid-container to width: min(95%, 70rem).
Also, try changing grid-template-columns: 20rem 20rem to grid-auto-columns: 1fr. Reason is because, if you enter responsive design mode on your browser and shrink it down, there's a certain width where it doesn't switch to mobile layout, but it stops shrinking--it just gets cut off. I think changing those two properties will help solve the problem. Also maybe adjust your media query breakpoint to like 768px or something that it breaks sooner!
I had done this challenege before, now i know better on semantic html
Nice job! I would enter responsive design mode in your browser though, because it starts doing some crazy things as you shrink the page.
Understanding how to get the exact design when using media queries. And thought process for a solution. And live hosting using github
Hey, looks great! I would check the mobile layout though, using responsive design mode in your browser (or just resizing browser), because the mobile layout is all messed up!
I wouldn't use a percentage for the width of your image, because it gets stretched/squeezed in a weird looking way as you resize the browser. Instead, think of the card as a flex container containing two items: img on one half, and content on the second half. In desktop, it's flex-row, in mobile, it's flex-col. So, the image should only take up 50% of the card, and the card should only get resized at a specific point. I think in this case, do avoid the weird stretching/shrinking, I would have two fixed widths for the cards (see Figma designs, if you have pro, otherwise just estimate), and then use a media query to switch between the widths/flex-direction.
Nice job!! I am especially impressed with your CSS. I totally forgot you could nest CSS like that! Also great job using more responsive units like rem and em. I still struggle with using those over px!
Minor
Very minor
<section></section> tags instead of <div></div> to distinguish between your different "sections" (preparation, ingredients, instructions, nutrition).I'm proud to have managed to come up with such a similar replica with so little experience!
What challenges did you encounter, and how did you overcome them?My biggest challenge was knowing how to identify which tags to use and how to set up the link structure in HTML. I chose to use a list, it worked even though I didn't know if it was correct to do it that way.
What specific areas of your project would you like help with?I would like help with the a tags, I would like an opinion on whether this is correct or if there is a simpler way to do it. thanks!
Amazing job, Josiane! That looks amazing. I have a few comments (since I am encouraged to give feedback :) )
<nav>
<a href="/linktoyoursite.com" alt="link to ____ site">Website</a>
<a href="/anotherlinktoanothersite.com" alt="same thing">Another Website</a>
</nav>
It is common convention to use <a> (link) tags for anything that takes you somewhere else (i.e., to another website). It also makes styling easier, you just have to set text-decoration: none to get rid of the underline!
.social-link:focus {
background-color: // whatever color
}
I'm proud of being able to apply my learnings with Flexbox, responsive page for mobile view, and just a bit of transition.
What challenges did you encounter, and how did you overcome them?I had a bit of trouble making the page responsive for mobile view to cater mobile users so I researched and found that by using width: min(350px, 90%);, the page appears correctly.
None that I can think of since this is a simple project.
Nice job! My only feedback would be that it doesn't quite match the design. The card needs more of a border radius, and the gap between elements needs to be increased. Also, I'm not sure if you used the font, because it looks a little different?
Overall, excellent implementation! Just some smaller styling details that could be improved!
Hey, did you complete the project? I was going to leave feedback, but all I see for you solution is some text.
