Skip to content
OverviewSolutions
7
Comments
9
n.Philbert
@nik-p12

All comments

  • n.Philbert•100
    @nik-p12

    not much else to add except to add the box-shadow property to the different div. But that's fine.

  • vdabel•30
    @vdabel
    What are you most proud of, and what would you do differently next time?

    I’m proud of how I structured my approach to the challenge. I began by focusing on semantic HTML to ensure proper accessibility and structure, and then implemented well-organized CSS classes in a separate stylesheet to keep the code clean and maintainable.

    Blog preview card

    1
    n.Philbert•100
    @nik-p12

    Correct, simple but correct, I have nothing more to add, congratulations.

  • n.Philbert•100
    @nik-p12

    Refactor the code for better readability, accessibility, and maintainability by using an array for card data, improving layout with CSS Grid/Flexbox, and adding meaningful alt text. What you've done is pretty good.

  • n.Philbert•100
    @nik-p12

    ✅ Strengths:

    • Well-implemented responsive design: The use of media queries ensures a good adaptation across different screen sizes, especially by replacing the desktop image with a mobile version on smaller screens.
    • Clean CSS structure: The code is well-organized with clear class names and a logical separation of elements (container, card, product description, etc.).
    • Consistent typography: The combination of Montserrat and Fraunces fonts provides a nice balance between readability and aesthetics.
    • Nice interactive effects: The button changes color on hover, improving user experience.

    ⚠️ Areas for Improvement:

    1. HTML & CSS can be optimized

      • Solution: Reduce redundancy by using generic classes for shared properties (e.g., avoid redefining widths multiple times in different media queries).

    2. Overuse of margin: auto; and display: block

      • Consider using flexbox or grid to better center elements and manage spacing more efficiently.

    3. Image size management

      • While switching images for mobile is a great approach, using the <picture> element with <source> tags can further optimize performance: 
        <picture>
  <source srcset="assets/images/image-product-mobile.jpg" media="(max-width: 430px)">
  <img src="assets/images/image-product-desktop.jpg" alt="product">
</picture>

    4. Accessibility (a11y)

      • Add an aria-label to the "Add to Cart" button for better compatibility with screen readers: 
        <button aria-label="Add Gabrielle Essence Eau De Parfum to cart">
      • Ensure all images have descriptive alt attributes to improve accessibility and SEO.

    5. More modular CSS

      • Define CSS variables (:root) for colors and fonts to avoid repeating values multiple times: 
        :root {
  --primary-color: #3D8168;
  --secondary-color: #F3EAE3;
  --text-color: #70768F;
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Fraunces', serif;
}

    🎯 Conclusion:

    The structure and design are already well-thought-out! A few optimizations in CSS and HTML would enhance readability, performance, and accessibility. 🚀

  • n.Philbert•100
    @nik-p12

    Amazing👏🏽

  • MartheA_19•20
    @MartheAudrey
    What are you most proud of, and what would you do differently next time?

    I am very because I was able to make a responsive component.

    What challenges did you encounter, and how did you overcome them?

    The only challenge I add was to make the QR code component adapt to screens of different sizes.

    What specific areas of your project would you like help with?

    Best practices

    Responsive QR code component

    #semantic-ui
    1
    n.Philbert•100
    @nik-p12

    for someone whose responsive side was a challenge, you've managed rather well... The mobile-first principle has been well respected, did you think about it at the beginning? If so, how could it have been a challenge for you? But otherwise, developing a responsive site should be less of a challenge for you ... Keep up the good work

  • n.Philbert•100
    @nik-p12

    the code is clear, simple and probably simpler than my solution. I don't see anything wrong with it.

  • n.Philbert•100
    @nik-p12

    I have nothing to say about the code, just a suggestion: in such a simple project, it's more interesting to group the css in a single file.

    Marked as helpful
  • Pedro Carvalho•20
    @PedroJGC
    What are you most proud of, and what would you do differently next time?

    Me orgulho de ter terminado o projeto bem rápido.

    Responsive page using CSS

    2
    n.Philbert•100
    @nik-p12

    in that respect, it's even very good, but I think that in terms of code and file structures, we could have done better, because it's pretty obvious to find your way around, apart from that, it's very good.