@R3ygoski
Posted
Hello Jacob, congratulations on completing your project, it turned out very well.
Regarding your question about how to define the height of the card, I would like to start by saying that the way you did it is not wrong, you did it correctly. The only tip regarding this would be to use margin as shorthand, like this: margin: 150px 0, which would apply the margin to the top and bottom and 0 to the sides. Additionally, you could use padding on your main selector as well, which would create the correct spacing inside the main element, something like padding: 150px 0.
A suggestion: I recently saw that you mentioned in one of your solutions about using a separate CSS file from HTML, which was absolutely correct, and I would like to say that you can also use responsive design this way by creating, for example, a responsive.css file where all the responsive CSS would be, thus bringing more organization.
Now a tip: try to use more semantic tags in your project, as this not only helps with SEO but also with the accessibility of the page. I noticed that you used several <div> tags, some of which could be replaced by these semantic tags. I'll list a few:
<div class="recipe-card">could be changed to a<main>since this tag contains the main content, but it could also be<article>as all the content here is self-explanatory and independent.<div class="img-container">could be changed to a<figure>since it contains only an image.<div class="content-container">could also be changed to an<article>, as the content is self-explanatory.
And again, congratulations on completing the project. If anything I said was not clear, please ask below and I will try to help in the best way possible.
