Design comparison
Solution retrospective
Give review on this and find out the errors......
Community feedback
- @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag to fix the accessibility issue. the class of the icon tag should replace the class you gave the <a> anchor tag. e.g:
<a href= "#" class="fa-brands fa-twitter fa-lg"> </a>
repeat this for all the social media icons. In the styling usefa-brands
to style the icons.for the hero-image to responsive give .hero-image a max-width of 100% instead of a fixed width value. Add a max-width value to .container and replace the margin value with margin: 0 auto; e.g:
.container{ max-width:1440px; width: 90%; margin: 0 auto; }
Give .header a padding value and margin-bottom value.
Hope am helpful HAPPY CODING
0 - @eewa-SANJPosted almost 2 years ago
Hello!. Your solution looks fantastic and I have gone through your code. There are a few issues found in your codes. Here are my findings.
- You don't set ALT attributes in some of your images. Try to set proper alt attributes in your coding because it is important for accessibility reasons as well as SEO
- You don't put the default CSS reset coding in a CSS file. It is essential to reset the default CSS in order to minimize conflicts with your custom CSS. [Read this
- In small screen sizes, your social media icons still right side so you fix that to the center to look more consistent
- Also, the logo is centered on small device sizes, which is different than the design files. You can ignore this only suggestion
I think, my findings will help you to improve your coding.
Happy coding😊
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord