A simple first beginner Frontend Mentor project

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hi! Welcome to the frontend mentor community!🙂

  Your solution actually looks quite good!

  I just have 2 suggestions that you can use to improve the code:

  • Instead of applying flex and its properties to the .main-container you can actually apply those to the body like this:

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

  • We add min-height: 100vh to the body because flexbox needs to have a height for the content to vertically center inside of. This way you can remove margin: 25vh auto; from the main container as it adds a scrollbar to view the component.
  • Instead of using a div as the main-container you should use the <main> tag which is generally good for accessibility purposes, it provides a clear and meaningful structure to your HTML and it helps search engines understand the purpose and the main content of the page. You just have to change the div to main like this:

  <main class="main-container">
  //rest of the code
  </main>
  

  Rest of the code looks nice!

  Keep up the hard work and once again welcome!🕺🏻

  Marked as helpful

  0
• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. Just a few thing you can change

  • Set the height on the body to min-height: 100vh;
  • Add flexbox on the body to place the card in the middle of the page
  • Add a margin on the bottom of the card to create a space between card and footer

  body {
    font-family: "Outfit", sans-serif;
    background-color: var(--light-gray);
    font-size: 15px;
    min-height: 100vh; /**/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* Main */
  
  .main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--white);
    width: 350px;
    /*! margin: 25vh auto; */ /* remove this line. flexbox on the body will do the same */
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 5px 25px -20px var(--dark-blue);
  }
  
  

  Marked as helpful

  0
• 

  Omar•240

  @omar-csdevPosted over 1 year ago

  Very minor thing that I tend to notice: you can adjust the font size or the width of the card to match which words are at which line. What I mean is if you look at your version and see the last line you can see two words, while the solution shows three words.

  Apart from that, code seems good to me :)

  Marked as helpful

  0