HTML and basic CSS

Community feedback

• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. . Here are my suggestions 1.You should use <main class="container"> instead of <div class="container">.

  2. Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

  3. Only use inline styles when its only necessary most of your styles can be rendered in the css file.

  4. Also add alt text to your images for screen-readers . Regardless you did amazing.. Happy coding!!!

  Marked as helpful

  1

  ---

  

  Riddhidipta Pal•110

  @CodingLife1024Posted over 2 years ago

  @Samadeen Thank you for your helpful feedback!!!

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Pal, good job! I took some time to look at your code and have some ideas for improving it:

  • add main tag and wrap the card for improve the Accessibility
  • not use inline style inside html but write a class into css stylescheet
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the br (break line of text not for separate element)
  • using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • not use \ for path and clear this code <img src="images\icon-ethereum.svg" alt="eth-icon" style="float:left" ;="" width="10"> like this -> <img src="images/icon-ethereum.svg" alt="eth-icon">
  • remove all margin from .container class because with flex they are superfluous
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • you can fix the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • add transition on the element with hover effect

  Overall you did well 😉

  Hope this help and happy coding!

  Marked as helpful

  1
• 

  G-nm•170

  @gmwanikiPosted over 2 years ago

  Hi @CoderBoi1024 to set the overlay icon you can set a url to the icon as a second value to the background property. I would also highly advice you to go through mdn's docs on the background CSS property to also learn more about it.

  Happy Coding

  1