using css grid

Community feedback

• Account deletedPosted almost 3 years ago

  Hey @RahulPaul12, some suggestions to improve you code:

  • Stay away from using Bootstrap until you fully grasp the fundamentals.

  • To center your content, add the following to your Body Element:

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

  • Your HTML code isnt structured properly. To better structure your content and make it a lot clearer, you want to implement Semantic HTML.

  Why use Semantic HTML?

  1. 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.
  2. 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.
  3. 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

  • Your use of heading is incorrect. There can only be one h1 heading per page. You used it for several headings.

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

  • The list in the "why us" section should be created using a Unordered List element.

  • 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