Hey there, great job on the challenge! And well done expanding your knowledge to explore using sass mixins.
I took a look at your structure and I had a couple notes on what could potentially be improved in the future...
In terms of semantics
You have used header for the top half of the page and main for the bottom half. Personally this entire document could be in a main tag, the content in the header is too important for the context of the page to be in a header.
It can be a matter of preference, but I would put them both in sections.
However, the fact you are using semantic html is great! Really important to consider.
You asked for tips on styling, especially using sass for styles.
The use of mixins and variables is good! Especially since the card is getting reused.
If you want to continue using these tools for future projects one of things I like to use mixins for are utility styles for commonly used styles or media queries.
For example...
@mixin flex-column-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Then call it in another style
.some-class {
@include flex-column-center;
border: 1px solid green;
}
This is a good place to start when using mixins, but sass is actually far more powerful and later down the line you can start giving arguments to mixins like you would a JS function
@mixin flex-center($direction: row, $justify: center, $align: center) {
display: flex;
flex-direction: $direction;
justify-content: $justify;
align-items: $align;
}
But dont worry about this for now :)
And lastly, since I noticed it as I was finishing up.
on my display the cards are almost aligned with one another.
It looks like you may have used rem to set the size of the container/page. This is generally good practice, however if no base font size for rem specifically set in your styles then the layout will look strange on different machines/browsers due to the base font size set by them rather than specified by you, the developer.
All in all a great finished project, and the desire to expand your knowledge to something new (sass) is commendable! Well done
