All solutions

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

1. Tried my best to make my solution pixel perfect and responsive

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

1. BEM & SCSS to make the code clean and well structured
2. Divided SCSS code into different files to make working with styles and debugging easier
3. Added h1 heading for accessibility reason and hid it from UI with .sr-only class
4. Used aria-label attribute for article elements to enhance accessibility
5. Used grid-template areas to position cards inside the grid

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

Would love to receive feedback on how clean and well structured my code is. Other than this, I'm always open to any other feedbacks!

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

When styling, I usually envision the desktop version first. However, this time I took a mobile-first approach, which proved to be a bit challenging. Centering elements and maintaining balanced spacing while considering different viewports and responsive layouts was little difficult. Despite these challenges, I think the result turned out well

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

I always try to come up with the best possible names for my elements and variables. I welcome any suggestions for better names or any other improvements

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

1. Most elements have different margin-bottom is mobile viewport. I had to use media-query for each element separately which caused code repetition. Instead I replaced it with sass mixin and a loop to apply style properties passed as mixin arguments. I couldn't use hard coded arguments since each element can accept different styles

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

1. Used @font-face to use local fonts
2. Used CSS clamp() to make fonts responsive without using media queries