Recipe Page using Sass/SCSS and build with Vite

What are you most proud of, and what would you do differently next time?

I’m really proud of pushing through the difficulty of getting the mobile-to-tablet design transition smooth. It took a lot of trial and error, but I made it happen!

Also, even though my mixins weren’t super complicated, they definitely made my life easier and made the code more readable. Here’s one of them:

@mixin text-preset-1(
$font-family:'young-serif-regular', 
$font-weight:$font-weight-regular, 
$font-size:$font-size-xl, 
$line-height:$line-height-default, 
$letter-spacing:$letter-spacing-default) 
{
    font-family: $font-family;
    font-weight: $font-weight;
    font-size: $font-size;
    line-height: $line-height;
    letter-spacing: $letter-spacing;
}

Next time, I’d probably spend a bit more time studying the design and really thinking through the details, especially when it comes to layout for different screen sizes. I think that would save me a lot of time since I had to restructure my HTML a couple of times.

What challenges did you encounter, and how did you overcome them?

The biggest challenge I ran into was getting the mobile-to-tablet design transition just right:

• On mobile, the image as wide as the screen and only the content has padding.
• But on tablet, the image and content have the same width and the padding is mutual.

To get this right, I had to take a step back, look at my HTML structure, and rethink how to approach it - I ended up restructuring it a couple of times until everything lined up properly.

What specific areas of your project would you like help with?

I’d love some feedback on my code structure, especially when it comes to:

• The way I’ve organized my mixins and variables
• Any potential improvements to the modularity of my code
• Suggestions for improving my HTML structure, particularly around semantic elements and accessibility

Any tips or suggestions would be super helpful!