Responsive homepage using grids, flexbox and bootstrap

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @k-hroma 👋,

  ---

  HTML Feedback:

  1. Use Semantic Tags 🏷️
     Replacing generic tags like <div> with semantic ones (e.g., <article>, <section>, <header>, <footer>, etc.) will improve accessibility and readability. For instance:

     • Use <section> for the .grid-container.
     • Replace the <div> tags in .item3 with <article> for better structure.

  2. Add Comments 📝
     Consider adding comments to explain sections of your HTML code. This will make it easier for others (and future you!) to understand.

  ---

  CSS Feedback:

  1. Avoid Repetition and Follow DRY Principle ♻️

     • For example, the font family "Inter" is being set repeatedly for various elements like body, .nav-link, and headings. Declare it once in a base selector (e.g., body) and let others inherit.
     • Similarly, margins like margin: 0; and padding: 0; are being set for multiple elements. These could be streamlined.

     Suggested Change:

     body {
       font-family: "Inter", serif;
       margin: 0;
       padding: 0;
     }
     
     h1, h2, h3, p, .nav-link {
       margin-bottom: 0;
     }
     

  2. Utilize Variables More 🌈
     Leverage the defined CSS variables (:root) more consistently:

     • Use --Softorange and --Softred in the navbar or buttons for uniformity.
     • Replace hardcoded font sizes and weights with the defined variables.

  3. Group Related Styles 📂
     Group styles for better readability. For instance, combine .navbar-toggler and .btn-close styles under a single comment block for "Navbar Buttons".

  ---

  Warm regards,
  Aakash Verma 😊

  0