HTML, SCSS, Grid, Flexbox

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

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.