HTML, CSS

Community feedback

• 

  AlbanDavid494•40

  @AlbanDavid494Posted 9 months ago

  Thanks alot. Let me work on it immediately

  0
• 

  Anyona Zaddock Ogada•190

  @zacc-anyonaPosted 9 months ago

  Hello @AlbanDavid494, Your solution is good, but there are some few areas you can improve on.

  • Your page is not well landmarked. For example the div element with class attribution you could have enclosed it with <footer></footer>. Footer element is used to display author information, contact details. It is normally found at the bottom. But your author details are appearing at the top of the page.

  • Responsiveness. Your page is not that responsive especially for mobile devices. Consider reformatting your media query to;

  @media screen and (max-width: 600px) 
  /*for smaller screens have a standard a width of 600px*/
  

  • The challenge was about social media links. Consider to add <a href=""></a> to your buttons.

  Other than that you have done a great job in completing this challenge.

  0
• 

  Lahan•210

  @lahanhelithPosted 9 months ago

  Hey man!

  You have done an OK job with your solution but it seems you had trouble centering it horizontally and vertically. For this, you can use CSS Flexbox on the body by using this code in CSS.

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

  If you have no idea about what Flexbox is or how you can work with it you can watch this video which explains the concept quite clearly.

  Also, there are some things you can change within your HTML such as using a <main> element to contain your card content which does not impact how it looks and using an <h1> tag with a reduced font size which aids in SEO.

  Furthermore, it is possible to make the card look responsive on all screen sizes without using a media query which I would suggest you try to achieve.

  Good Luck with your Frontend Journey!

  0