singe page price component

Community feedback

• 

  wess-MHHW•620

  @wess-MHHWPosted 10 months ago

  Hey Ali, fantastic work on your project! You've achieved a lot, and with a few tweaks, it could be truly exceptional.

  Firstly, consider organizing your code by creating separate files for HTML and CSS.

  This practice, common in web development, enhances code management, especially in larger projects, and contributes to better overall performance. Adapting this habit in smaller projects will set a solid foundation for future endeavors.

  Things I like about your code:

  • Including the <main> tag, which many people do not include.
  • Setting up colors and fonts as Custom Properties.

  Suggestions for improvement:

  HTML

  In the Why us section, observe the design preview where each sentence is on a single line. You have two choices: either use the <br> tag to separate them or create a <p> tag for each paragraph.

  Using <br>:

  <p>Tutorials by industry experts<br>
      Peer &amp; expert code review<br>
      Coding exercises<br>
      Access to our GitHub repos<br>
      Community forum<br>
      Flashcard decks<br>
      New videos every week</p>
  

  Using <p>:

  <p>Tutorials by industry experts</p>
  <p>Peer &amp; expert code review</p>
  <p>Coding exercises</p>
  <p>Access to our GitHub repos</p>
  <p>Community forum</p>
  <p>Flashcard decks</p>
  <p>New videos every week</p>
  

  CSS

  To perfectly center an element on the screen :

  1.Ensure that the body occupies at least the entire screen height.

  body {
      min-height: 100vh;
  }
  

  2.Utilize one of these techniques: Grid CSS or Flexbox.

  Relying solely on margins may fall short.

  Using Grid:

  main {
      display: grid;
      place-items: center;
  }
  

  Using Flexbox:

  main {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Feel free to explore other solutions. Additionally, check out my take here. I'm open to any feedback.

  Great job once again on your hard work, and best of luck!

  0