Bem-vindo ao repositório do projeto de carrossel de produtos! Este projeto será desenvolvido ao vivo em uma aula prática para iniciantes na área de tecnologia, onde você aprenderá os conceitos básicos de HTML, CSS e JavaScript aplicados em um componente funcional e dinâmico.
O objetivo deste projeto é construir um carrossel de produtos do site da Rihappy, um componente comum em interfaces de e-commerce, utilizando HTML, CSS e JavaScript. Durante a aula, abordaremos conceitos essenciais e mostraremos cada etapa de desenvolvimento.
Este repositório contém a estrutura básica inicial do projeto, com pastas organizadas para HTML, CSS e JavaScript. Conforme avançamos no desenvolvimento, novos commits serão feitos com cada etapa completa, permitindo que você acompanhe o progresso ou use o código como referência, caso se perca em alguma parte.
- Clone o Repositório:
git clone https://github.com/JefersonDuarte/BTC-Coding-The-Future-Ri-Happy.git
- Crie Seu Próprio Repositório:
- Após clonar, copie todos os arquivos para uma nova pasta.
- Crie um repositório pessoal em seu GitHub e carregue os arquivos copiados para ele.
- Esse repositório será onde você fará suas próprias alterações, mantendo o repositório clonado como referência.
- index.html: Estrutura HTML do carrossel de produtos.
- style.css: Estilos CSS básicos para o layout e design.
- script.js: Código JavaScript para adicionar funcionalidade e interatividade ao carrossel.
- Editor de Código: Recomendo usar VS Code.
- Extensão Live Server (opcional): Essa extensão permite visualizar as mudanças em tempo real. Para instalar, basta buscar por "Live Server" nas extensões do VS Code.
- Criaremos a estrutura básica do carrossel e dos elementos de produto.
- Aplicaremos estilos ao layout do carrossel e aos produtos.
- Implementaremos a funcionalidade do carrossel para que ele possa exibir diferentes produtos ao interagir com botões de navegação.
Conforme avançarmos no desenvolvimento, farei commits com os seguintes marcos:
- Estrutura HTML inicial
- CSS - Estilos básicos
- JS - Adicionando funcionalidade de navegação
- Versão Final
Você pode acompanhar cada commit para ver as mudanças feitas e entender melhor cada etapa.
Caso encontre dificuldades, aqui estão algumas dicas:
- CSS não está sendo aplicado: Verifique se o arquivo
style.cssestá linkado corretamente no HTML. - JavaScript não está funcionando: Certifique-se de que o arquivo
script.jsestá linkado corretamente e que o código JavaScript está carregando após o HTML. - Imagens não aparecem: Verifique o caminho das imagens e se elas estão na pasta correta.
Ao final do projeto, compare seu código com a Versão Final disponível neste repositório para revisar e corrigir qualquer diferença.