Testimonials grid section

Community feedback

• 

  P

  Gilbert•360

  @juliengDevPosted 4 months ago

  Hey there @Faisalbaig1998 👋! Here are some suggestions to help improve your code:

  HTML Improvements:

  1. Use Semantic HTML Elements:

     • Replace div elements with the class card by using figure, figcaption, and blockquote elements. This is more appropriate for testimonials.

  2. Improve Accessibility:

     • Add meaningful alternative descriptions (alt) for images to enhance accessibility.

  Best Practices for Resetting Your CSS Code:

  1. Reset Margins and Padding:

     * {
       margin: 0;
       padding: 0;
     }
     

  2. Consistent Box-Sizing Model:

     *,
     *::before,
     *::after {
       box-sizing: inherit;
     }
     

     By setting box-sizing to inherit for all elements and pseudo-elements, the box model remains consistent throughout the document. Then, setting box-sizing: border-box; on html ensures that all widths and heights include borders and padding, simplifying the calculation of element dimensions.

  3. Set Base Font Size:

     html {
       box-sizing: border-box;
       font-size: 62.5%;
     }
     

     Setting the base font size to 62.5% on html makes text size calculations easier. Since 62.5% of the default 16px font size equals 10px, 1rem equals 10px, simplifying conversions between relative (rem) and absolute (px) units. For example, 1.6rem equals 16px, which is more intuitive than working with text sizes based on a default 16px base size.

  4. Ensure Full Viewport Height:

     body {
       min-height: 100dvh;
     }
     

     By setting min-height: 100dvh;, the body of the document covers at least the viewport height, which is especially useful for "hero" layouts or ensuring the footer remains at the bottom of the page. Using CSS variables for colors allows for easier customization and maintenance of the site theme.

  5. Use Relative Units:

     • Use relative units (rem, em) instead of pixels to improve responsiveness.
     • Example: width: 30px; can be replaced with width: 2rem;.

  6. Improve Responsiveness:

     • When resizing the page, the design breaks in several places.
     • Add additional media queries for more varied screen sizes.
     • Example: Add breakpoints for tablets and desktops.

  7. Reduce Redundant Styles:

     • Combine redundant styles for similar elements.

  You said that you was struggling with font color and sizes, if someone could help me with this? here is some recommendations :

  • Use a Design Tool: Open the JPEG in a design tool like Figma, Adobe XD, or Sketch. These tools allow you to inspect and extract style information such as font sizes, colors, and other design details.

  • Extract Colors and Fonts: Use color picker tools within the design software to get the exact hex/RGB values for the font colors. Identify the fonts used in the design. You can use tools like WhatTheFont or Font Squirrel Matcherator to recognize fonts from images if not provided.

  • Set Up CSS Variables: Define CSS variables for colors and fonts to maintain consistency and ease of updates.

  <Happy Coding/>! 👾

  Marked as helpful

  0

  ---

  

  Faisal Baig•90

  @Faisalbaig1998Posted 4 months ago

  Thank you! That information is very helpful, I didn't find these things anywhere yet @juliengDev

  1