Skip to content
Submitted about 2 years ago

Testimonials Grid Section Solution

Siddharth•230
@siddharth-1407
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 consider this my first grid related challenge, Ive used grid before but those were not as griddy. i don't really know grid I'm still learning. Ive a few questions:

  1. I feel like im writing too much unnecessary CSS. So i would like to know if that's really the case.
  2. I write in SCSS, but when i look at the CSS i see a lot of selectors as i wrote it by nesting it. So is it a bad practice to have too many selectors again and again? wouldn't it slow down the website?
  3. If we are importing fonts and images from the internet, then should we import it through HTML <link> tag or through @import in style sheet?

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @siddharth-1407, congratulations on your new solution!

    Great code and great solution! I did this challenge too and know how hard it is to set up this grid layout. I think you've done a really good job building everything! Here are some tips for you:

    The html structure you’ve used here works, but if you want to make this even better, you can replace the <div> you’ve used to keep the blocks and replace with some better html markup and semantic, for example, the main block can be wrapped with <main> and each testimonial card with <article>, then you can use a tag that not everyone knows, for the paragraph containing the quote you can replace the <q> with <blockquote> that is tag the describe exactly its content.

    This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Siddharth•230
    @siddharth-1407Posted about 2 years ago

    @correlucas Alright i think im a bit confused because i did use <main> and <article> tag. I also used <blockquote> here but i did use the <q> tag inside of it. I did find it odd that i was doing it. I did it because <blockquote> doesn't put the quotation marks. But now that you've pointed it out i think its okay to just type quotation mark within <blockquote>, Thanks i was really confused about this!!

    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @siddharth-1407👋, good job for completing this challenge!

    For the second question, I suggest you learn BEM naming convention standard for CSS class names because increases the readability of front-end code, provides a modular structure, and its more easier to work with.

    "By making selections with too many CSS selectors, you may have successfully made your CSS extremely unmaintainable", freecodecamp.

    More information: BEM and SASS: A Perfect Match

    I hope this advice helps you.

    Good job and happy coding!

    Marked as helpful
    0
    Siddharth•230
    @siddharth-1407Posted about 2 years ago

    @MelvinAguilar Thanks for your suggestion Melvin! I knew about BEM but i was confused about a lot of stuff, so i was procrastinating on learning it. I mean i was okay with the block element part but i was unsure as to how i should name classes if there are elements within elements. But now im gonna try start using it.

    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