Workflow Profissional e Deploy

Este módulo introduz o fluxo mínimo profissional utilizado atualmente no desenvolvimento Front-end moderno:

versionamento;
hospedagem;
publicação;
documentação;
organização de portfólio;
compartilhamento profissional.

O foco deixa de ser apenas “desenvolver localmente” e passa a incluir:

presença profissional;
rastreabilidade;
colaboração;
deploy contínuo básico;
organização pública de projetos;
construção inicial de identidade técnica.

Objetivos do Módulo

Ao final deste módulo o estudante deverá ser capaz de:

criar conta no GitHub;
criar repositórios;
enviar projetos;
documentar projetos com README;
publicar projetos online;
utilizar GitHub Pages;
organizar um portfólio inicial;
compartilhar projetos profissionalmente.

1. GitHub Básico

Fundamentação Teórica

O GitHub é a principal plataforma mundial de hospedagem de código-fonte baseada em Git.

No mercado Front-end moderno, GitHub tornou-se:

padrão profissional;
portfólio técnico;
mecanismo de colaboração;
ferramenta de versionamento;
ambiente de deploy.

Mesmo sem dominar Git avançado, o aluno já deve compreender:

repositórios;
commits;
upload de projetos;
documentação;
compartilhamento.

Conceitos Fundamentais

Conceito	Finalidade
Repositório	Projeto armazenado
Commit	Registro de alteração
README	Documentação
Branch	Linha paralela de desenvolvimento
Deploy	Publicação online

Fluxo Simplificado

Projeto local
      ↓
GitHub
      ↓
Repositório online
      ↓
Deploy

Criação de Conta

Processo Básico

Criar conta no GitHub;
Confirmar e-mail;
Configurar perfil;
Criar primeiro repositório.

Exemplo 1 — Estrutura Inicial de Projeto

Estrutura de Pastas

meu-portfolio/
│
├── index.html
├── style.css
└── README.md

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Meu Portfólio</title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <header>

        <h1>
            Fernandes Dev
        </h1>

    </header>

    <main>

        <section class="card">

            <h2>
                Projeto HTML5
            </h2>

            <p>
                Projeto desenvolvido durante o curso.
            </p>

        </section>

    </main>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    padding: 40px;

    font-family: Arial, sans-serif;

    background-color: #f5f5f5;
}

header {

    margin-bottom: 40px;
}

.card {

    padding: 24px;

    border-radius: 12px;

    background-color: white;

    box-shadow:
        0 8px 16px rgba(0,0,0,0.08);
}

Arquivo: `README.md`

# Meu Portfólio Front-end

Projeto desenvolvido utilizando:
- HTML5;
- CSS3;
- responsividade;
- acessibilidade básica.

## Objetivo

Construir interfaces modernas e profissionais.

Exemplo 2 — Página de Projeto Organizada

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Projeto Landing Page</title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <main class="container">

        <article class="projeto">

            <h1>
                Landing Page Responsiva
            </h1>

            <p>
                Projeto com Flexbox,
                Grid e acessibilidade.
            </p>

            <a href="#">
                Ver Projeto
            </a>

        </article>

    </main>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    font-family: Arial;

    background-color: #eef2f5;
}

.container {

    min-height: 100vh;

    display: grid;

    place-items: center;
}

.projeto {

    width: min(90%, 700px);

    padding: 40px;

    background-color: white;

    border-radius: 16px;

    text-align: center;
}

a {

    display: inline-block;

    margin-top: 20px;

    padding: 14px 24px;

    border-radius: 8px;

    background-color: #004b8d;

    color: white;

    text-decoration: none;
}

Discussão Técnica

Boa prática profissional:

um projeto = um repositório;
README obrigatório;
nomes consistentes;
evitar arquivos desnecessários;
manter organização visual.

README Profissional Básico

Fundamentação Teórica

O README.md é a documentação inicial do projeto.

Ele deve explicar:

objetivo;
tecnologias;
funcionalidades;
como executar;
autor;
links.

Estrutura Recomendada

Título
Descrição
Tecnologias
Objetivo
Screenshots
Deploy
Autor

Exemplo de Markdown

Arquivo: `README.md`

# Landing Page Responsiva

Projeto desenvolvido em HTML5 e CSS3.

## Tecnologias
- HTML5
- CSS3
- Flexbox
- CSS Grid

## Deploy
https://usuario.github.io/projeto

## Autor
Fernandes

Discussão Técnica

Markdown tornou-se padrão porque:

é simples;
é leve;
é legível;
é compatível com GitHub;
é amplamente utilizado em documentação técnica.

Referências

Livros

Pro Git
Version Control with Git

Sites

2. Deploy com GitHub Pages

Fundamentação Teórica

Deploy é o processo de publicação de um projeto na Internet.

O GitHub oferece gratuitamente o:

GitHub Pages;
hospedagem estática;
publicação automática;
HTTPS.

Isso permite:

publicar portfólios;
compartilhar projetos;
disponibilizar landing pages;
criar páginas institucionais simples.

Fluxo Conceitual

Projeto local
      ↓
GitHub
      ↓
GitHub Pages
      ↓
Site online

Processo Simplificado

Criar repositório;
Fazer upload;
Abrir Settings;
Pages;
Escolher branch;
Publicar.

Exemplo 1 — Landing Page Publicável

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Deploy Front-end</title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <section class="hero">

        <div class="conteudo">

            <h1>
                Projeto Publicado
            </h1>

            <p>
                Página hospedada no GitHub Pages.
            </p>

        </div>

    </section>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    font-family: Arial;
}

.hero {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #003366,
            #005599
        );

    color: white;

    text-align: center;

    padding: 40px;
}

Exemplo 2 — Página Institucional Responsiva

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Institucional</title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <header class="topo">

        <h1>
            Curso Front-end
        </h1>

    </header>

    <main class="container">

        <section class="card">

            <h2>
                HTML5 e CSS3
            </h2>

            <p>
                Interface moderna responsiva.
            </p>

        </section>

    </main>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    font-family: Arial;

    background-color: #f5f5f5;
}

.topo {

    background-color: #003366;

    color: white;

    padding: 24px;
}

.container {

    padding: 40px;
}

.card {

    padding: 24px;

    background-color: white;

    border-radius: 16px;
}

Discussão Técnica

GitHub Pages é adequado para:

HTML;
CSS;
JavaScript simples;
landing pages;
portfólios;
projetos acadêmicos.

HTTPS e Publicação Moderna

GitHub Pages fornece:

HTTPS automático;
acesso público;
URL compartilhável.

Estrutura de URL

https://usuario.github.io/repositorio

Referências

Livros

Learning Git

Sites

3. Portfólio Inicial

Fundamentação Teórica

O portfólio é a principal vitrine técnica do desenvolvedor Front-end iniciante.

Empresas frequentemente avaliam:

organização;
clareza;
qualidade visual;
responsividade;
acessibilidade;
consistência;
deploy funcional.

Mesmo projetos simples podem demonstrar:

boas práticas;
estrutura;
disciplina técnica;
evolução profissional.

Estrutura Recomendada

portfolio/
│
├── index.html
├── style.css
├── imagens/
├── projetos/
└── README.md

Seções Recomendadas

Seção	Objetivo
Hero	Apresentação
Sobre	Perfil
Projetos	Trabalhos
Tecnologias	Competências
Contato	Comunicação

Exemplo 1 — Hero de Portfólio

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Portfólio</title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <section class="hero">

        <div class="hero-conteudo">

            <h1>
                Fernandes Front-end
            </h1>

            <p>
                HTML5, CSS3 e interfaces modernas.
            </p>

            <a href="#">
                Ver Projetos
            </a>

        </div>

    </section>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    font-family: Arial;
}

.hero {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #003366,
            #005599
        );

    color: white;
}

a {

    display: inline-block;

    margin-top: 20px;

    padding: 14px 24px;

    background-color: white;

    color: #003366;

    border-radius: 8px;

    text-decoration: none;
}

Exemplo 2 — Grade de Projetos

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Projetos</title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <main class="grid">

        <article class="card">

            <h2>
                Landing Page
            </h2>

            <p>
                Projeto responsivo moderno.
            </p>

        </article>

        <article class="card">

            <h2>
                Dashboard
            </h2>

            <p>
                Layout utilizando CSS Grid.
            </p>

        </article>

    </main>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    padding: 40px;

    font-family: Arial;

    background-color: #f5f5f5;
}

.grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;
}

.card {

    padding: 24px;

    background-color: white;

    border-radius: 16px;

    box-shadow:
        0 8px 16px rgba(0,0,0,0.08);
}

Discussão Técnica

Boa prática profissional:

utilizar screenshots reais;
manter consistência visual;
evitar excesso de efeitos;
destacar projetos funcionais;
manter acessibilidade e responsividade.

Organização Profissional de Projetos

Estrutura Recomendada

projetos/
│
├── landing-page/
├── dashboard/
├── portfolio/
└── institucional/

Convenções Recomendadas

Correto	Evitar
`landing-page`	`Projeto Final Novo`
`dashboard-admin`	`teste2`
`portfolio-html-css`	`aaaa`

Fluxo Profissional Simplificado

Planejamento
      ↓
Desenvolvimento
      ↓
Validação
      ↓
GitHub
      ↓
Deploy
      ↓
Portfólio

Integração com os Módulos Anteriores

Este módulo consolida conhecimentos anteriores:

Módulo	Aplicação prática
HTML5 Semântico	Estrutura dos projetos
CSS3 Moderno	Interface visual
Responsividade	Layout adaptativo
Componentização	Cards e seções
Acessibilidade	Navegação e contraste
SEO	Estrutura profissional
Performance	Otimização para deploy

Atividade Integrada Recomendada

Projeto Final

Publicar um projeto contendo:

HTML5 semântico;
CSS3 moderno;
responsividade;
acessibilidade básica;
SEO técnico;
README profissional;
deploy funcional no GitHub Pages.

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Pro Git
Version Control with Git
Learning Git
Atomic Design
Refactoring UI

Plataformas e Documentação

Fim da aula 08

Linguagem e Técnica de Programação I – Aula 08

Workflow Profissional e Deploy

Objetivos do Módulo

1. GitHub Básico

Fundamentação Teórica

Conceitos Fundamentais

Fluxo Simplificado

Criação de Conta

Processo Básico

Exemplo 1 — Estrutura Inicial de Projeto

Estrutura de Pastas

Arquivo: index.html

Arquivo: style.css

Arquivo: README.md

Exemplo 2 — Página de Projeto Organizada

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

README Profissional Básico

Fundamentação Teórica

Estrutura Recomendada

Exemplo de Markdown

Arquivo: README.md

Discussão Técnica

Referências

Livros

Sites

2. Deploy com GitHub Pages

Fundamentação Teórica

Fluxo Conceitual

Processo Simplificado

Exemplo 1 — Landing Page Publicável

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Página Institucional Responsiva

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

HTTPS e Publicação Moderna

Estrutura de URL

Referências

Livros

Sites

3. Portfólio Inicial

Fundamentação Teórica

Estrutura Recomendada

Seções Recomendadas

Exemplo 1 — Hero de Portfólio

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Grade de Projetos

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Organização Profissional de Projetos

Estrutura Recomendada

Convenções Recomendadas

Fluxo Profissional Simplificado

Integração com os Módulos Anteriores

Atividade Integrada Recomendada

Projeto Final

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Plataformas e Documentação

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `README.md`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `README.md`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`