Frontend Mentor | Apenas conhecimentos básicos. coding challenge solution

Solution retrospective

Olá! Tudo bem?

Este é meu primeiro desafio solucionado.

Como um iniciante nas linguagens, eu só usei os conhecimentos que tive até agora. E, como ainda não cheguei na parte de Flexbox ou Grid, usei das artimanhas que tinha para fazer com que o site funcionasse.

Ainda tenho algumas dúvidas em como usar % como medida, pois sempre que uso não sai como o esperado. Caso tenham alguma dica, toda ajuda será bem-vinda.

Adicionei algumas funções visuais como o :hover no "Learning", o qual mudava o background e a cor da fonte.

Hello! How are you?

This is my first solved challenge.

As a beginner in languages, I only used the knowledge I've had so far. Since I haven't reached the Flexbox or Grid part yet, I used the tricks I had to make the website work.

I still have some doubts about using % as a measure because whenever I use it, it doesn't turn out as expected. If you have any tips, any help will be welcome.

I added some visual features like :hover on the "Learning" section, which changed the background and font color.

That's it, guys! I'm open to any suggestions or comments.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 9 months ago

Fala, Leo!

Parabéns pelo seu primeiro projeto! Ficou excelente!

Tenho algumas pequenas sugestões:

Primeira: Vi que você utilizou main e em seguida article pro conteúdo principal. Nesse caso você não precisa envolver o conteúdo principal com 2 tags. A tag article é útil quando trabalhamos com projetos maiores e o conteúdo faz parte de um grupo de outros conteúdos relacionados, mas como aqui só temos o card, a tag main é suficiente. E te ajuda a diminuir um pouquinho seu código.
Segunda: Sempre faça uso do atributo "alt" nas imagens. Ele serve pra você colocar uma descrição da imagem, e se por algum motivo ela não carregar, essa descrição aparece no lugar. Ajuda muito a melhorar a acessibilidade do seu projeto. Exemplo utilizando seu código:

<img id="principal" src="images/illustration-article.svg" alt="colocar a descrição aqui">

Fora esses detalhes, você fez um belo trabalho!

Espero que ajude! Abraço!

Marked as helpful

lsilva021• 80

@lsilva021

Posted 9 months ago

Obrigado, Daniel!

Eu fui seguindo as recomendações de como montar uma estrutura mas não tinha essa informação quanto a quantidades de tags em relação ao tamanho do projeto. Irei aderir com certeza.

A ausência do "alt" realmente foi falta de atenção.

Eu gostaria de perguntar também, o que achou da responsividade? Como foi o assunto que tive mais dificuldade, gostaria de um feedback em relação a isso.

Fiz alguns testes nos dispositivos que tenho acesso, e tudo saiu de acordo com o planejado. Porém, quando postei a solução aqui no site, me parece que ele não fica centralizado.

Caso tenha algum outro tópico para pontuar, será bem vindo.

Daniel 🛸• 44,230

@danielmrz-dev

Posted 9 months ago

@lsilva021

A responsividade me parece muito boa. Mas esse projeto não é o melhor pra você avaliar isso, porque a versão mobile não muda muito em relação à versão desktop.

Eu vou acompanhar seus próximos projetos e terei o maior prazer em te ajudar nessa parte! 💪🏼

Gostaria de te pedir um favor: Se meu primeiro comentário foi realmente útil, por gentileza, clica em Mark as helpful. Isso me ajuda com os pontos na plataforma 😊

Marked as helpful

lsilva021• 80

@lsilva021

Posted 9 months ago

Edit: Adicionais:

<footer>, indicando de onde tirei o desafio, e minha rede social.
Tradução para minha língua nativa ao pairar o mouse sobre o texto, usando a tag <abbr>

Apenas conhecimentos básicos.

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community