using css grid

Community feedback

• Account deletedPosted almost 3 years ago

  Hey, some suggestions to improve you code:

  • Currently, your HTML code has no structure. To better structure your content and make it a lot clearer, you want to implement Semantic HTML.

  Why use Semantic HTML?

  • Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.
  • SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.
  • Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.

  More Info

  [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure] (https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)

  https://www.freecodecamp.org/news/semantic-html5-elements/

  https://dev.to/poulamic/writing-semantic-html-3436

  • Headings are not being use properly. Normally you would start with an h1 heading but for this card, its safe to assume that its part of a bigger project, so your safest option, would be to use an h2 Element for each heading.

  • "Buttons" were created with the incorrect element. Since this buttons will most likely direct the user to a different part of you site, its better to use an Anchor Tag to create the buttons.

  • To keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…

  More Info

  https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  https://www.w3schools.com/css/css3_variables.asp

  • 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

  • To make it easier to deal with CSS , have more control over your content, and ensure that your content will look the same regardless of browser used I suggest using CSS Resets.

  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/

  Happy Coding!

  00