Skip to content
Submitted about 3 years ago

Testimonials grid section

👾 Ekaterine Mitagvaria 👾•7,780
@catherineisonline
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

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-OliaeePosted about 3 years ago

    so smooth!! wow

    Marked as helpful
    1
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @ali80-sys Thank you!

    0
  • Ted Dino•170
    @ted-dinoPosted about 3 years ago

    awesome work!

    Marked as helpful
    1
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @ted-dino Thank you

    0
  • Arun Kumar Singh•260
    @arunsingh009Posted about 3 years ago

    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,780
    @catherineisonlinePosted about 3 years ago

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

    1
  • Martin Kamír•490
    @Martin-K-KamirPosted about 3 years ago

    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,780
    @catherineisonlinePosted about 3 years ago

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

    1
  • Kasra Tabrizi•300
    @KasraTabriziPosted about 3 years ago

    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,780
    @catherineisonlinePosted about 3 years ago

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

    0
    Kasra Tabrizi•300
    @KasraTabriziPosted about 3 years ago

    @catherineisonline I know what you mean haha

    0
  • kelvin•160
    @devenyamPosted about 3 years ago

    Love it❤️🎈👌. Great job!

    Happy Coding!☕

    Marked as helpful
    1
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @devenyam Thank you, happy coding!

    1
  • Gloria Ataa Sekyere•290
    @GloriaSekyerePosted about 3 years ago

    Nice work!

    Marked as helpful
    1
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @GloriaSekyere Thanks!

    0
  • Elyas•300
    @ElyasthrPosted about 3 years ago

    good job

    Marked as helpful
    1
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @Elyasthr Thank you!

    0
  • Dat Do Tat•190
    @datprotoPosted about 3 years ago

    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
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @datproto thanks

    0
  • Ammar Jalabi•270
    @AmmarCodePosted about 3 years ago

    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
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @AmmarCode thanks

    1
  • Wayne Tasaki•130
    @WayneTasakiPosted about 3 years ago

    Pixel perfect! You're kicking butt!

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @WayneTasaki Thanks! :D

    0
  • Arnaud HONFIN•50
    @Richy55-maxPosted about 3 years ago

    Good job 👏

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @Richy55-max Thank you

    0
  • Rimsha•240
    @rimshubPosted about 3 years ago

    Hey Catherine,

    Great work. Thank you for mentioning chrome extension. 😅

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @rimshub Thanks!

    0
  • Francis Obwogo•200
    @francobwogoPosted about 3 years ago

    Nice!

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @francobwogo Thank you

    0
  • hariprasad9899•1,170
    @hariprasad9899Posted about 3 years ago

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

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @hariprasad9899 Thank you

    0
  • P
    Joska•500
    @LowkeyCoyotePosted about 3 years ago

    Great work !

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @LowkeyCoyote thanks!

    0
  • Mayur Dehade•80
    @mayurdehadePosted about 3 years ago

    Great Work

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @mayurdehade thanks!

    0
  • vinay kandoi•120
    @vinaximusPosted about 3 years ago

    Nice work, especially the responsive behavior.

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @vinaximus thank you

    0
  • Sebastian•300
    @sandlerzPosted about 3 years ago

    Nice work, Looks awesome

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @sandlerz thank you

    0
  • Ajay Pal•190
    @ajay0024Posted about 3 years ago

    Great work. Only noticeable difference is box-shadows.

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @ajay0024 thanks

    0
  • elasri21•1,390
    @elasri21Posted about 3 years ago

    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,780
    @catherineisonlinePosted about 3 years ago

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

    0
    elasri21•1,390
    @elasri21Posted about 3 years ago

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

    0
    elasri21•1,390
    @elasri21Posted about 3 years ago

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

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @elasri21 I will take a look, thanks

    0
    elasri21•1,390
    @elasri21Posted about 3 years ago

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

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @elasri21 ?

    0
  • Oussama Zouaine•250
    @OussamaZouainePosted about 3 years ago

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

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @OussamaZouaine Thanks

    0
  • darkweb•210
    @darkweb907Posted about 3 years ago

    Nice one keep learning

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @darkweb907 Thanks

    0
  • Kamasah-Dickson•5,570
    @Kamasah-DicksonPosted about 3 years ago

    Your solution looks so great Keep growing @catherineisonline👌

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @Kamasah-Dickson Thanks!

    0
  • A H M A D•440
    @AhmaadAlharbiPosted about 3 years ago

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

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @AhmaadAlharbi I am glad it's contributing in any way

    0
  • Antonio Rodrigues Júnior•500
    @juniorrdgsPosted about 3 years ago

    Nice work. Perfect. 👍👍👍

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @juniorrdgs Thanks!

    0
  • Eman•170
    @Eman-AbdElZaherPosted about 3 years ago

    Well Done! Catherine

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @Eman-AbdElZaher Thank you!

    0
  • Sagar Khamrui•40
    @SK1202Posted about 3 years ago

    Nice one!!

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @SK1202 Thank you

    1
  • AditNovadianto•1,040
    @AditNovadiantoPosted about 3 years ago

    nicee catherine, you did this so good!!!

    keep it up broo and happy coding

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @AditNovadianto Thank you gurrl!

    0
  • Ali•270
    @aligjahedPosted about 3 years ago

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

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @aligjahed Thank you! great way to share the experience

    0
  • Ahmed El_Bald•1,020
    @Ahmed-ElbaldPosted about 3 years ago

    This comment was deleted about 1 year ago

    0
    Ali•270
    @aligjahedPosted about 3 years ago

    @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,780
    @catherineisonlinePosted about 3 years ago

    @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-ElbaldPosted about 3 years ago

    @aligjahed Got it ! Thanks bro

    0
    Ahmed El_Bald•1,020
    @Ahmed-ElbaldPosted about 3 years ago

    @catherineisonline Got it Thanks

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @Ahmed-Elbald You're welcome

    0
  • Mohammad Ebrahimi•250
    @moheb2000Posted about 3 years ago

    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
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @moheb2000 thank you

    0
  • Thiago Moreira•300
    @othiagomoreiraPosted about 3 years ago

    Nice work 🎉❤

    0
    👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted about 3 years ago

    @othiagomoreira thanks!

    0

Please log in to post a comment

Log in with GitHub

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