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

Submitted

Testimonials grid section using html and css only

AbdulRhmanβ€’ 270

@Abdo-al-R

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello this is my solution for this challenge , any suggestions ?

Community feedback

Alaminβ€’ 2,000

@CodePapa360

Posted

Hi AbdulRhmanπŸ‘‹ Great job on completing this challenge! πŸ₯³

I did notice a few areas where your code could be improved.

Some bad practices:

  • Instead of using <br> tags to create line breaks, it would be better to use <p> tags and add margin or padding to create space between elements.

  • Instead of using inline styles like style="font: inherit;", it would be better to define your styles in a separate CSS file or in a block in the HTML file.

Some CSS suggestions:

  • Use class or id selectors instead of element selectors to be more specific and avoid unintended styling.

  • Use box-sizing: border-box on all elements to include padding and border in the element's total width and height.

  • Consider using a CSS reset or normalize stylesheet to ensure that your styles consistently apply across different browsers.

  • Use the rem unit instead of px for font sizes and other dimensions to make it easier to scale your design.

Overall, this is a very well done solution to the challenge. Great job!

I hope this feedback was helpful. 😊 Keep up the good work!πŸ‘

0

@VCarames

Posted

@CodePapa360

This two comments make no sense ;

  1. He already using semantic elements (figure, figcaption and blockquote).
  2. There is no form needed in this challenge.
  3. He IS using a media query.
  • Use semantic HTML tags like <header>, <nav>, and <footer> to give meaning to your content and make it easier for search engines and assistive technologies to understand the structure of your page.
  • Consider using <label> tags to associate form inputs with their labels for improved usability.
  • Use the @media rule to define responsive styles that apply at different screen sizes.
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