four card feature section

Community feedback

• 

  P

  biwwabong•140

  @biwwabongPosted 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:

  1. 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:

  <p style="margin-top:1em;font-weight:200">Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful</p>

  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>

  2. 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:

  <div class="item1"> <h3>Supervisor</h3> <p>Monitors activity to identify project roadblocks</p> <img src="./images/icon-supervisor.svg" alt="icon-supervisor"/> </div>

  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.

  3. 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.

  4. 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:

  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" rel="stylesheet">

  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

  ---

  

  Kurakula Vinay Kumar•130

  @vinaykumar91Posted 2 months ago

  @biwwabong thank you. your feedback helps me a lot for improving

  1