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
Log in with GitHub

Submitted

Testimonials grid section

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Preview siteView code
Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

Testimonials grid section
  • HTML
  • CSS
2junior
View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, Frontend Mentor community! This is my solution to the Testimonials grid section.

I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

Thank you

Community feedback

Ali• 70

@Ali-Oliaee

Posted

so smooth!! wow

Marked as helpful

1
Arun Kumar Singh• 260

@arunsingh009

Posted

Box-shadow is missing and a few changes are required for font-weight I guess, otherwise your Overall solution is perfect.

Marked as helpful

1
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@arunsingh009 as always that is what I miss, will definitely add it up later, thanks!

1
Martin Kamír• 490

@Martin-K-Kamir

Posted

Wow, nice work! There is no much to say. The code looks good. Just wondering why set html font-size 13px?

Maybe in next project try to use SASS/SCSS it's just the best thing to do css.

Marked as helpful

1
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@Martin-K-Kamir Thanks! Because that is what the style guide said in this challenge, Body Copy- Font size: 13px

1
Kasra Tabrizi• 300

@KasraTabrizi

Posted

Very well done! I only see a slight difference in font weight but other than that I would say it is pixel perfect!

Marked as helpful

1
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@KasraTabrizi Thanks! yeah, decided not to spend too much time on that :D

0
Kasra Tabrizi• 300

@KasraTabrizi

Posted

@catherineisonline I know what you mean haha

0
kelvin• 160

@devenyam

Posted

Love it❤️🎈👌. Great job!

Happy Coding!☕

Marked as helpful

1
P
Dat Do Tat• 190

@datproto

Posted

Good one, Catherine!

The solution is well done in general.

Here are some suggestions:

  • You should try some more advance CSS techniques. For example: Flexbox - so you will have better control on the overall layout (to do stuffs like vertical center objects etc.).
  • You should try to use other scale units such as: "rem", "em" or "vw/vh" rather than "px", to have better responsive layout on larger scale screen (Mac Retina - for instance).

Really interesting to see your skills improved after each challenge!

Dat, (Proto).

1
Ammar Jalabi• 270

@AmmarCode

Posted

Excellent work Catherine! You can add a meta description that would improve your SEO: <meta name="description" content="Put your description here.">

You can use Google Lighthouse which is an open-source, automated tool for measuring the quality of web pages. It can be run against any web page, public or requiring authentication. Google Lighthouse audits performance, accessibility and search engine optimization of web pages.

To access lighthouse, right-click, inspect, after security, you'll find lighthouse, you can generate a report for mobile or desktop device.

1
Rimsha• 240

@rimshub

Posted

Hey Catherine,

Great work. Thank you for mentioning chrome extension. 😅

0
hariprasad9899• 1,170

@hariprasad9899

Posted

Really likes the way you structured your script and CSS code. I'll try like this !!

0
Ajay Pal• 190

@ajay0024

Posted

Great work. Only noticeable difference is box-shadows.

0
elasri21• 1,280

@elasri21

Posted

i think there is a problem, i can not see all the containers and when i resize the window the website is not responsive

0
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@elasri21 strange, for me, works fine. Which browser or device are you checking with? And which width is disorted?

0
elasri21• 1,280

@elasri21

Posted

@catherineisonline I use chrome, the problem is with the height

0
elasri21• 1,280

@elasri21

Posted

@catherineisonline I use chrome, the problem is with the height

0
elasri21• 1,280

@elasri21

Posted

@catherineisonline don't take my comment as a criticism one it made it just to improve because i think that's help

0
Oussama Zouaine• 250

@OussamaZouaine

Posted

I like the transition of the layout across screen sizes, Great Job.

0
Kamasah-Dickson• 5,610

@Kamasah-Dickson

Posted

Your solution looks so great Keep growing @catherineisonline👌

0
A H M A D• 440

@AhmaadAlharbi

Posted

good job .. I will compare my code to yours to fix a lot of mistakes on mine :)

0
Eman• 170

@Eman-AbdElZaher

Posted

Well Done! Catherine

0
AditNovadianto• 1,040

@AditNovadianto

Posted

nicee catherine, you did this so good!!!

keep it up broo and happy coding

0
Ali• 270

@aligjahed

Posted

Well done. That GitHub README is impressive as well. 👍

0
Ahmed El_Bald• 1,020

@Ahmed-Elbald

Posted

This comment was deleted

0
Ali• 270

@aligjahed

Posted

@Ahmed-Elbald Hey Ahmed, This is my experience and I hope it helps you too. Actually, you can use reference images of the project, provided in the starter pack and import them to Figma or adobe xd ( or your vector designer of choice) and make a rectangle with 50% of opacity and fit it to different elements of design so you'll get a quite accurate dimension of each element. Good Luck👍.

3
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@Ahmed-Elbald I don't have a pro so I am using Figma and manually set the lines to measure the sizes and also use the chrome extension called Perfect Pixel to match the design

2
Ahmed El_Bald• 1,020

@Ahmed-Elbald

Posted

@aligjahed Got it ! Thanks bro

0
Ahmed El_Bald• 1,020

@Ahmed-Elbald

Posted

@catherineisonline Got it Thanks

0
Mohammad Ebrahimi• 250

@moheb2000

Posted

Fantastic 😍😍😍 I think it's better use font weight 600 for headings and replace black color in 'Such a life-changing experience. Highly recommended!' heading with """Very dark grayish blue""". Awesome work👏👏👏 Good lock!

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