Responsive Recipe Page with Vanilla CSS

For your file structure, I reccomend having an src folder where all of your CSS, HTML, JS and other code is contained. It makes it more organized and more maintainable. I dont reccomend putting them and mixing them with the other files in the root directory.

I don't reccomend having multiple CSS files for this. What you would do is use Sass partials and paired with the 7 in 1 architecture. Having multiple css files like this in your project makes it much more messy and you dont know what each CSS file does.

Using descendant / child / sibling selectors is typically a bad habit since it increases speficity which makes your CSS much more harder to override and the selectors are much more harder to understand.

To combat this, try using the BEM methodology in CSS. You might need to set a class name for every element and it is indeed verbose but it makes your CSS infinitely more readable.

For the media queries, use rem instead of px. Makes it more accesible and even if the user changes their default font size in the browser, it still looks good rather than having overflow. I don't reccomend using px for font-related properties such as font-size: and line-height. See why.

Using the native CSS functions too much like min, max and clamp are bad habits and should only be used on specific things such as font-size or typically a property that can't have a max or a minimum. Use max-width or min-height instead.

You should also use a CSS reset. It basically makes your CSS look the same on any device. It's pretty simple since you only have to copy and paste it in your CSS file. It should be used in every project aswell. Most people use Andy Bell's or Josh Comeau's css reset

To make your card truly responsive I advice you to use this technique:

.card {
width: min(600px, 90%)
}

This ensures that the card won’t get bigger then 600px but on smaller screens it will be 90% of the viewport . The min() functions takes the smaller number.

It is the same as:

.card {
width: 90%;
max-width: 600px;
}

Hope you found this comment helpful ❤️

Good job and keep going 😁😃😉

Looks, good