Product preview card

Community feedback

• 

  Mishael•320

  @mishael-codesPosted almost 2 years ago

  Hello Edoardo

  You did some great work on this project

  However, to make your site more accessible, try using the <main> tag for the <div> that has the class of "card".

  Also, you can use the <footer> tag on the <div> with a class of "attribution".

  If you do not want to do that, you can as well add a role attribute to the respective <div> tags For example:

  For the main content, do this: <div role="main" class="card">

  And for the footer, do this: <div role="contentinfo" class="attribution">

  To read more about the use and importance of semantic HTML and the role attribute, check these sites:-

  Semantic HTML - w3schools

  HTML Role Attribute Explained

  Once again, You did well on your project.

  Keep it up

  Marked as helpful

  1
• 

  Jake Samuels•780

  @jake4369Posted almost 2 years ago

  Hi, a great idea for responsive images is to use the <picture></picture> tag. You can specify multiple images inside one tag, set media queries inside the tag, and when you resize the browser, the correct image will render it's a really cool.

  w3Schools has some good information on how to use it, just be sure to set your images to "display: block" in the CSS else you get some weird behaviour but other than it's a great way to handle multiple images like in this challenge.

  https://www.w3schools.com/tags/tag_picture.asp

  Hope this helps ☺️

  Marked as helpful

  1

  ---

  

  EDOARDO PITACCIO•180

  @EdoPitoPosted almost 2 years ago

  @jake4369 Thank you !! This is very usefull!

  0
• 

  Harun Korkmaz•40

  @WiddedPosted almost 2 years ago

  You can give flex to the body;

  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

  So the content will be in the middle of the page

  also you can use border-top-left-radius / border-bottom-left-radius for image.

  Marked as helpful

  1

  ---

  

  EDOARDO PITACCIO•180

  @EdoPitoPosted almost 2 years ago

  @Widded Thank you!!!!! I didn't know I could set the body as flex!!! makes sense!!! I also did not know about border-top-left-radius / border-bottom-left-radius!!

  1
• 

  Yohannes Teshome•140

  @tiobistaPosted almost 2 years ago

  I think you can put the image inside a div container and give the container a border radius... so that you can get the image with rounded corner

  0
• 

  EDOARDO PITACCIO•180

  @EdoPitoPosted almost 2 years ago

  Just realised i havent used white for the card...

  0