HTML, SCSS, Grid, Flexbox

Community feedback

• 

  Mojtaba Mosavi•3,760

  @MojtabaMosavi

  Posted over 3 years ago

  1- The social icons are better semantically described inside inside a ul tag, the icons should also be removed from accessibility API which can be done by using aria-hidden: true; attribute and consequently alternative text should be provieded to screen reader which can be done in a number of ways such:

  1- <a href="#" aria-label="alternative text "></a>

  2- <a href="#"> <span class="sr-only"> alternative text</span> </a>

  2- Differenciating between the informative and decorative images is quite hard thing to do but A question that simplifies this process is to weather removal of the image would result in any information being lost ? in this case I think the answer is no because somebody visiting this page using a screen reader would only hear "mockups" and the adjacent text explains everything quite well.

  3- Put max-width on the top-level container so it doen't get to big on large screens.

  Keep coding

  00
• 

  P

  Skyz Walker•1,215

  @Skyz03

  Posted over 3 years ago

  Hi vikrant 👋, Great work on completing the challenge, I really like how made things responsive and it works great on most of the devices. My suggestion is it would be better if you name your css using dash "-" or underscore "_" rather than camelCase. Keep up the great work !

  Also you could have a look at the report section to improve further.

  00