All solutions

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

PORTUGUESE O que me orgulha é ter projeto, fora ter concluido de forma expressamente rápida, foi personalizar a barra de rolagem quando a altura do viewport é menor do que o conteúdo. Também, utilizar a tag picture para representar a imagem. Realmente, estou pegando o jeito com estes conjuntos de tags html.

ENGLISH What I'm proud of is having a project, besides having completed it so quickly, was customizing the scroll bar when the viewport height is smaller than the content. Also, using the picture tag to represent the image. I'm really getting the hang of these sets of HTML tags.

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

PORTUGUESE Alinhar o conteúdo da página sempre me deixa em dúvida. Para superar isso, primeiro cuidei do layout, depois do alinhamento da tag main.

ENGLISH Aligning the content of a page always leaves me in doubt. To overcome this, I first took care of the layout, then the alignment of the main tag.

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

PORTUGUESE Até agora os projetos estão simples. Quando entra uma propriedade nova, tipo sombras, tenho que pesquisar um pouco para lembrar da estrutura da sintaxe em CSS.

ENGLISH So far the projects are simple. When a new property, like shadows, comes in, I have to do some research to remember the syntax structure in CSS.

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

PORTUGUESE A cada novo projeto um novo aprendizado. Por isso pretento continuar a me aventurar na área do design. Atualmente estou tentando mesclar entre grade e flexbox. Estou percebendo a melhoria de entendimento das duas funções.

ENGLISH With each new project comes a new learning experience. That's why I intend to continue my adventures in the design field. I'm currently trying to merge grid and flexbox. I'm noticing an improvement in understanding both functions.

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

PORTUGUESE A estrutura é a peça principal do layout. Por isso, gastar um tempo analisando onde aplicar Grades e Flex é um bom começo.

ENGLISH The structure is the main part of the layout, so spending some time analyzing where to apply Grids and Flex is a good place to start.

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

PORTUGUESE Caso tenha alguma coisa a contribuir, por favor, sinta-se a vontade para mandar um pull request no repositório do desafio, irei apreciar muito.

ENGLISH If you have anything to contribute, please feel free to send a pull request to the challenge repository, I will greatly appreciate it.

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

PORTUGUESE Flexbox, Flexbox, Flexbox... e por ai vai...

A vida não é toda feita de Flexbox. Entender outras formas de posicionamentos de elementos também é válida. Neste projeto usei os dois, Grid para estruturar card o card em grade de linhas e colunas (é mais fácil gerencia-los) e Flexbox para alinhar os elementos dentro de cada grade.

Dessa forma, fica mais fácil posicionar os elementos no design e quando precisar, usar Flexbox para separa-los horizontalmente.

Como é um projeto de aprendizado, escolhi utilizar esta abordagem. Aproveitei e coloquei um pouco de animação entre as transições de responsividades.

ENGLISH Flexbox, Flexbox, Flexbox... and so on...

Life isn't all about Flexbox. Understanding other ways of positioning elements is also valid. In this project I used both: Grid to structure each card in a grid of rows and columns (it's easier to manage them) and Flexbox to align the elements within each grid.

This way, it's easier to position the elements in the design and, when necessary, use Flexbox to separate them horizontally.

Since this is a learning project, I chose to use this approach. I took the opportunity to add some animation between the responsive transitions.

I hope you like it!

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

PORTUGUES Pensar como alinhar o projeto final no meio da tela sempre é um desafio, pois há várias maneiras de fazer. Dessa vez, escolhi grid-template.

ENGLISH Thinking about how to align the final project in the middle of the screen is always a challenge, as there are several ways to do it. This time, I chose grid-template.

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

PORTUGUESE Animações com CSS é um dos objetivos que tenho que alcançar. Neste projeto, provei um pouco dessa funcionalidade. Mas, em breve, pretendo utilizar em mais elementos.

ENGLISH CSS animations are one of the goals I have to achieve. In this project, I tried out a little of this functionality. But I intend to use it in more elements soon.

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

English // I'm proud to have completed this little challenge in just a few hours. It's a very small project, but it forces us to think hard about what we know and what we can use to execute it in a logical and easy way.

Portuguese // Estou orgulhoso de ter completado esse pequeno desafio em apenas algumas horas. É um projeto muito pequeno, mas nos força a pensar bastante sobre o que sabemos e o que podemos usar para executá-lo de forma lógica e fácil.

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

English // When using a container for the image and making its corners rounded, I don't know why, but the image didn't fit completely inside the container. To solve this, I had to use flexbox.

Portuguese // Ao usar um container para a imagem e tornar seus cantos arredondados, não sei explicar o motivo, mas a imagem não ficava totalmente dentro do container. Para resolver isso, tive que usar flexbox.

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

English // What was a bit difficult was centering the component on the horizontal and vertical axis. Since there are several ways to achieve the same result, I chose one and went ahead.

Portuguese // O que foi um pouco difícil foi centralizar o componente no eixo horizontal e vertical. Como há várias maneiras de atingir o mesmo resultado, escolhi uma e fui em frente.

English // Using Google - Portuguese // Usando Google Trandutor