simple html, css and css flex

Community feedback

• 

  Omar M.•270

  @OmarMAttia7Posted almost 3 years ago

  Congratulations on finishing the challenge :). You have a few problems with standard html5 semantic markup, most of them are in the report of your solution.

  1. All your <img> elements should have an alt attribute that describes the image for people who can't view the images like so <img src="images/image-avatar.png" alt="Jules Wyvern">.
  2. The main content of your page should be contained within a <main> element or something equivalent, like so<main> <div class="card-main">
  3. Your page should have one <h1> element, in this case it should be <h1 class="nft-name"> Equilibrium #3429</h1> you can adjust the font-size using css.

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Uzair, great job :)

  Flexbox aligns to the size of the parent container: for center the card try using Flexbox and height:100vh to the body and remove all margin from the .card-main class.

  Viewport Height handles the sizing of an element in relation to the height of the browser window.

  Also look at the report issues. Images must have alt text, it's very important!

  Happy coding!

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @ingnall ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • I suggest you to try transition on hoverable elements like image, heading and creator name.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • Image tags must have alt attributes as standard.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  1