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

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year 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. :)

  Marked as helpful

  0

  ---

  

  KabongeHajarah•40

  @KabongeHajarahPosted over 1 year ago

  @ecemgo Thank you for your recommendations! I appreciate your input on improving the code and taking the time to share your expertise! I will definitely consider your suggestions in future projects. Thank you again for your assistance! This was very hopeful.

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @KabongeHajarah happy to help! :)

  0
• 

  Muhammad Faizan•320

  @Faizan98xPosted over 1 year 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

  Marked as helpful

  0

  ---

  

  KabongeHajarah•40

  @KabongeHajarahPosted over 1 year ago

  @Faizan98x Thank you for your feedback! I appreciate your suggestion to use HTML semantic tags for better SEO. I will definitely look into incorporating <main> or <section> tags instead of <div> to improve the semantic structure of my HTML code.

  I also appreciate your tip about using "-moz-text-size-adjust: none; -webkit-text-size-adjust: none;" for cross-browser compatibility,honestly i had no idea about it but now i have learnt it. Thank you for sharing the link to learn more about HTML semantic tags.

  1
• 

  EmmanuelUrias•130

  @EmmanuelUriasPosted over 1 year 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!

  Marked as helpful

  0

  ---

  

  KabongeHajarah•40

  @KabongeHajarahPosted over 1 year ago

  @EmmanuelUrias Thank you again for taking the time to review my work and provide feedback. I value constructive criticism and will use it to continually improve my skills and produce better quality code.I really appreciate .This was very helpful

  0