Pular para conteúdo

Aula 16 - Projeto Final + Deploy 🚢

Objetivo

Objetivo: Consolidar todo o conhecimento de HTML5 e CSS3 construindo um projeto completo, responsivo e interativo, e aprender como publicar seu site gratuitamente para que qualquer pessoa no mundo possa acessá-lo via GitHub Pages.

1. O Desafio Final: Seu Portfólio ou Site de Empresa 🏗️

Neste projeto, você deve unir a estrutura semântica do Módulo 2 com o estilo avançado, layout e animações do Módulo 3.

Requisitos Obrigatórios:

  • Semântica: Header, Nav, Main (com sections), e Footer.
  • Estilo: Uso de cores harmoniosas e fontes profissionais (Google Fonts).
  • Layout: Flexbox para o menu/cards e Grid para a estrutura da página.
  • Responsividade: O site deve funcionar perfeitamente no celular e no PC.
  • Interatividade: No mínimo uma animação com Keyframes e transições nos botões.

2. O que é Deploy? ☁️

Fazer o Deploy significa colocar o seu site (que hoje só existe no seu computador) em um servidor na nuvem. Existem várias formas de fazer isso, mas a mais usada por desenvolvedores é o GitHub Pages.

3. Passo a Passo do Deploy no GitHub 🚀

Etapa 1: Criar o Repositório

No seu GitHub, crie um novo repositório chamado meu-primeiro-site.

Etapa 2: Subir os Arquivos

Envie seu index.html, style.css e a pasta assets para o repositório.

Etapa 3: Ativar o GitHub Pages

  1. No repositório, vá em Settings (Configurações).
  2. Clique na aba Pages no menu lateral.
  3. Em "Branch", selecione main (ou master) e clique em Save.
  4. Aguarde 2 minutos e você receberá um link (ex: usuario.github.io/meu-primeiro-site).

4. Visualizando o Fluxo de Deploy 📊

graph LR
    PC[Seu Computador] -- Git Push --> GH[GitHub Repositório]
    GH -- Build --> GHP[GitHub Pages URL]
    GHP --> World[Qualquer pessoa acessa!]

5. Prática: Verificando antes de subir ✅

Use o terminal para garantir que seu projeto está organizado:

$ # 1. Verifique se o index.html está na raiz do projeto
$ ls
$ # 2. Verifique se os caminhos das imagens estão corretos
$ # 3. Remova arquivos de teste ou lixo
$ # 4. Garanta que o meta viewport está presente

6. Mini-Projeto: Dashboard Completo com Deploy 🎨

  1. Finalize sua Landing Page (da Aula 08) com todo o CSS aprendido.
  2. Adicione um menu "sticky" e cards flexíveis.
  3. Garanta que a grade mude de 1 para 3 colunas no desktop.
  4. Suba para o GitHub e ative o Pages.
  5. Desafio Extra: Compartilhe o link do seu site com um colega!

7. Exercícios de Finalização do Curso 📝

  1. Qual a importância de separar o código HTML do CSS para a manutenção do site?
  2. O que acontece se você esquecer de subir a pasta de imagens para o GitHub?
  3. Como você pode testar se o seu site ficou realmente responsivo após o deploy?
  4. Qual o comando ou configuração no GitHub Pages que ativa o site a partir da branch principal?
  5. Qual a sensação de ver o seu primeiro site "vivo" na internet? 😍

Parabéns! 🎉 Você concluiu o curso de Programação Web I - HTML5 e CSS3. Agora você tem as ferramentas para construir o que imaginar na rede mundial de computadores. Continue praticando e codando! 🚀