Frontend Mentor | Thomas Brito's profile

Synne Storm•320

@synnestormSubmitted 4 days ago

What specific areas of your project would you like help with?

Any feedback appreciated!

Chat App using HTML and CSS

1

Thomas Brito•210

@Thomas-BritoPosted about 10 hours ago

I have just a few suggestions for you:

Make sure to adjust the page proportions properly. For instance, on my laptop, some elements appeared off-screen or out of sync.
Consider adding some animations when the page loads. This will give you more practice with a feature that can be seen as a more advanced use of CSS.

Other than that, excellent work, and I wish you much success! 🚀

0

Luiz Felipe•50

@Luizf-devdiasSubmitted 6 days ago

What are you most proud of, and what would you do differently next time?

Me orgulho de ter tentado fazer ao máximo antes de tentar buscar ajuda, da próxima vez eu me organizaria melhor

What challenges did you encounter, and how did you overcome them?

Encontrei muitos desafios no display grid que aprendi a pouco tempo, ainda estou pegando o jeito, e na hora de trabalhar a responsividade, com muita pesquisa consegui resolver.

What specific areas of your project would you like help with?

Consegui resolver, mas travei muito na responsividade, estou com um pouco de dificuldade em deixar elementos com grid responsivo.

cartão de produto responsivo usando grid e flexbox

1

Thomas Brito•210

@Thomas-BritoPosted 6 days ago

Luiz, parabéns pelo bom trabalho! Você se desenvolveu bem nesse desafio. Gostaria de te dar apenas algumas dicas, que também me ajudam a resolver esses desafios:

1. Flex e Grid: É bom entender bem a diferença entre essas duas formas de visualização. De acordo com o site W3Schools, o display: flex; é útil para layouts unidirecionais, ou seja, com linhas ou colunas. Neste desafio por exemplo, essa visualização serviria bem, porque na versão desktop o design é em linha e na versão mobile é em coluna. Já o display: grid; é próprio para layouts bidirecionais, com linhas e colunas, como em outros desafios aqui do Frontend Mentor. E é claro que o grid é mais difícil de desenvolver do que o flex. Então, entender essa diferença ajuda na hora de escolher qual usar, e poupa tempo e trabalho em projetos mais simples.

2. Unidades de medida absolutas vs relativas: Percebi que você costuma usar unidades de medidas absolutas, como px. Mas por questões de acessibilidade, é melhor usar unidades relativas, como rem. Se você usa o VS Code para escrever os códigos, pode baixar uma extensão que converte mais facilmente os valores entre as unidades de medidas. Se esse não for o caso, esta página do W3Schools pode ser de ajuda.

3. Variáveis: Você também pode usar var(--variáveis) no CSS para reutilizar valores que aparecem em vários lugares na página, como cores e fontes. Isso também poupa tempo e trabalho, e torna o código mais fácil de atualizar.

Reforço que você se saiu muito bem neste desafio. Espero que essas dicas possam ser de ajuda para que você aprimore ainda mais a qualidade do seu trabalho. Sucesso para você! 🚀

Marked as helpful

0

Daniel Nwachukwu•110

@Dannyx-huberfSubmitted 7 days ago

What are you most proud of, and what would you do differently next time?

well the ability to understand grid area template

What challenges did you encounter, and how did you overcome them?

decision between using grid column/row and grid area i overcomed it by using both

Grid area template did the job

1

Thomas Brito•210

@Thomas-BritoPosted 6 days ago

Nice job, congratulations

0

Jeyenor•210

@Jeyenore26Submitted 7 days ago

Flex

1

Thomas Brito•210

@Thomas-BritoPosted 7 days ago

Good job

Marked as helpful

0

Caio Lopes Silva•70

@CaioLopes5556Submitted 13 days ago

What challenges did you encounter, and how did you overcome them?

Acho que o maior desafio foi em relação a imagem na versão Desktop, tentar deixa-la do mesmo tamanho que a .right-content ao lado dela. As vezes dependendo do width definido para o .container a imagem ficava muito achatada. Então defini o .container como 100rem e mudei o tamanho da .right-content e da imagem a esquerda para 50%. Não sei se foi a melhor escolha, mas deu certo.

What specific areas of your project would you like help with?

Eu utilizei o Chrome para visualizar o site enquanto estava desenvolvendo e tudo certo. Mas depois, quando fui fazer capturas de tela pelo Firefox para colocar no README, percebi um problema. A imagem não fica com o mesmo tamanho da div .left-content ao lado. Se alguém souber explicar o motivo ficarei muito agradecido e farei as alterações necessárias. Estou aberto para dicas e criticas caso encontrem outros erros.