
Design comparison
Solution retrospective
I am really pleased with the layout and look. My main struggle was figuring out how to align the elements on the grid. Spent a bit of time at the beginning working on the SASS architecture. The code itself didn't really take me so long, I spent a lot of time doing research and looking at different ways to get the result.
What challenges did you encounter, and how did you overcome them?I think I spent most of the time on the cards, how to make the layout and spacing work for them. I had a look at other peoples solutions which was interesting to see how it could have been done differently. Also the box-shadow
was fiddly, I made a custom colour because the lightest one provided was too dark.
I chose to keep everything inside the grid. I have a min height and width on the cards which made grid alignment a little trickier. I wasn't sure if there was another way to fix the height/width of the cards without affecting the grid layout. I didn't want them to grow/shrink but wondering if I could have used a different method to achieve the same results. Thought about putting the headings outside the grid but the gap was too big. Also I was assuming this would be the component within a page so it should be all in one container.
Community feedback
- @vladyslav-shulhachPosted 3 months ago
Great job on your project! Here's what I noticed:
- Your project is true to the original design and the attention to detail is great!
- I'm impressed with your SCSS setup. Using a folder structure makes your code more organised and scalable, while I still use a single SCSS file.
- You've used advanced SCSS features such as
@use
and logic, which add flexibility and maintainability to your code. This is something I haven't explored much yet, so it's inspiring to see it in action!
However, I do have one small suggestion. To improve accessibility in your HTML, make sure you include
alt
attributes for images. This will help visually impaired users understand the content of the images through screen readers.To be honest, I can't give you any more suggestions for improvement because your SCSS code looks more advanced than mine. I feel like I can actually learn a lot from your approach!
Keep up the great work, and happy coding!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord