I used html structure and css , and use of divs and classes selectors

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgo

  Posted about 2 years ago

  Some recommendations regarding your code that could be of interest to you.

  • I think Flexbox is better than Grid in centering both horizontally and vertically. I recommend this method, it's up to you whether to apply it or not :)
  • If you want to make the card centered, you'd better add flexbox and min-height: 100vh to the body
  • For the color of the screen, you can use the recommended color in the body

  body {
    /* background-color: rgba(214, 216, 218, 0.445); */
    /* text-size-adjust: 100%; */
    /* display: grid; */
    /* place-items: center; */
    /* height: 100vh; */
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    /* text-size-adjust: none; */
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% and display: block for the img in this way:

  img {
    /* width: 240px; */
    width: 100%;
    display: block;
    border-radius: 10px;
  }
  

  • You don't need to use .code-div and you can remove it

  /* 
  .code-div {
    margin-bottom: 10px;
    margin-top: 10px;
  } 
  */
  

  Hope I am helpful. :)

  02

  Marked as helpful
• 

  Muhammad Faizan•320

  @Faizan98x

  Posted about 2 years ago

  Use HTML semantic tags as they will help in better SEO. Replace the <div> with <main> or <section>. Follow this link to get more about semantic tags : https://www.w3schools.com/html/html5_semantic_elements.asp

  And also use -moz-text-size-adjust: none; -webkit-text-size-adjust: none; for cross-browser compatibility

  01

  Marked as helpful
• 

  EmmanuelUrias•130

  @EmmanuelUrias

  Posted about 2 years ago

  It looks great, but some things I'd like to point out is that putting some more padding on the bottom would be more aesthetically pleasing, and making the card wider would have made the text fit better within it. Looked at your code base and I would recommend having a consistent format when it comes to tabbing and line spaces to make it more readable and overall look cleaner. Another important thing is a really consistent naming style, you went from camel case with mainDiv to kebab case for code-div. Other than that great job!

  01

  Marked as helpful