Flexbox,css,html

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello GiovanniMacario, Congratulation on completing your first project. Your solution is really nice . I have some suggestions ,to tackle the accessibility issues

  • All page content should be contained by landmarks. So wrap the body content in <main > and you can replace the <div> by a <footer>. to read more

  • Page should contain a level-one heading .

  • I can see you're trying to use semantic elements, but using header and footer in this kind of component can actually damage accessibility rather than help it. you're misusing section element. This doesn't need any sections, just a main element for the component and a footer for the attribution.

  • on mobile landscape the card is very close to the top and bottom of my screen. A little margin on the card or padding on the outer element should sort that. -use interactive elements (in this case anchor tags) for anything that should have interactive behaviour (hover styles indicate interactivity) around the image , title and Jules Wyvern.

  • And for alt="Avatar" the text should more descriptive not only avatar . Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document. (Keep it short and descriptive)

  -The eye image doesn't really need to be in the html, you could do it with css.

  • You shouldn't use <hr> ( no need for a seperator ) you can use border-top property for the class="author-section

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

  • You can use unordered list <ul> to wrap <div class="card__icon"> and in each list item would have <img > and <p>. (no need for divs)

  • Use a css reset at the start

  • I would recommend to check @vanzasetia solution and read the read me file as he explained a lot. I' m sure it helps. I really hope this feedback helps , happy coding

  Marked as helpful

  0