Overall, I was able to match the design pretty well. I am also proud of how I handled the colors by inheriting the custom properties
What specific areas of your project would you like help with?I don't know if there is a better way to disable the grid areas when the content should be in a column. I fixed it by adding only the area for each card with a media query.
great code gg
I'll try to make my feedback useful to you. Compare to the original template: There are some points that aren't respected. Regarding the header and the writing. In your header semantics, you can use only an H1 and use a strong for the part you want to modify. For the colored part on the cards, you should use a border. If you want to respect the size of the template, using a ::before element is more appropriate. I saw the hover you added; it's great. Overall, it's very good work. Keep going. GG WP! P.S.: The background color isn't good either.
Very good work. Only some margin padding issues for the text. You could improve your semantics a little. Remove the CSS present in the HTML and put it directly in the file. Use variables for colors in CSS. Here are some areas for improvement. In any case, it's still very, very good work. Keep it up. gg wp
I need feedback on managing the width of a container as the screen size decreases. I've set max-width: 50%, which looks fine on larger screens, but it behaves oddly on smaller screens. To fix this, I currently use a media query at 1000px to make the container full width, but I'm not entirely comfortable with that approach. I'd appreciate suggestions on better ways to handle this.
Additionally, I don't fully understand border-collapse in tables. When I don’t include the following CSS:
.recipe__nutrition-table {
width: 100%;
border-collapse: collapse;
}
the borders don't appear at all, which seems strange to me. Can someone explain why this happens?
Why is the preview photo showing a white background at the bottom 20% of my page, while the live site displays correctly?
Can I get an explanation for this difference?
i dont know, i am sorry
Great Job. You can improve HTML semantics (header, q, nav, ul, li) your css is clean. GG WP.
Overall, the mockup is well respected. For HTML semantics, you could have used <time> for the date, and <figcaption> with <figure> for the author section. The CSS is well organized, and using variables for colors is a good practice. For the mobile version, more adjustments were needed, such as text size and reducing the tag under the image. Great work overall! Keep it up. GG WP. 🎉
