Design comparison
Solution retrospective
This is the testimonial grid section, I find the grid concept somewhat difficult.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello MIHIR, congratulations for your new solution!
I know how hard is to setup this
grid layout
, but I can tell that you've paid a lot of attention for each detail. You can improve here the shadows that are too strong and also the html markup.Here’s some tips to improve your component design and html markup:You've missed the color for the background, in this case is
background-color: #EDF2F8
and add it to the body and to improve your box-shadow, you’ve to have in mind two things that make a good shadow,blur
andlow opacity
for smooth shadows. To improve your current shadow, decrease theopacity
and increase theblur
, try this value instead:box-shadow: 0 0.9375rem 1.875rem -0.6875rem rgb(131 166 210 / 50%);
If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/
Your html is working but you can improve it using meaningful tags and replace the divs, for example the main div that takes all the content can be wrapped with
<main>
or section, about the cards you can replace the<div>
that wraps each card with<article>
you can wrap the paragraph with the quote with the tag<blockquote>
this way you'll wrap each block of element with the best tag in this situation. Pay attention that<div>
is only a block element without meaning.This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/
👨💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/testimonials-grid-section-vanilla-css-focus-effect-custom-design-e5bIzU3vZN
✌️ I hope this helps you and happy coding!
Marked as helpful2@MIHI-botPosted about 2 years ago@correlucas Hello Sir! I am really grateful for your helpful guide. You have made me think twice about my work and way of doing it, I am really thankful for your attention and I will be doing my future projects keeping your words in mind.
I will try to improve myself with better results on every works. Thank You !
1@correlucasPosted about 2 years ago@MIHI-bot I'm happy to hear that Mihir, keep it up!
1@efecollinsPosted about 2 years ago@MIHI-bot Hello, congrats on your successful completion of this challenge. Don't forget to generate a new report after making the necessary changes . Generating a new report would clear the accessibility issues.
1
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