Design comparison
Community feedback
- @biwwabongPosted about 2 months ago
Great project! It looks really nice and closely matches the original design.
You've done an excellent job with the layout and structure, and the project has come together well overall. However, there are a few areas for improvement that can help make your code more maintainable and efficient:
- Move Inline Styles to the External CSS File It’s always a good practice to keep your styles in the external CSS file for easier maintenance and consistency. For example, instead of using inline styles like this:
You can move these styles to your CSS file:
.description { margin-top: 1em; font-weight: 200; }
<p class="description">Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful</p>- Use Semantic Elements Like <article> Instead of <div> You've used <div> for your cards, but since each card is a distinct, self-contained piece of content, using <article> would be more semantically correct. For example, instead of:
You can structure it like this:
<article class="card-supervisor"> <h3>Supervisor</h3> <p>Monitors activity to identify project roadblocks</p> <img src="./images/icon-supervisor.svg" alt="Supervisor icon"/> </article>This not only improves readability but also enhances accessibility and semantic structure.
-
Improve Class Naming for Better Readability Using class names like item1, item2, etc., can make it harder to understand the purpose of each element. More descriptive names like card-supervisor or card-team-builder make your code easier to read and maintain.
-
Optimize Google Font Loading You’re currently importing all the font weights from Google Fonts, which can slow down the page load. It’s better to only import the font weights that are actually needed. For example, instead of this:
You can simplify it by only loading the necessary weights:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap" rel="stylesheet">This will improve performance and benefit SEO by reducing the page load time.
Overall, you've done a fantastic job! Just a few small adjustments will take your project to the next level. Keep up the great work!
0@vinaykumar91Posted about 2 months ago@biwwabong thank you. your feedback helps me a lot for improving
1
Please log in to post a comment
Log in with GitHubJoin 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