1
resposta

[Projeto] 7 Days of Code: Aprimorando com a IA

  1. Escolha do Desafio
    Explorei os desafios propostos e escolhi um na área de Front-End: criar um cartão de produto para um e-commerce usando HTML e CSS. Achei a ideia perfeita para praticar minhas habilidades e, ao mesmo tempo, ter um projeto visualmente atraente para o meu portfólio.

  2. Pesquisa de Orientações com a IA
    Para começar, usei o ChatGPT para me orientar. Formulei o seguinte prompt:

"Preciso criar um cartão de produto para um e-commerce usando HTML e CSS. Me dê um passo a passo para a estrutura do HTML e sugestões de estilo em CSS para que o cartão seja moderno e responsivo. Inclua dicas sobre como organizar o código."

O ChatGPT me forneceu uma estrutura básica para o HTML, com divs para a imagem, título, preço e um botão de compra. Para o CSS, ele sugeriu o uso de Flexbox ou Grid para o layout, além de propriedades como box-shadow, border-radius e transições suaves para o botão, o que me ajudou a pensar em um design mais polido.

  1. Implementação da Solução
    Com as orientações da IA, comecei a codificar.

HTML: Estruturei o código exatamente como sugerido, criando classes semânticas como .product-card, .product-image, .product-title, .product-price e .buy-button.

CSS: Apliquei as sugestões de estilo para o layout, usando display: flex para alinhar os elementos. Adicionei sombras sutis, arredondei as bordas e usei hover para criar uma animação no botão, tornando a experiência do usuário mais interativa. Usei uma media query para ajustar o layout em telas menores, garantindo a responsividade.

Ajustes: Durante o processo, usei a IA novamente para me ajudar com um seletor CSS que eu não estava conseguindo aplicar corretamente. Ela me forneceu o trecho de código exato que eu precisava.

  1. Compartilhamento e Discussão
    O resultado final foi um cartão de produto funcional, moderno e responsivo, que superou minhas expectativas. A IA atuou como uma colaboradora, me fornecendo um ponto de partida sólido e me ajudando a resolver problemas específicos durante a implementação. Compartilhei meu projeto no fórum do "7 Days of Code" e também no meu GitHub. A experiência me mostrou que a IA não substitui o desenvolvedor, mas é uma ferramenta poderosa que potencializa a criatividade e acelera o processo de aprendizado.
1 resposta

Olá, Guilherme, tudo bem?

Que incrível ver como você está utilizando a IA para aprimorar suas habilidades no desafio "7 Days of Code"! Escolher um projeto de Front-End como criar um cartão de produto para um e-commerce é uma excelente maneira de praticar e enriquecer seu portfólio.

Você seguiu um caminho muito eficaz ao usar o ChatGPT para obter um passo a passo e sugestões de estilo. Continue assim!

Dica: Compartilhar seu projeto no fórum e no GitHub é uma ótima maneira de obter feedback e mostrar seu progresso.

Abraços e bons estudos!

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!