Product Preview Card Component using Flexbox

Community feedback

• 

  gabbyhunter1•60

  @gabbyhunter1Posted 4 days ago

  Hey. Nice job making the site responsive, you have done well! Here are some things I want to share with you:

  1. Avoid the inline styling in your .html files as much as possible. Sure, you may apply some inline styling in your code, but styling the whole page in the index.html file is considered a bad practice

  2. I know you asked for some advices for making a responsive page, but here is also a really important thing - HTML Accessibility. I am not really good at it either, but here are some main takeaways related to your code:

     • Wrap the main content of your page in the <main> tag, which is your product-preview-container div and the attribution div
     • It is not a very important thing here really, but wrapping the content of the product-preview-container div in an <article> tag would be better in terms of accessibility. Remember this for your future projects. Here is some information about this tag.
     • Headings. First of all, any page should have at least one <h1> heading and that would be, let me put it like this, - the main heading that describes your whole page. Here it would be the name of the perfume - Gabrielle Essence Eau De Parfum. Another thing - headings on your website should follow the order - <h2>s, <h3>s etc. should not come before the <h1> heading. Obviously, that rule works for other tags as well. Just remember this: the <h1 heading always comes first(and it is considered a good practice, if I am not mistaken, to only have one <h1> tag per page), all of your <h2>s come next, all of your <h3>s come next and so on. Since we made the name of the perfume our <h1> heading, we will not make the "perfume" text above it an <h2> heading, since that would break the order of headings on the page, therefore I would recommend making it a paragraph(<p>).
     • The attribution div. It would be a better and a more semantic approach, in my opinion, if you made it as the <footer>. And, if I remember correctly, the <footer tag should not be inside the <main> tag.
     • It would be great to ensure accessibility for screen readers when displaying a price with a discount and the original price, but I have not come up with the solution for this yet, unfortunately.

  3. It will be a bit better in terms of readability and maintenance for your code if you keep all of your CSS resets on top of it and then start writing the general styling. The way I tend to do it - custom properties come first, then the reset and then the styling.

  4. The way I use @medias is I write them right under the classes that I will be applying those @medias for. Maybe that is not the case for you, but for me it is a lot easier to maintain the classes used in my @medias when they are next to the original classes.

  Good luck with your web development journey! :)

  Marked as helpful

  1

  ---

  

  KhutsoJ•70

  @KhutsoJPosted 4 days ago

  @gabbyhunter1 I've applied both yours and Huyphan's suggestions. Thank you both for taking the time to review and critique my project 🙂

  1

  

  gabbyhunter1•60

  @gabbyhunter1Posted 4 days ago

  @KhutsoJ no problem! I can see that you even took a bigger step further and actually made it even better than I suggested - such as using the <label> tag for the "perfume" text instead of my suggested <p>. This approach is nice and semantic. I may even consider replacing the <p> tag with <label> in my code as well as soon as I finish my current challenge. Thank you.

  Keep up the good work! Never stop learning :)

  Marked as helpful

  1

  

  gabbyhunter1•60

  @gabbyhunter1Posted 4 days ago

  @KhutsoJ oh, and also another thing for you to consider learning - custom properties. For now it is fine to ignore them, since challenges like this one are small, but as soon as you get to work on a pretty big challenge - custom properties will save you a lot of time.

  The reason why I told you this is the way you apply colors - see, say you got a color palette for your website, so, obviously, you will be assigning the colors from the given palette to the elements of your pages a lot and that will get reeeeally repetitive and tiring. But that is not even the main issue - imagine if you decided to change the website's color palette. How much time and how many nerve cells would it take to find and replace the old colors of the elements? :D

  Marked as helpful

  1

  

  KhutsoJ•70

  @KhutsoJPosted 4 days ago

  @gabbyhunter1 You're absolutely right! One thing I feel I need to work on is making more efficient styles to remove duplication.

  I've also never actually made custom properties before. I experienced using them with Bootstrap but I've never really looked into making my own. I'll take this into consideration next time I'm working on a project.

  Also, I have to give credit to @huyanphan2210 for suggesting that I use a label tag with "perfume". I thought we only used that tag in conjunction with form inputs (like name, password, etc.), but I learned that isn't the case. I probably could have used the for attribute and assign it to the product name, but oh well, next time.

  1
• 

  Huy Phan•2,300

  @huyphan2210Posted 4 days ago

  Hi, @KhutsoJ

  I checked out your solution and I have some thoughts:

  1. Good job starting with the mobile-first approach!

  Designing from mobile to desktop is a popular and effective strategy. If you're not already familiar with it, you might want to dive deeper into the concept—it can make your designs more adaptive and efficient.

  2. Consider semantic HTML tags instead of excessive <div> elements.

  • Use <main> for .product-preview-container.
  • Use <figure> for .product-image-container.
  • Use <section> for .product-info-container.
  • Use <footer> for .attribution.
  • The .card-button doesn’t need a wrapper like .cart-button-container; it can stand on its own.

  3. Establish a clear heading hierarchy. I noticed you're using <h2> and <h3>, but there’s no <h1>. Start with <h1> for the main heading, followed by <h2> and <h3> in descending importance.

  "Gabrielle Essence Eau De Parfum" seems perfect for an <h1>. The word "Perfume" feels more like a label for the main heading and could work as a <label>.

  4. Responsive design. I see you’re already using media queries, which is good! To further improve responsiveness, experiment with CSS features like:

  • Functions: clamp(), calc(), min(), max().
  • Attributes: min-height, max-width, etc.
  • Units: rem, em, %, vw, vh, etc.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  KhutsoJ•70

  @KhutsoJPosted 4 days ago

  @huyphan2210 Thank you so much for the feedback Huyphan!

  I made a few changes as per your suggestions:

  1. Semantic elements

  • Used the <main> tag for .product-preview-container
  • Used the <figure> tag for .product-image-container
  • Used the <section> tag for .product-info-container
  • Used the <footer> tag for .attribution
  • Removed the .cart-button-container removing unnecessary markup

  2. Header tags

  • Used the <h1> tag for "Gabrielle Essence Eau De Parfum"
  • Removed the <h3> tag on "perfume" and swapped it for a <label> tag

  In addition, I also have a few questions:

  1. Is it generally bad to use pixels, should my first choice always be relative units such as rem and %?

  These questions are a little more personal!

  2. Seeing that you are a software developer, what did it take for you to get that job?

  3. Right now I'm self-taught (I did a course on Udemy, here's the link: The Web Developer Bootcamp 2024. I've also done some courses by SuperSimpleDev on YouTube. What more do you think I need to be considered ready for a position in Web Development?

  Once again, thank you for your suggestions and contributions in helping others to become better Web Developers! I really appreciate it.

  0

  

  Huy Phan•2,300

  @huyphan2210Posted 3 days ago

  @KhutsoJ

  1. Choosing Between px, rem, and %

  The choice of px, rem, or % depends on your specific needs and project goals. Here's a breakdown:

  • px: A fixed unit, making it precise and predictable. It's useful for components that require consistent sizing.
  • rem: A relative unit based on the root font size (1rem = 16px by default unless overridden in the html tag). While it often feels fixed due to default settings, rem scales better for responsive designs compared to px.
  • %: A relative unit tied to the parent element. For example, width: 50% means the child element will occupy half of its parent’s width.

  Combining these units can give you flexibility and control. Consider these examples:

  /* Takes 50% of the parent's width but caps at 311px */
  .element-1 {
    width: 50%;
    max-width: 311px; /* Adds precision */
  }
  
  /* Takes 50% of the parent's width but caps at 18.75rem (300px if 1rem = 16px) */
  .element-2 {
    width: 50%;
    max-width: 18.75rem; /* Scales better for responsive designs */
  }
  

  2 & 3. Starting Your Journey as a Front-End Developer

  If your goal is to land a front-end developer role, I recommend using this website (Frontend Mentor) as a training ground.

  Start Small and Stay Humble

  Admit to yourself that you have much to learn (I still do too!). Begin with newbie challenges, focusing on completing them with care and attention. Avoid rushing; the goal is to learn as much as possible, not to accumulate points.

  After submitting your solutions:

  • Review the assessment feature for feedback and adjust your work accordingly.
  • Explore feedback from others, and reply thoughtfully. Writing thoughtful responses helps you think critically, which is essential for any developer.

  Progress Gradually

  Once you feel truly comfortable with newbie challenges, move on to Junior challenges. By this stage, you should have:

  • A strong foundation.
  • Your own coding style and reasoning process.

  Repeat the same approach: learn, refine, articulate, and grow.

  4. Handling Rejection and Growth

  If you’re rejected after an interview, remember that it’s completely normal. Simply look for another opportunity—there’s always another company out there. As a fresher, aim for a place where you can learn and grow, as that’s the most important factor early in your career.

  Always refine your skills and continue improving. Even if you face challenges like being laid off, your skills stay with you. Those skills are your key to finding a better opportunity and progressing further.

  Hope this helps!

  Marked as helpful

  1
• 

  satyatorati•50

  @satyatoratiPosted 5 days ago

  good

  2