Skip to content
Submitted 7 months ago

Social-Link-Profile

Bárbara Lurian•80
@Luriian
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    IMPROPER USAGE OF ALT 📸:

    • The alt text "image-profile" for Avatar image is somewhat vague and not descriptive enough.
    • It fails to adequately convey the content or purpose of the image, which is essential for accessibility and user experience.
    • A more appropriate alt text could describe the specific content or function of the avatar, such as "Jessica's profile picture for social media" or "Avatar representing Jessica for social link." This would provide clearer information to users who rely on screen readers or encounter image loading issues.
    • The alt attribute should explain the purpose of the image, in our case the image is a portrait of Jessica. So alt with her name itself is enough.
    • E.g. alt="Jessica"
    <img src="./src/imagens/avatar-jessica.jpeg" alt="Jessica">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 7 months ago

    Olá Bárbara, parabéns pela conclusão do desafio, ele ficou muito bom, e faltou pouco pra chegar próximo do design proposto.

    Gostaria de te dar algumas dicas, notei que o card ficou um pouco mais fino que o design proposto, para deixar mais semelhante, você pode estabelecer um clamp(), para definir o valor mínimo, valor base e o valor máximo. Caso tenha se interessado, aqui um link sobre o clamp: MDN - Clamp

    Outra dica que eu gostaria de dar é sobre as fontes no CSS, eu fortemente recomendo que ao invés de utilizar a unidade de medida px, você utilize a unidade rem, isso porque ela se adapta as configurações de fonte do usuário, dessa forma sua fonte fica mais responsiva e isso aumenta a acessibilidade da sua página.

    Agora sobre o HTML, ele está bem estruturado, mas está com pouca semântica. E ter semântica é importante não só pela questão do SEO, mas também pela questão da acessibilidade. Vou mostrar 3 trechos que poderiam ser alterados e porque eles poderiam ser alterados.

    • <div class="containeer"> deve ser substituído por <main>, isso porque, esse é o conteúdo principal, como também sempre depois de uma tag <body>, vem uma tag <main>.
    • <div class="profile"> poderia ser substituído por uma <article>, isso devido a todo o conteúdo presente nela ser autoexplicativo e independente.
    • <div class="image"> poderia ser substituído por uma <figure>, isso porque o conteúdo de figure é uma imagem que representa o conteúdo.

    E novamente parabéns pela conclusão do desafio, seu projeto ficou muito bom, continue praticando e se aprimorando, se tiver ficado alguma duvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join 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