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

Fully Responsive design 🚀

AmanDeep 340

@AmanDeep9925

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


Love to hear your feedbacks 😉.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Aman,

Great job! I like your way of coding.

I would like to give you a few tips:

  • the footer doesn't have to be styled in the HTML, you can transfer it to the CSS file (anyway, you didn't use a footer so just remove it);
  • semantic tags: here you can use the main and section tags, also each box can be treated as a single article and inside of it you can put a header, so main, sections, articles => header, paragraphs. Also in your HTML structure, I didn't see any headings but here you can successfully use them. Check your HTML validation report - there is an information: article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles, so you can fix it now.
  • first card has got the quote, IMO it should be at the end of the right corner (check the design folder), what do you think? -The project should look well on mobile, medium screens and desktops with the max width (it all depends on the type of project). In your project you have used very high breakpoints: 1200, 960. RWD on mobile seems to work well but try to include the tablets etc. Also, it could be better to go from the mobile with one column, then create two pairs with two boxes (2x2) and below will be the 5th box at the bottom along the entire length of the container. Finally, the 5th will be on the right side like on the desktop version (design folder) but of course, it is only another proposition of the solution. -- this is a single page so you can easily determine the hight, eliminate the scroll by adding overflow hidden on the desktop size;
  • it is better to use classes than id's # in the CSS file and also try to don't style tags straight away like in your code: article { padding: 20px 10px; };
  • when you want to reset the CSS styles it is better to do it at the beginning of your CSS file, not in the body, for example:
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • yesterday the experienced developer told me that the font link should be pasted in the HTML head (to be honest I have to read about it);

Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.

Greetings :D

1

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