Responsive product preview page with HTML, CSS using Bootstrap & Flex

Community feedback

• 

  Mason Dunn•100

  @mason-dunnPosted about 2 years ago

  Hi HaYeong,

  I love the way you organize your files!

  I did notice while looking through your code that you have a tendency to use <div> a lot. Learning semantic HTML could provide a lot of readability and even cut down on some unnecessary styling sometimes.

  For example, for the original price of the item ($169.99), the <del> tag automatically puts a line-through text decoration style and the tag itself tells the browser that the data in that tag is "removed."

  Another example would be for the headings of this component. By using H1-H6 tags you can avoid using font-weight and tell the browser what the main content is. In your code you used <p> tags for product and category.

  Lastly, for your button you didn't use the <button> tag. Using the <button> tag makes sense because it is an element that is meant to be interacted with. Of course the user knows that, but the browser won't know that.

  Good work on completing this challenge :)

  Mason Dunn

  Marked as helpful

  1

  ---

  

  HaYeong•100

  @hypyeonPosted about 2 years ago

  @mason-dunn Thank you so much for taking your time and reviewing my codes! I really appreciate your feedback. I'm on my way to fix those as advised! :)

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

  • This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0