My Solution using CSS and HTML

Community feedback

• 

  Kazer Panol•170

  @kazerpanolPosted almost 2 years ago

  I think it is helpful if you review the Accessibility report (4)

  HTML validation report (6) of your developed website

  Marked as helpful

  0
• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  Looks good for a newbie!

  It's OK to start over when you get stuck. Practice and experience will make it better. When stuck, get up, step away from the code, clear your head, and when you get back with a fresh "eyes", you will see the problem in your code in no time.

  Why did you duplicate your images? And took them out of their folders? Remove duplicate and unused images.

  About the "flexbox vs grid" dilemma... There is no best practice for flex vs grid. That is no either-or dilemma. You can use both in the same project. Whatever works better for specific situation.

  Marked as helpful

  0
• 

  Juan Francisco Andrade•210

  @franc014Posted almost 2 years ago

  Kevin Powel has a video related to what tool to use for layout. Check it out: https://www.youtube.com/watch?v=3elGSZSWTbM I would say that for this challenge, we can use a CSS grid for the global layout, then for each part, left and right, we could position the elements using flexbox (internally). It will become more obvious as you get more and more practice.

  Marked as helpful

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  Congrats on completing your first challenge!🎊🎆

  Regarding your question,

  flex is best for singles column/row. While grid is best for multiple columns/rows. For this challenge, either in would work.

  • To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the main element.

  More Info:📚

  MDN Main Element

  • The image’s alt tag description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

  Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  More Info:📚

  Del Element

  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

  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, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0