CSS HTML

Community feedback

• 

  Thiago Morais•420

  @thirrazPosted about 2 years ago

  Firstly, congratulations for complete the challenge! I would like to give some suggestions for imrove your code:

  • You didn't use flexbox to positioning your elements, if you chose this it's okay, but if you don't know about I'll share this link to you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ For example: you could align the main section with this: body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;

  • To have better HTML code, you can use semantic HTML. Instead of using <div class="main" you can use <main> tag

  sorry for my bad english

  Marked as helpful

  1

  ---

  

  Yasi•30

  @jassminellaaPosted about 2 years ago

  @thirraz Hey, Thank you very much for your advice. I really appreciate it. This was my first project and I have a long way to learn so I embrace any suggestions and guidance.

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • To center you content to your page, add the following to your Body Element:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; it needs 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/

  • The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.

  • The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.

  • Your "button" was created with the incorrect element. It should be created using the Button Element. So that when the user clicks on the button (with the help of JS) it should add the product to the cart.

  • The button is missing the "shopping cart icon".

  • A lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.

  • Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

  https://web.dev/learn/design/

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

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

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Yasi•30

  @jassminellaaPosted about 2 years ago

  @vcarames Hey, thank u very much for the help. It’s been just 2 weeks since I started coding and I appreciate all the help I can get. I just know basic html and css but I’m trying my best. These solutions you guys give is so helpful.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @jassminellaa

  Glad I could help!

  Before you know it, you'll be the one giving recommendations.

  0