Skip to content
Submitted over 1 year ago

Testimonials Challenge using CSS and HTML. Have some questions!!

Feithers•180
@Feithers
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 there!

This one I think I did pretty decent, however I have 4 specific questions!

Btw, I know that the style sheet said that mobile is 350px, but I've used the media query for 900px and below because I thought that it started to look very weird from that point (in fact, one of the questions is kinda about that).

1- I've been told that I should always have an <h1>, even if it's "not there", so I did it in a way that another folk told me. However I have a question, since all the properties I've used for the .sr-only class (the <h1>) seem hard to remember xD. Could I just put an <h1> and just hide it with "display: none"? Seems easier that way, but not sure if it'd work.

2- So this is the question about the px's. Between 1050px and 950px approx. the exact word "recommended!" on the <h3> of the Kira White section gets out of the box horizontally, why is that happening and how could I fix it? Seems like the word itself just doesn't have space at all, so my guess would be to make the font size responsive maybe? However that would mean that it may be to small for reading (and I don't know how to do that lol). I've even tried the "minmax" for the template of the columns on the grid, but it still didn't work (I guess it's because like I said, the word itself doesn't have space), so what should I've done there?

3- This question is about the coding itself. On the CSS sheet, in the "Section Specifics" part, there's some code written that I didn't ended up using (.section-1, .section-2, .section-5 > h3, etc.) because it just didn't work, why is that? I think it's because of the selectors, seems like it doesn't work and I can't do that. If that's the case, how could I've done to make all the code more simplified, like what I've tried to do?

4- This is not a question but more like a "Did I do it right?" thing: I did the whole responsive stuff in a kind of an inverted way. I started on the main CSS code with a grid for the mobile and small screens, and then on the query I specified the columns and stuff for the desktop screen. Is that ok or should I always go "from desktop to mobile" kind of thinking?

That's all! Thanks!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have other suggestions about your code that might interest you.

    • 1- Using display: none to hide an element will remove it from the page entirely, including its content and accessibility properties, the objective of using the .sr-only class is to visually hide an element from sight while still making it accessible to assistive technologies like screen readers. I think the best thing you can do is copy and paste the code from @visualdenniss, there's no need to learn it all since there are so many properties.

    • 3- It's best to use the minimum necessary specificity to target only the desired elements on the page and avoid potential conflicts with other styles. It may be helpful to review the HTML structure of the page and consider using more specific class names or adding additional selectors to target only the desired elements.

      Currently your selectors are very difficult to understand and very complex. Always maintain a low specificity. example:

    ‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎✅ Do: .status { . . . }.

    ‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎❌ Don't: .section-2 > .profile > h2 > .status { . . . }.

    • 4- Yes, you did it right! To start from mobile and end at desktop is called 'mobile-first' in web design and the mobile-first is generally considered a best practice.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    3
    Feithers•180
    @FeithersPosted over 1 year ago

    @MelvinAguilar

    Thanks! That was helpful indeed.

    Regarding the last thing about the <p> not being able to be a child of <h2>. Why is that? For me, it makes absolute sense to throw some text inside a tittle, right? But anyway, what should I have used instead, just a <div> is fine?

    EDIT: Nvm, I just checked the code again and yes, doesn't make sense to put a <p> inside an <h2>, don't even know why I did it lol.

    Thanks!

    0
  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hey there,

    "I know that the style sheet said that mobile is 350px"

    Your app should look good between as low as 280px or 320px at least and as high as 2500px. The given designs show how the app should exactly look like on 375px and 1440px screens, but it is best to have a good and responsive layout for anything between the range of 320px and 2500px. Basically you shouldn't only be coding for 375px and 1440px. Hope this clarifies. So it is great that you have used different breakpoints according to your needs.

    Regarding, .sr-only, instead of display: none, a common method to hide that is:

    • .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; top: -99999px; right: -999999px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

    Hope you find this feedback helpful!

    Marked as helpful
    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