Alura Plus Combo
Alura Plus Combo
Repositório replicando site Alura Plus Combo, utilizando javascript, css3, html5, tailwindcss e gulp para performance e build.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Alura Plus Combo |
| 🏷️ Tecnologias | javascript, html5, css3, tailwindcss, gulp e figma |
| 🚀 URL | https://aluraplus-hazel-iota.vercel.app/ |
| 🔥 Desafio | - |
Tecnologias - Introdução - Desafios - Funcionamento - Conclusão - Contato
💾 Tecnologias utilizadas
📑 Introdução
Página moderna voltada à conversão do cliente para seu site. Este modelo de pagina é conhecida por Landing Page.
Landing Page: página que conta com todos os elementos voltados à conversão do visitante ao Lead ou da oportunidade ao cliente. Também conhecidas como páginas de aterrissagem, páginas de conversão ou de captura, elas são item-chave nas campanhas de Marketing Digital.
Originalmente criada em HTML5, CSS3 e JavaScript. Criei a página observando os requisitos do layout Figma.
Foram realizadas várias modificações como Mobile-First, abstração do css com Tailwindcss e build com tarefas Gulp para aumento da performance.
Desktop
Tablet
Mobile
⚠️ Desafios | Problemas Vs Soluções
Estrutura do projeto
Foi redefinida a estrutura de pastas do projeto como Build (versão prod do deloy na vercel) e Site (versão dev).
Modifiquei o projeto para Mobile-First.
Adicionei responsividade ao projeto Mobile | Tablet | Desktop.
Styles | css
Utilizei o framework Tailwindcss para gerar o css do projeto.
SEO
Adicionei as metas tags referente a SEO.
Criei arquivo .htaccess para melhorar os links do projeto e adicionei script de segurança.
Criei robots.txt e sitemap.xml.
Desempenho
Adicionei as fonts diretamente ao servidor.
Fiz um preload do logo e banner.
Adicionei tags picture e source para baixar imagens adequadas para cada tela.
Adicionei lazyload nas imagens abaixo da primeira sessão.
Modifiquei formato das imagens para webp.
Minifiquei arquivos HTML, CSS e JS.
Adicionei arquivos Js inline para um limite de html ate de 16kb.
Automação | Build
Desenvolvi tarefas no Gulp para otimizar e automatizar o fluxo de desenvolvimento e build.
Ao digitar no terminal gulp start, preparamos o projeto para ambiente de desenvolvimento com tailwindcss monitorando os arquivos.html do projeto.
Ao digitar somente gulp já realiza o build do projeto seguindo as tarefas abaixo.
gulp.task(
"default",
gulp.series(
"clean",
gulp.parallel("copy-font", "copy-robots"),
"imagemin",
"separaCss",
"concatena-inline-minifica",
"replace-html-build",
"replace-caminho-css",
"sitemap",
"replace-sitemap",
"clean-css-pages"
)
);
Todos os arquivos necessários são enviados para pasta build e ficam prontos para o commit. Após commit o deloy na vercel é automático.
✅ Como Executar
Para executar o projeto basta realizar o download do repositório.
É preciso ter nodejs instalado, para usar o npm. Também usamos a extensão Live Server do VsCode
Salve em uma pasta de sua escolha e abra a mesma no VSCode.
- Instalar as dependências do projeto
Clique com botão direito do mouse no nome da pasta no WORKSPACE e selecione a opção "Abrir no terminal integrado". Digite:
npm install
- Iniciar ambiente DEV e realizar modificações
gulp start
- Realizar build do projeto e enviar todos os arquivos otimizados para pasta build
gulp
:+1: Conclusão
O objetivo alem de fazer o site foi utilizar as boas praticas para performance e otimização para batermos todos os indicadores do google lighthouse. Além disso adicionamos resposividade, performance, SEO e acessibilidade.
Além de fazer o site, o objetivo buscado e alcançado foi utilizar as boas práticas para performance e otimização para batermos todos os indicadores do google lighthouse. Adicionamos resposividade, performance, SEO e acessibilidade. Além disso, usamos o framework Tailwindcss que facilita a aplicação de css e evita a repetição de código.
✉️ Contato
Olá, eu sou Livio Alvarenga, Engenheiro de Produção | Dev Back-end e Front-end. Sou aficcionado por tecnologia, programação, processos e planejamento. Uni todas essas paixões em uma só profissão. Dúvidas, sugestões e críticas são super bem vindas. Seguem meus contatos.
🚫 License
Este projeto é MIT licensed.
📚 Mais informações do curso
Alura: HTML e CSS: praticando HTML/CSS.
Não foi abordado neste curso Tailwindcss, Responsividade e Performance.
😄 Agradecimento especial
Agradeço a instrutora Monica Hillman que lecionou um excelente curso e a Alura. Muito Obrigado.