Skip to content
Submitted 2 months ago

Perfume Product Review

muiruri3000•380
@muiruri3000
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Yet another completed work, I will work on my media query

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

adjusting my image to fit different scenarios. set the height to a specific measurement. not the best choice, i know but will certainly look for other solutions to that

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

definitely media queries. I would really appreciate links to media query tutorials. I am really poor on that.

Community feedback

  • MikDra1•6,980
    @MikDra1Posted 2 months ago

    Well done, here are some things to review 😊:

    • REM for Units: It's best to use rem for all units instead of px, as this ensures scalability and consistency in spacing and font sizes based on the user's root font size. It helps improve accessibility.

    • Semantic HTML: Consider ensuring all elements are wrapped in semantic HTML tags like <main>, <section>, and <article> to enhance the structure and SEO-friendliness of the page.

    • BEM/Convention for Class Naming: Apply a class naming convention like BEM (Block Element Modifier) to make the styles modular and more maintainable. For example, use .card__title or .card--highlighted.

    • CSS Reset: Consider adding a full modern CSS reset (like normalize.css or custom resets at the beginning of the stylesheet) to ensure consistent styling across different browsers. Here is a link to one I really like.

    • Clamp() for Responsiveness: Use the clamp() function for fluid typography and spacing, allowing elements to resize smoothly between a minimum and maximum value based on the viewport size (e.g., font-size: clamp(1rem, 2vw, 1.5rem)).

    • Responsive Card: To make the card responsive, ensure the layout uses flex or grid combined with max-width instead of fixed width values. This will make the design more flexible and adapt better to different screen sizes.

    • Use max-width/min-width and max-height/min-height: Instead of using fixed width and height, opt for max-width or min-width to allow the elements to resize smoothly on different screen sizes, improving overall responsiveness.

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    Marked as helpful
    1
    muiruri3000•380
    @muiruri3000Posted 2 months ago

    thank You @MikDra1!

    heading over that css reset right now!

    0
  • Steven Stroud•11,910
    @StroudyPosted 2 months ago

    Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

    • This should be in lowercase <h1>PERFUME</h1> and styled in CSS with text-transform: uppercase;, Keeping text lowercase in HTML improves accessibility and SEO. Using text-transform: uppercase; in CSS separates content from style, ensuring screen readers interpret the text correctly.

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

    I hope you found this advice helpful! Keep up the great work, You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    Marked as helpful
    0
    muiruri3000•380
    @muiruri3000Posted 2 months ago

    hi @Stroudy, I really do appreciate your taking the time to give precise corrections and pointers to improvements. I redid the challenge actually and implemented the em and rem, am so happy text and paddings are adapting without adding specific measurements in @media query.

    I will definitely learn about hosting my own fonts. thanks once more.

    1
    Steven Stroud•11,910
    @StroudyPosted 2 months ago

    Hey @muiruri3000, No problem at all, I look forward to seeing more from you, Good luck 😁

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord