its simple html and css, i try my best and i need some help

Community feedback

• 

  Raj Prasad Sanjel•980

  @RajSanjelPosted over 2 years ago

  Congrats on finishing your 1st projects.

  • If you are confused about where to use semantic tags you can learn by clicking here
  • You should learn about grid and flex boxes to make layouts. Some resources for it are
    1. Flex Youtube
    2. Grid Youtube
    3. W3school Flex box
    4. W3school Grid

  If you need any help you can contact me.

  Marked as helpful

  2
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hey, E.Júnio! 👋

  For the HTML, I recommend,

  • Fixing all the issues that have been generated.
  • Wrapping all the elements that have a :hover effect with an interactive element like an anchor tag.
  • The clock icon and the Ethereum icon are decorative images. So, I recommend leaving the alt="" empty to hide those icons from screenreader users. By doing this, the screenreader users can focus on the actual page content.
  • Removing the underscore from the alternative text. Alternative text is the same as the other text (not like code).

  For the CSS, I suggest,

  • Using single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible. 😉
  • Using rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs. I recommend reading this tutorial article about rem and em unit. This article explains both units in a simple way. I recommend reading it if you're not confident to use those units.
  • I recommend selecting the body element directly rather than using the .bg class. Also, I recommend using min-height if you need to set a height on the body element. This way, it will allow growing if ever needed.
  • I recommend using flexbox to,
    • Position the card in the middle of the page by making the body element as the flex container
    • Align the card elements (avatar with the text next to it and .icon section)
  • I didn't use grid to finish this challenge. So, it's up to you if you want to learn about it now or later.

  I hope this helps! Good luck on finishing the challenge! 👍

  Marked as helpful

  0