Responsive using flexbox. HTML - CSS

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Greeting Luis,

  Congratulation on completing this frontend mentor challenge.

  I have some suggestions regarding your solution:

  • There should be two landmark components as children of the body element - a main (which will be the NFT card) as you did and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

  • Anything with a hover style in design means it's interactive. you need to add an interactive element <a> around the image.

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

  • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • No need to mention image in the alternative text as It’s going to be obvious to either a person or a machine when something they're accessing is alt text also When you write alternative text, it should not be hyphenated.

  • The avatar's alt should not be image-avatar. It's meaningless .You can use the creator's name Jules Wyvern. Read more how to write an alt text

  • To use more semantic tags , you can use <ul> to wrap class="update"and in each <li> there would be<img>and <p>. (not a <h2>) You can use <figure> and <figcaption > for the avatar's part.

  CSS

  • font-size: 62.5%; this has huge accessibility implications for those of us with different font size or zoom requirements. It's recommended not change the html or root font size.

  • Consider using min-height: 100vh; instead of height: 100% to the body allows the body to set a minimum height value based upon the full height of the viewport also allows the body to to grow taller if the content outgrows the visible page.

  General points :

  • It's recommended to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  Overall , your solution is good. Hopefully this feedback helps.

  10

  Marked as helpful