Huddle Landing Page Single Section with HTML and CSS
Design comparison
Solution retrospective
This challenge was quite difficult, probably because it was the first landing page that I submit here. It worked smoothly on the mobile layout, but when it came to adapting the page for the desktop version, the responsiveness was terrible. After several attempts, I managed to achieve a result that I hope you like. Do you have any tips on creating landing pages, or anything that could make the challenge easier? Feel free to comment down below. Happy coding😃
Community feedback
- @brunomoletaPosted over 1 year ago
Hey Kauã, I'm also from Brazil (Curitiba/PR).
When you write in English next time, you can rely on Grammarly to correct your spelling errors ;)
About the social media links on the bottom, I saw you used the
<i>
for the social media links:<footer> <div class="socials"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-twitter"></i> <i class="fa-brands fa-instagram"></i> </div> </footer>
Though, according to MDN,
<i>
it stands forThe Idiomatic Text element
. A french words in a text written in Portuguese, for example.And since these are hyperlinks to a page elsewhere on the web, I would recommend:
<a>
wrapped in a<li>
inside an<ul<
(instead of<div>
).I also included
svg
to display the icons. The following snippet of code is what I did:<footer> <ul> <li> <a href="https://www.facebook.com/" target="_blank" class="a-social-media" aria-label=" Facebook Icon." > <svg id="facebook" </svg> </a> </li> <li class="icon"> <a aria-label="Instagram Icon." href="https://www.instagram.com/" target="_blank" class="a-social-media" > <svg> <path> </svg> </a> </li> <li> <a aria-label=" Twitter Icon." href="https://twitter.com/" target="_blank" class="a-social-media" > <svg> <path> </svg> </a> </li> </ul> </footer>
Further, the
aria-label
inside the<a>
is for the screen-reader accessibility, something you said on Github that you would like to improve.And hey, you've worked hard congrats on that.
I see you have already done quite a few challenges around here. I suggest that you do a few project reviews for other folks. A person can learn a lot by giving feedback on someone else's code.
Boa sorte :)
Marked as helpful1@SouzaSantosKPosted over 1 year ago@brunomoleta Valeu pelo comentário e pela dica do Grammarly :) Desculpa a demora para responder, tava quebrando a cabeça pra resolver o outro desafio. Sobre a tag <i></i>, como eu usei a biblioteca do fontawesome para fazer os ícones, meio que se tornou padrão e costume mantê-la, então nunca pensei que ela poderia não ser recomendada para semântica. Vou começar a arrumar isso nos meus projetos, além de dar uma olhada também nessa aria-label e seus similares👍
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