Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

pablodev | Testimonials Grid Solution

P
pablodev 430

@Pabloodev

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Hello guys ❤️

This was the biggest challenge for me so far, I still didn't know how to use the CSS grid and this challenge made me chase that knowledge!

Little by little I'm getting better at reading documentation, as I had to read a lot, but I learned and got along well with CSS Grid

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

CSS Grid columns widths At first I only knew how to define the column size in CSS grid using ''1 fr'' which left me very limited and I had difficulty with this when adjusting the window size

A bad css? As I didn't know exactly what I was doing, maybe my lines of code were messed up?

Anyway, I hope that you can helpe with some tips 🤓🧠

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

Any tip is very welcome and valuable, thank you!

Community feedback

rafi b 280

@raficode2303

Posted

the layout looks good, i noticed some little things:

  • the page max-width need to be smaller => smaller cards.
  • jeanette card should not be the 2nd card at mobile/tablet mode.
  • there is no need .cards{min-width: 375px;}, just remove the body{ margin: 6vw 10vh;} and leet css to do it responsive thing. try to avoid fixed sizes. the center of the page horizontally and vertically shouldn't be depend on fixed margin. not all screen the same. try to find a better way to center the page.
  • try to avoid things like: .kira {grid-area: kira;} and <div class="card kira">. the names is to specific. think what will happen if you was told to replace kira card with john card.. it was meanning that you was needed to change many HTML and CSS lines. better way is something like: .card-5{grid-area: card-5;} and <div class="card card-5">. try to keep it modular /component that can fix to wide possibilities.

great work, keep to build! 👷‍♂️

Marked as helpful

0

P
pablodev 430

@Pabloodev

Posted

@raficode2303

Hello buddy! 🤗

Thank you very much for your tips, they were valuable, I tidied up the code but there are some things that I will leave to apply in the next challenge as the code was already structured and I'm still learning how to use relative measurements but I think I'm making progress, thank you very much!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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