Testimonial Grid using SASS, BEM and CSS Grids
Design comparison
Solution retrospective
Hi Guys! Here's another challenge completed! Got to practice with CSS Grid system and helper classes. Any feedback in highly appreciated! Thank you ✨
Community feedback
- @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
The only headings in this component are the names of each individual; “Daniel Clifford”, “Jonathan Walters”, “Jeanette Harmon”, “Patrick Abrams” and “Kira Whittle”. Everything else should be wrapped in a Paragraph Element.
-
The Figure Element should be wrapping the entire testimonial not just the "card-profile", which will serve as the each individual component container.
-
The Figcation will serves as the ".card-profile" container, wrapping the image, name, and verified.
-
Both the bold testimonial and "regular" testimonial should be wrapped inside a Blockquote Element.
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout and give you full control of it.
Here is how it looks like fully implemented: EXAMPLE
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful1@debriksPosted about 2 years agoHi @vcarames! Thank you to have taken the time to look at my code! I will improve it in the next days following your advice. I’m not very used to CSS Grids yet but I definitely want to try out a grid-template-areas solution to train my skills more. Your solution looks amazing!!
Thank you again! Happy coding!
0@VCaramesPosted about 2 years ago@debriks
Glad I could help!
Here's a CSS Grid 101:
https://www.google.com/search?client=safari&rls=en&q=css+grid&ie=UTF-8&oe=UTF-8
Marked as helpful0 -
- @correlucasPosted about 2 years ago
Hey Deborah! I've just checked your solution and seems perfect. I've nothing to add here. The design is really closer to the Figma design, the html structure and semantics are 10/10 and also the
tablet version
breakpoint you've create is so good!Congrats =)
Marked as helpful1 - @debriksPosted about 2 years ago
Oh Thank you so much Lucas!! Really grateful you took the time to look at it! 💫
0
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