All solutions

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

Trabalhar neste projeto foi uma ótima experiência para aprimorar minhas habilidades em design responsivo e interatividade com JavaScript. No entanto, sempre há espaço para melhorias. Aqui estão algumas áreas que eu gostaria de focar para melhorar ainda mais:

CSS Avançado: Aprofundar meu conhecimento em técnicas avançadas de CSS, como animações e transições para tornar os elementos mais dinâmicos e atrativos.

JavaScript Intermediário/Avançado: Continuar explorando conceitos mais avançados de JavaScript, como manipulação de eventos complexos e uso de APIs para criar experiências mais interativas e personalizadas.

Acessibilidade: Garantir que meu código atenda aos padrões de acessibilidade, tornando meus projetos acessíveis para todos os usuários, incluindo aqueles com necessidades especiais.

Desempenho: Otimizar o desempenho do site, reduzindo o tempo de carregamento e melhorando a eficiência do código para uma experiência de usuário mais rápida e fluida.

Testes: Implementar testes automatizados para garantir a estabilidade e a qualidade do código, especialmente ao introduzir novas funcionalidades ou fazer alterações significativas.

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

No desenvolvimento deste projeto, encontrei alguns desafios interessantes que me ajudaram a crescer como desenvolvedor. Aqui estão alguns deles e como os superei:

Layout Responsivo: Enfrentei desafios ao criar um layout que se adaptasse bem a diferentes dispositivos. Superei isso usando uma abordagem mobile-first e técnicas de CSS flexbox e grid.

Manipulação de SVGs e Interatividade: Lidar com a mudança de cor dos ícones SVG e a rotação da seta exigiu manipulação de atributos SVG e eventos JavaScript. Aprendi e apliquei esses conceitos para criar interações suaves.

Organização do Código: Mantive o código limpo e organizado, dividindo-o em componentes reutilizáveis e usando comentários explicativos para facilitar a manutenção.

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

Na verdade, uma área que eu acharia desafiadora e que poderia precisar de mais orientação é a manipulação avançada de SVGs. Implementar efeitos complexos ou animações específicas nos elementos SVG pode exigir um conhecimento mais profundo sobre suas propriedades e métodos de manipulação, especialmente quando combinado com interações dinâmicas usando JavaScript. Portanto, receber orientação de especialistas nesse campo me ajudaria a explorar todo o potencial dos SVGs e aprimorar a qualidade e a experiência do usuário no projeto.

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

O que mais me orgulho:

Este projeto foi um pouco desafiador, especialmente por envolver uma quantidade significativa de JavaScript, sendo o meu primeiro projeto com uma carga tão grande dessa linguagem. Estou muito orgulhoso de mim mesmo por ter conseguido realizar a maior parte dele sem recorrer a informações externas (embora não veja problema em buscar ajuda, antes eu dependia mais de referências externas do que da minha própria capacidade).

O que eu faria diferente na próxima vez:

Tentei começar pelo design mobile em vez do desktop, mas encontrei dificuldades. Para os próximos projetos, pretendo persistir na abordagem mobile first, pois parece ser mais fácil de testar e pode facilitar o desenvolvimento de uma experiência mais consistente para o usuário em diferentes dispositivos.

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

Implementar um carrossel de imagens com posicionamento absoluto, utilizando JavaScript para centralizar as imagens na tela e, em seguida, retorná-las à posição original. Busquei informações sobre posicionamento e carrossel em (https://developer.mozilla.org/pt-BR/) e consegui superar os erros por meio de testes e experimentação.

Lidar com o tamanho do ``, mas gostaria de encontrar uma solução mais elegante, se possível.

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

No HTML:

Criar classes em português ou inglês? Utilizando - ou _? Tem alguma forma de criar as classes com nomes melhores? Por exemplo, cart-container, cart...

No CSS:

Eu bato muito na tecla da quantidade de linhas no CSS, mas não consigo diminuir. Sempre finalizo um projeto com milhões de linhas. Teriam alguma ideia de como diminuir? Como posso encurtar linhas ou como posso arrumar meu CSS para, depois de um tempo, voltar no código e entender o que cada parte é?

No JS:

Criei muitas variáveis, não sei se é algo ruim ou não, mas gostaria de uma resposta quanto a isso.

As variáveis no topo da tela é algo errado ou seria melhor antes de tal função que utilize aquele código? Por exemplo, se vou criar uma função para o main, eu crio a variável antes da função apenas.

Na função ``, precisei procurar muito para conseguir encaixar um if-else que funcionasse. Teria outra forma mais fácil de criar essa função em o incrementar e decrementar?

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

Minha maior dificuldade anteriormente era transferir os dados inseridos nos campos de entrada para os cartões, mas percebi que foi bastante simples depois de estudar alguns tópicos adicionais.

Faria de forma diferente:

Eu começaria pelo design para dispositivos móveis e, em seguida, utilizaria media queries para ajustar para desktop. É mais fácil fazer ajustes em uma tela grande do que em uma tela pequena.

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

No início, eu enfrentava dificuldades em manter o tamanho dos cartões quando a tela era reduzida. Após muitos ajustes, percebi que estavam se adaptando à altura da tela em vez da largura. Ao definir uma altura fixa, consegui mantê-los estáticos, sem mais alterações indesejadas.

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

Optei por utilizar media query somente para 375px, conforme indicado no README do desafio, então por favor, não foquem nos ajustes feitos entre 375px e 1280px, haha!

Preciso de ajuda na versão mobile. Ao testar em um dispositivo com largura de 375px, percebo um espaço roxo no lado direito do corpo da página quando movo a tela para o lado. Tentei diversas abordagens para eliminar esse espaço, pois ele está além da largura esperada de 375px, mas não obtive sucesso. Mesmo reduzindo o tamanho do body ou removendo itens do main ou container, o espaço persiste.

Agradeço antecipadamente por qualquer assistência que possam oferecer!

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

Foi uma tarefa simples, mas bem estruturada. Não encontrei desafios.

Gostaria de saber se a forma em que deixei o container no meio da página está certo ou tem outra forma de fazer sem usar margin ou padding?

O drop shadow da hover image, teria como deixar como cyan mais saturado?

obrigado.