Frontend Mentor | Testimonials grid section [HTML + Tailwind CSS] coding challenge solution

@Ezekiel225

Posted 7 months ago

Hello there 👋 @arunkumar0398.

Good job on completing the challenge !

Your project looks really good!

I have suggestions about your code that might interest you.

📌 First: Use <main> to wrap the main content instead of <div>.

Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

📌If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

📌Learn more about Media Queries: Media queries are an essential part of responsive web design. They allow you to apply different CSS styles based on the characteristics of the device, such as screen width, height, orientation, and resolution. You can start by reading articles or tutorials on media queries to understand how they work and how to use them effectively.

Practice: The best way to become familiar with media queries is to practice using them in your projects. Start with simple layouts and gradually increase complexity as you gain confidence. Experiment with different breakpoints and CSS rules to see how they affect the layout on various devices.

Use a Mobile-First Approach: One popular strategy for responsive design is the mobile-first approach. This means designing the layout for mobile devices first and then adding styles for larger screens using media queries. This approach helps ensure that your website looks good on small screens and then adapts to larger screens.

📌Understanding the importance of using External CSS over Internal CSS is crucial for writing cleaner, more maintainable code. Here's why you should make the switch:

📌Separation of Concerns: External CSS allows you to separate the structure (HTML) from the presentation (CSS). By keeping your styles in separate files, your code becomes more organized and easier to manage. This separation makes it simpler to update or modify styles without affecting the HTML structure.

📌Reusability: With External CSS, you can create a single stylesheet that can be linked to multiple HTML files. This promotes code reusability, saving you time and effort by avoiding duplicate styling code across your website.

📌Ease of Maintenance: Imagine having to update the styling of your website across multiple pages. With External CSS, you only need to make changes in one central stylesheet, rather than hunting down and updating each individual `` tags in your HTML files into this external stylesheet. Then, link your HTML files to the external stylesheet using the <link> tag in the <head> section:

<link rel="stylesheet" type="text/css" href="styles.css">

By adopting External CSS early in your coding journey, you'll set yourself up for success by writing cleaner, more maintainable code that is easier to collaborate on and update as your projects grow.

I hope this suggestion is useful for future projects.

Other than that, great job!

Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.

Happy coding.

Arunkumar S• 100

@arunkumar0398

Posted 7 months ago

Hey there 👋@Ezekiel225,

Thank you for your feedback and valuable suggestions.

I will take those suggestions and implement it in the solution.

Testimonials grid section [HTML + Tailwind CSS]

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community