Responsive Testimonials Grid Section using CSS Grid and Sass Mixins.

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

In this project, I was able to create a reusable CSS styles using Sass mixin feature. I was able to declare a set of CSS styles for the cards that I will be using for each testimonials. I just needed to declare it once and then reuse it everywhere which makes my code shorter.

I also used partial sass files to separate the base CSS styles and CSS resets styling, reusable CSS styles declared with Sass mixin and use it in my main CSS styles for the project.

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

The first challenge that I encountered is how I can use grid to create the layout for this project. So, I started reading some articles and researching more on this topic. After some careful reading, I was able to use CSS grid and implement the layout. Not the best implementation but good enoung.

The second challenge that I encountered is how I can write a reusable CSS styles that I can reuse for each testimonials. I decided to create a reusable CSS styles because I noticed that there are some common patterns each testimonials card has. So, I did some research I found the Sass will be able to help me with that with its mixin feature. I read more about this feature and afterwards, I was able to implement it in my project. Maybe far from perfect but it is good enough.

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

I wanted to gain some feedback on this project and how I can improve the code. Here is the list of my questions:

I declared my CSS grid layout template using this code:

main {
    height: 90%;
    width: 90%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 24px;

    @media screen and (min-width: 64rem) {
        height: unset;
        grid-template-columns: repeat(4, fit-content(15.938rem));
        grid-template-rows: repeat(2, 1fr);
        gap: 30px;
    }
}

• Is there a better way of declaring the CSS Grid layout template for this project?

• Did I use the correct HTML elements to markup my HTML? What HTML elements do you recommend instead for each project components?

• Did I use Sass mixin feature to create reusable CSS styles correctly? I have a lot of parameters in my reusable CSS styles made with mixin, is that OK?

• Sass Mixin and Sass Inheritance has a common goal in mind which is the reusability of CSS styles in the project. Is it better to use the inheritance feature instead of the mixin feature or my approach is good enough?