Looking to hire developers?
Tools
VSCode
Git
Prettier
Built with
My process
Areas of the code i was not sure of
@media screen and (max-width: 425px) {
.container{
min-width: 87%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
i will need more explaination on media query
@NehalSahu8055
Posted
Also
➨ Use background:transparent; on hovering.
.btn:hover{
background:transparent;
}
➨ Use responsive units(rem, em, %) from next project. Explore respective use cases on google.
link.
➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.
@aboisam
Posted
Thank you very much observation and correction @NehalSahu8055
@NehalSahu8055
Posted
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design.
➨ To properly center the container.
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
body{
min-height: 100vh;
display: grid;
place-items: center;
}
➨Use Semantics for the proper design of your code.
<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
wrap up `.attribution` inside `footer`
</body>
➨ For image like .svg are decorative which screen reader will not render it to be important and skip it, so it make no sense to add alt leave it blank.
I hope you find this helpful.
Happy coding😄
@aboisam
Posted
Thank so much for your observation and correction @NehalSahu8055
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
