CSS Flexbox , responsive

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Hey @sinemcetin94, some suggestions to improve you code:

  • While this project is small and doesn't have many components, you want tostay away from IDs when naming your content. They are not reusable and are mainly used for JavaScript. Its best practice to use, classes for your naming convention as classes are reusable, making them ideal for CSS styling.

  • Your "button" was created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

  • Your CSS Reset is extremely bare. You want to add more to it.

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

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

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

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

  • For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

  More Info:

  https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

  https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

  Happy Coding!

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Sinem, You have done a good work! 😁

  Some little tips to improve your code:

  • use main tag to wrap the card and improve the Accessibility but not as a container of that one element
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • remove all margin from container class because with flex they are superfluous
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  0