Product preview card using HTML and CSS for desktop and mobile

You had a pixel perfect project, that was so good. I just reviewed your code on Github and it's very good, well typed and arranged. I'm a beginner myself and just learned a couple of things from your code.

your code is simple, and you used the flex containers and flex items to arrange that. CSS file is simple too. You could try to create a separate file for mobile design. (large project would have a lot of pages with lots of CSS codes)

about the Github repository: you could work on arrangement a little bit.

• images==>[only has image files that are used on the website]
• Design==>[screenshots of the website views]
• html file [if it has more than file - you should create a folder named "html"]
• css file [if it has more than file - you should create a folder named "css"]

keep the good work and keep coding.

This is a very nice first attempt, well done!

• I see that you used margin to center the div, I think you should use flex-box as it is a lot easier and works a lot better. Like this

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

• That should center it right in the middle and if it doesn't, tell me so I can't check it.

Also some accessibility issues.

• Document should have one main landmark - Your page should have one and only one <main> tag to help screen readers navigate the page.You can wrap your '.wrapper' in a main tag.

Hope this was helpful! Happy coding!