Product preview card using HTML and CSS for desktop and mobile

Community feedback

• 

  Ziyad ghobashi•180

  @ziy-egPosted over 2 years ago

  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.

  Marked as helpful

  0

  ---

  

  Zsolt Homoki•50

  @homoki76Posted over 2 years ago

  @ziy-eg Thank you for the comments. I am new to GitHub, actually these are my first projects there so any advice is welcome. As for the images, the directory includes only those used in the project. The screenshot will be included. Thanks for the tips on the html and css directories.

  0
• 

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  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!

  Marked as helpful

  0

  ---

  

  Zsolt Homoki•50

  @homoki76Posted over 2 years ago

  @Illyaas4Show Thank you, good ideas. In my other Project i'd used both of your recommendations.

  0

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @homoki76 No worries 😀

  0