Skip to content
Submitted almost 4 years ago

testimonials grid section

seyide hundeyin•440
@SeyideHundeyin
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

I always found CSS grid difficult and never wanted to use it on any of the challenges but I decided to give it a try and I spent the whole night googling and checking other people's solutions.

I definitely haven't gotten the hand of CSS grid but I am proud I was able to do this challenge and will use CSS grid in more challenges so I can understand it better.

let me know if you have any feedback for me.

Thanks

Community feedback

  • Grace•31,090
    @grace-snowPosted almost 4 years ago

    Hi Seyide, As already said you need a little gap (margin/padding) at the very top and bottom of the screen so your cards aren't hitting edge of viewport.

    Your grid looks great to me. If you're having trouble with it, try using grid areas next time, you'll probably find them a lot easier than trying to work out line numbers.

    The only issues I see at the moment are all with html, which should be corrected:

    • Headings must go in order, and you should only have one h1 per page. This is important for assistive technology and for search engines. I would recommend making all the peoples names into h2s and not using heading tags at all for the quotes.

    • sections are meant to be used for large chunks of a document, a bit like chapters of a book. Again the reasons are for clearly understandable document structure. Using them incorrectly can have a negative effect for assistive tech users. This whole challenge could be wrapped in one section and given a title of 'testimonials', but there should be no sections within it. I would swap those for divs.

    Hope thats helpful. Keep going with you're learning, you're doing really well with these challenges. Happy coding!

    2
    seyide hundeyin•440
    @SeyideHundeyinPosted almost 4 years ago

    @grace-snow thanks for your feedback. I will work on it!

    0
  • Yadhavan Prabhakar•460
    @yadprabPosted almost 4 years ago

    check out wesbos grid tutorial trust me you're going to love css grids soon it really solves many problems

    1
    seyide hundeyin•440
    @SeyideHundeyinPosted almost 4 years ago

    @yadprab thanks. I just got the traversy media's course

    1
    Yadhavan Prabhakar•460
    @yadprabPosted almost 4 years ago

    @SeyideHundeyin it's on youtube fun projects it helped me to understand more about grids and check out layout land channel too

    1
    seyide hundeyin•440
    @SeyideHundeyinPosted almost 4 years ago

    @yadprab Thanks. i will check it out!

    1
  • Account deleted

    This comment was deleted 5 months ago

    0
    seyide hundeyin•440
    @SeyideHundeyinPosted almost 4 years ago

    @limtedtorni000 Thanks i have done that

    0
    Account deleted

    @SeyideHundeyin yeah the first time it wasn't but now is looking great

    0
    seyide hundeyin•440
    @SeyideHundeyinPosted almost 4 years ago

    @limtedtorni000 appreciate it!

    1

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