Skip to content
OverviewSolutions
7
Comments
9

n.Philbert

@nik-p12100 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • n.Philbert•100
    @nik-p12Posted 11 days ago

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

    0
  • vdabel•30
    @vdabelSubmitted 16 days ago
    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-p12Posted 16 days ago

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

    0
  • n.Philbert•100
    @nik-p12Posted 16 days ago

    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.

    0
  • n.Philbert•100
    @nik-p12Posted 26 days ago

    ✅ 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. 🚀

    0
  • n.Philbert•100
    @nik-p12Posted 28 days ago

    Amazing👏🏽

    1
  • MartheA_19•20
    @MartheAudreySubmitted 28 days ago
    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-p12Posted 28 days ago

    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

    0
View more comments