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

Responsive testimonials with grid

@sksksk2024

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?

That I used more grid

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

Using grid to put the cards in the specific order. I found out that I must put gap(I still forget to add it, in addition, I needed to understand that first / last in grid means that it goes to the first to the last, but excluding the last one). By searching a bit, and maybe with more practice, these will enter my head very easily

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

In the irganisation of the cards to look good in every device I still have some issues. Every advice about this will be appreciated 🙏

Community feedback

haquanq ®️ 1,585

@haquanq

Posted

Hello @sksksk2024 👋👋👋

Congrats on completing the challenge!!

Here is my opinion about responsiveness for your solution:

  • Sometime things just need a little bit more work, maybe adding more breakpoints to slowly shifting the layout would make the transition much more smooth.
  • About you HTML, each page must have only one h1. In your cards, you should use h2 instead and so on. There are many others semantic elements like blockquote, article, ul, li,... that you can use instead of div and section.

If you want, you can check out my solution for this challenge.

Hope this help 🐮🐮🐮

Marked as helpful

1

@sksksk2024

Posted

Thank you for the tips, @haquanq. Btw, how you made your project look just like the design(even without the design file)?? 🤔🤔🤔 P.S: For me it's difficult to see all the details from the view site that I have to make.

0
haquanq ®️ 1,585

@haquanq

Posted

@sksksk2024 dont worry about your solution not looking like the design, it is more important to know how to structure your HTML and CSS properly (semantics, accessibility) then the little detail like pixel-perfect can easily come later.

About myself, i use Figma to give my judgement on typography (almost created an replica version). If you can control how your typos behave then the rest is easy.

1
haquanq ®️ 1,585

@haquanq

Posted

@sksksk2024 dont worry about your solution not looking like the design, it is more important to know how to structure your HTML and CSS properly (semantics, accessibility) then the little detail like pixel-perfect can easily come later.

About myself, i use Figma to give my judgement on typography (almost created an replica version). If you can control how your typos behave then the rest is easy.

0

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