Contents

Capítulo 1 – O Poder de Criar: O que é ser dev em 2025 . . . . . . . . . . . . . . 2

Capítulo 2 – HTML: A Estrutura da Web . . . . . . . . . . . . . . . . . . . . . . . . 4

Capítulo 3 – CSS: Dando Estilo ao Caos . . . . . . . . . . . . . . . . . . . . . . . 7

Capítulo 4 – JavaScript: Fazendo a Mágica Acontecer . . . . . . . . . . . . . . . 11

Capítulo 5 — Git e GitHub: Controle Total . . . . . . . . . . . . . . . . . . . . . . 14

Capítulo 6 — GitHub Codespaces: Programando na Nuvem . . . . . . . . . . . 17

Capítulo 7 – Projeto Final: Seu Primeiro App Profissional . . . . . . . . . . . . . 19

Glossário Nerd-Dev . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Apêndice Dev Power: Links e Comunidades . . . . . . . . . . . . . . . . . . . . . 24

1
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Capítulo 1 – O Poder de Criar: O que é ser dev em 2025

O que você vai aprender neste capítulo
• O que é um desenvolvedor e por que essa profissão está moldando o futuro
• Como a programação se conecta com todas as áreas da sociedade moderna
• A mentalidade de quem quer aprender a programar de verdade
• O que você precisa para começar sua jornada dev AGORA

1.1 Devs: os arquitetos da nova realidade

Ser desenvolvedor é mais do que digitar códigos ou criar apps bonitinhos. É sobre ter
superpoderes. A capacidade de criar algo do zero, transformar ideias em realidade digital
e impactar milhares — ou milhões — de pessoas com um simples clique.
É como ser um mago moderno. Só que ao invés de feitiços, você usa HTML, CSS,
JavaScript, Git, APIs e lógica.

Realidade de Mercado
Até 2030, o mundo vai precisar de mais de 45 milhões de novos devs. E o melhor:
você não precisa de faculdade pra entrar no jogo — só atitude, prática e acesso ao
conhecimento certo.

1.2 O que um dev realmente faz?

• Cria sites, apps, sistemas, robôs, games, IA, NFTs, metaverso e o que mais vier
• Resolve problemas do mundo real com tecnologia
• Pensa como engenheiro, age como artista, trabalha como estrategista
• Aprende sempre. Testa. Quebra. Refaz. Evolui.
Se você já pensou em como melhorar algo com tecnologia - parabéns, você já pensa
como dev.
Cultura Pop FTW
Tony Stark não virou o Homem de Ferro por mágica. Ele era dev. Montava código,
usava shell script, criava UI no holograma. Você não precisa ser bilionário pra isso.
Só abrir o VS Code.

1.3 Qual o perfil de um dev em 2025?

• Curioso: gosta de entender como as coisas funcionam
• Resiliente: não desiste quando o erro 404 aparece

2
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

• Colaborativo: compartilha no GitHub, aprende em comunidade

• Adaptável: aprende rápido, se reinventa
• Ético: entende o impacto das tecnologias que constrói
Você não precisa ser gênio da matemática. Você precisa querer aprender, todo dia.

1.4 O que você precisa para começar?

Kit Inicial do Dev Web
• 1 computador (até um modesto já serve)
• VS Code instalado (editor de código mais amado do planeta)
• Google Chrome ou Firefox para testar
• Git e GitHub para salvar e versionar seu progresso
• Internet e Foco — o resto a gente vai construir junto

1.5 Exercícios
1. Escreva num caderno ou arquivo digital: por que você quer aprender a programar?
2. Faça uma pesquisa no Google: “O que um dev front-end faz?” e anote 5 tarefas que
você achou interessantes.
3. Assista ao vídeo ”Como é o dia de um programador” no YouTube e reflita: essa
rotina combina com você?
4. Instale o VS Code no seu computador e deixe tudo pronto para o próximo capítulo.
—
Projeto Integrador – Mapa de Motivação Dev
Crie um documento (pode ser texto ou apresentação) com:
• Uma frase que represente seu motivo para programar
• 3 áreas da tecnologia que mais te interessam
• Uma imagem que represente “futuro” pra você
• Seu objetivo como dev nos próximos 6 meses
Esse mapa vai ser seu ponto de partida. Guarde bem – você vai olhar pra ele no
final do livro e ver o quanto evoluiu.

—
� Mantra Dev #1
Quem domina código, domina o mundo.

3
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Capítulo 2 – HTML: A Estrutura da Web

O que você vai aprender neste capítulo
• O que é HTML e por que ele é a espinha dorsal da web
• Como criar páginas com títulos, parágrafos, imagens e links
• A estrutura de um documento HTML moderno
• Como usar o VS Code e o Live Server para testar tudo rapidinho

2.1 O que é HTML, afinal?

HTML significa HyperText Markup Language. É a linguagem que define a estrutura de
todas as páginas da web — como se fosse o esqueleto de um robô gigante.
Imagine a web como um universo de Lego. O HTML são os blocos. O CSS pinta. O
JavaScript dá vida.

Primeira Verdade de Programador Web

HTML não é uma linguagem de programação. É uma linguagem de marcação. Ela

estrutura o conteúdo, mas não executa lógicas.

2.2 Estrutura Básica de um HTML5

Aqui está a menor página web funcional da galáxia:

Estrutura HTML5 básica

<!DOCTYPE html >

< h t m l l a n g =” pt −BR” >
<head>
<meta c h a r s e t =”UTF−8” >
< t i t l e >Meu P r i m e i r o S i t e < / t i t l e >
</ head>
<body>
<h1>Olá , mundo ! < / h1>
<p>Essa é minha p r i m e i r a página HTML. < / p>
</ body>
</ html >

Explicando as peças:
• <!DOCTYPE html> – Diz ao navegador: ”Ei! Isso aqui é HTML5!”
• <html> – Começo do documento

4
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

• <head> – Informações invisíveis: título da aba, charset, meta tags

• <body> – Tudo que o usuário vê na tela

2.3 Tags mais usadas na vida real

• <h1> a <h6> – Títulos (níveis de importância)
• <p> – Parágrafo
• <a href=""> – Links
• <img src=""> – Imagens
• <ul>, <ol>, <li> – Listas
• <div> – Divisão genérica de bloco

2.4 Imagens, Links e Listas com Estilo

HTML interativo básico

<h2>Minhas s é r i e s f a v o r i t a s : < / h2>

<ul >
< l i > S t r a n g e r Things < / l i >
< l i > A t t a c k on T i t a n < / l i >
< l i >Mr . Robot < / l i >
</ u l >

<p>Veja meu p e r f i l no <a h r e f =” h t t p s : / / g i t h u b . com” >

GitHub < / a> </p>

<img
s r c =” h t t p s : / / media . g i p h y . com / media / 3 o7aCTfyhYawdOXcFW / g i p h y . g i f ”
a l t =” g i f ”
w i d t h =”300”
>

Você pode usar GIFs, links para outros sites, listas para organizar conteúdo… e voilà, a
mágica acontece.
—

5
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Contextualizando com Cultura Pop

Você sabia que o primeiro site da história ainda está no ar? Criado por Tim Berners-
Lee em 1991 no CERN, ele era só texto com links. Tipo o ”site da Deep Web” do
professor de Stranger Things.

2.5 Exercícios
1. Crie um arquivo HTML com sua lista de jogos ou séries favoritos, usando <ul> ou
<ol>.
2. Adicione um link que leve para o seu vídeo favorito no YouTube.
3. Insira uma imagem (GIF ou JPEG) e dê um título legal para a página.
4. Teste tudo usando o VS Code com a extensão Live Server.
—

Projeto Integrador – Página Pessoal 1.0

Crie sua primeira página pessoal com as seguintes seções:
• Título com seu nome
• Parágrafo com uma bio divertida
• Lista com seus filmes/jogos/séries favoritos
• Link para seu GitHub ou redes sociais
• Uma imagem ou GIF animado
Salve como index.html e use no próximo capítulo, onde vamos aplicar CSS para
deixar tudo bonito.
—

Mantra Dev #2
Toda grande interface começa com um simples <h1>.

6
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Capítulo 3 – CSS: Dando Estilo ao Caos

O que você vai aprender neste capítulo
• O que é CSS e como ele estiliza páginas HTML
• Como mudar cores, fontes, tamanhos, espaçamentos e muito mais
• A diferença entre inline, interno e externo
• Como criar seu primeiro layout com flexbox

3.1 CSS: o estilista da web

CSS significa Cascading Style Sheets. Se o HTML é o esqueleto, o CSS é a pele, o
cabelo, o outfit.
CSS deixa as páginas bonitas, responsivas, com identidade. é como transformar um
boneco do Minecraft num personagem de anime ultraestiloso.

Cultura Pop FTW

CSS é como o estilista da Barbie no live-action: ajusta tudo nos mínimos detalhes.
Cores, sombras, tamanhos. Estética importa.

3.2 Três jeitos de aplicar CSS

Inline (na pr0�0f3pria tag):

CSS Inline – Rápido mas bagunçado

<p s t y l e =” c o l o r : red ; ” > Texto vermelho < / p>

Interno (no mesmo arquivo HTML):

CSS Interno – Útil em páginas simples

<style >
p {
c o l o r : blue ;
}
</ s t y l e >

Externo (o ideal):

7
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

CSS Externo – O método profissional

/ * s t y l e . css * /
body {
background − c o l o r : # f 0 f 0 f 0 ;
font −family : ’ Arial ’ ;
}

E no HTML, você conecta com:

“‘html <link rel=”stylesheet” href=”style.css”> “‘

3.3 Seletores e Propriedades

Seletores dizem o que você quer estilizar. Propriedades dizem como você quer estilizar.

Exemplo Básico

h1 {
color : purple ;
f o n t − s i z e : 32px ;
text − align : center ;
}

• color: muda a cor do texto

• font-size: muda o tamanho da fonte
• text-align: alinha o conteúdo
Você também pode usar seletores como:
• * – seleciona tudo
• .classe – seleciona todos os elementos com essa classe
• #id – seleciona um elemento único
• elemento elemento – elementos dentro de outros

3.4 Layout com Flexbox (introdução)

Flexbox é uma maneira moderna e fácil de organizar os elementos da sua página.

8
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Começando com Flexbox

. container {
display : flex ;
j u s t i f y −content : center ;
align −items : center ;
}

display: flex ativa o modo Flex. justify-content alinha horizontalmente. align-items

alinha verticalmente.

3.5 Algumas propriedades que você vai amar

• background-color
• padding – espaço interno
• margin – espaço externo
• border – borda
• box-shadow – sombra de caixa
• transition – animações suaves
• hover – reações ao passar o mouse

Dica Ninja de Visual

Quer escolher cores como um designer? Use o site coolors.co ou o Colorzilla
(extensão do Chrome).

3.6 Exercícios
1. Crie um arquivo style.css e conecte com seu index.html
2. Estilize o fundo da página com uma cor suave
3. Altere as fontes e tamanhos dos títulos
4. Centralize seu conteúdo usando Flexbox
5. Adicione uma borda estilosa nas imagens ou GIFs

9
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Projeto Integrador – Página Pessoal Estilizada

Use sua página HTML do capítulo anterior e transforme com CSS:
• Use uma paleta de cores coerente
• Organize tudo com Flexbox
• Estilize os títulos, parágrafos, imagens e links
• Crie um efeito :hover em pelo menos um link
Resultado final: uma mini landing page com cara profissional. Poste no GitHub
Pages e compartilhe no grupo da turma!

Mantra Dev #3
”Primeiro funciona, depois fica bonito.” Mas quando fica bonito e funciona... aí é
arte.

10
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Capítulo 4 – JavaScript: Fazendo a Mágica Acontecer

O que você vai aprender neste capítulo
• O que é JavaScript e para que ele serve
• Como escrever scripts básicos
• Variáveis, operadores, condições e repetições
• Como interagir com a página via DOM
• Criar pequenas interações e animações com JS puro

4.1 JavaScript: o motor da interatividade

HTML mostra. CSS embeleza. JavaScript interage.
Com JS, você pode validar formulários, criar animações, fazer jogos e sistemas web com-
pletos.
Ele é a linguagem que roda nos navegadores, interpretada em tempo real.

Cultura Pop FTW

JS é o Doutor Estranho do front-end: manipula a realidade da página e muda tudo
com uns gestos (ou linhas de código).

4.2 Inserindo JavaScript no HTML

Script direto no HTML

<script >
a l e r t ( ” H e l l o , mundo ! ” ) ;
</ s c r i p t >

Ou conectando um arquivo externo:

< s c r i p t src= ” s c r i p t . j s ” >< / s c r i p t >

4.3 Variáveis e Tipos de Dados

Variável é um ”lugar” onde você guarda um valor. Use let ou const.

Exemplo com variáveis

l e t nome = ” Sakura ” ;
c o n s t idade = 1 7 ;
l e t nota = 9 . 5 ;

11
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Tipos comuns: string, number, boolean (true/false).

4.4 Operadores e Condicionais

Operadores:
• + - * / % – matemáticos
• == === != !== < > <= >= – comparação
• && || ! – lógicos
Condicional (if/else):

Decisão simples

l e t n i v e l = 10;
i f ( n i v e l >= 10) {
console . l o g ( ” Pronto para a b a t a l h a f i n a l ! ” ) ;
} else {
console . l o g ( ” Continue t r e i n a n d o . ” ) ;
}

4.5 Repetição: Loops

for é como um contador automático.
Loop clássico com for

f o r ( l e t i = 1 ; i <= 5 ; i ++) {
console . l o g ( ” Contagem : ” + i ) ;
}

4.6 DOM: Interagindo com a página

DOM é a representação da página em forma de objeto JS. Com ele, você muda conteúdo,
estilo e eventos.
Mudando um elemento pelo ID

document . getElementById ( ” t i t u l o ” ) . i n n e r T e x t = ” Novo T í t u l o ” ;

Eventos:

12
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Evento de clique

button . addEventListener ( ” c l i c k ” , f u n c t i o n ( ) {
a l e r t ( ” Botão c l i c a d o ! ” ) ;
});

4.7 Exercícios
1. Crie um alerta que diga ”Bem-vindo!”
2. Declare uma variável com seu nome e mostre no console
3. Use if/else para mostrar uma mensagem de acordo com a nota de um aluno
4. Crie um loop que conte de 1 a 10 no console
5. Altere o texto de um elemento HTML com JS

Projeto Integrador – Mini Quiz Interativo

Monte uma página com 3 perguntas simples e botões de resposta. Com JS, exiba
se a resposta está certa ou errada.
• Use variáveis e eventos de clique
• Altere o estilo das respostas certas/erradas
• Mostre a pontuação no final
Dica: guarde as respostas corretas e compare com a do usuário. Visual + lógica =
dev pro player.

Mantra Dev #4
”O código é o feitiço. JS é a varinha. Use com responsabilidade.”

13
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Capítulo 5 — Git e GitHub: Controle Total

O que você vai aprender neste capítulo
• O que é controle de versão
• Comandos básicos do Git
• Como funciona o GitHub
• Subir e clonar repositórios
• Gerenciar projetos em equipe

5.1 Por que Git importa

Todo super-herói precisa de um histórico de batalhas. Todo dev precisa do Git.
Git é um sistema de controle de versão distribuído: você salva o histórico de tudo que
muda no seu código, pode voltar atrás e trabalhar em equipe sem perder nada.

Cultura Pop FTW

Git é como o Cérebro do Xavier dos X-Men. Ele sabe tudo o que mudou, onde,
quando e por quem.

5.2 Instalando o Git

Instale o Git em https://git-scm.com. Depois, configure seu nome e email:

Config inicial do Git

g i t c o n f i g −− g l o b a l user . name ” Seu Nome”

g i t c o n f i g −− g l o b a l user . e m a i l ” email@exemplo . com ”

5.3 Criando um repositório local

Começando um repositório

mkdir meu− p r o j e t o
cd meu− p r o j e t o
git init

init cria a pasta mágica do Git (”.git”) com todo o histórico.

5.4 Ciclo de vida Git: add, commit, push

1. git add . –adiciona arquivos ao ”preparo”

14
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

2. git commit -m "Mensagem" –salva no histórico

3. git push –envia para o GitHub (remoção)

Primeiro push ever

g i t remote add o r i g i n h t t p s : / / g i t h u b . com / u s u a r i o / r e p o s i t o r i o . g i t

g i t branch −M main
g i t push −u o r i g i n main

5.5 Clonar, editar, subir

Quer pegar um projeto do GitHub? Clone ele:
g i t c l o n e h t t p s : / / g i t h u b . com / u s u a r i o / r e p o s i t o r i o . g i t

Edite, salve com commits e envie de volta com push.

5.6 GitHub: o social code

GitHub é uma plataforma para hospedar e colaborar em códigos. Você pode:
• Criar repositórios
• Trabalhar em equipe com pull requests
• Comentar e revisar código
• Criar wikis e boards estilo Kanban

5.7 Exercícios
1. Instale o Git e configure seu nome e email
2. Crie um repositório local e adicione um arquivo HTML
3. Dê um commit com uma mensagem significativa
4. Crie um repositório no GitHub e suba seu projeto
5. Clone um repositório de outro colega e adicione um arquivo novo

Projeto Integrador — Portfolio com GitHub Pages

Use Git e GitHub para subir um mini site pessoal feito em HTML e CSS, com:
• Informções sobre você e seu progresso no curso
• Lista de projetos e links
• Publicação com GitHub Pages (Configurações -> Pages)
Seu primeiro portfólio online. Não é ficção científica, é realidade.

15
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Mantra Dev #5
”Quem não versiona, volta no tempo perdido. Git é sua linha do tempo segura.”

16
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Capítulo 6 — GitHub Codespaces: Programando na Nu-

vem
O que você vai aprender neste capítulo
• O que é o GitHub Codespaces
• Como criar seu ambiente na nuvem
• Vantagens sobre editores locais
• Programar de qualquer lugar

6.1 O futuro é sem instalação

GitHub Codespaces é um ambiente de desenvolvimento completo, rodando direto na
nuvem, baseado no VS Code. Zero instalação. 100% código.

Cultura Pop FTW

Codespaces é tipo a Sala Precisa de Harry Potter. Sempre pronta, com tudo o que
você precisa. Onde estiver, código acontece.

6.2 Criando seu primeiro Codespace

1. Crie um repositório no GitHub
2. Clique em Code > Codespaces > Create codespace on main
3. Espere alguns segundos...
4. Tcharam! Um VS Code web com terminal, extensões e Git funcionando

6.3 Vantagens
• Tudo na nuvem: nenhum setup local
• Trabalha de qualquer lugar: só precisa de navegador
• Ambientes replicáveis para equipes
• Terminal, extensões, Git... tudo já vem pronto

6.4 Exercícios
1. Crie um repositório e inicie um Codespace
2. Crie um arquivo index.html com um Hello World
3. Salve e comite usando o terminal integrado

17
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

4. Teste seu código no preview do Codespace

Projeto Integrador — Web App na Nuvem

Monte um mini app interativo usando HTML, CSS e JavaScript dentro de um
Codespace:
• Suba para o GitHub
• Compartilhe o link do repositório
• Opcional: use GitHub Pages para publicar
O código mora na nuvem. E você também.

Mantra Dev #6
”Não importa onde você esteja. Com Codespaces, você é o estúdio.”

18
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Capítulo 7 – Projeto Final: Seu Primeiro App Profissional

O que você vai construir neste capítulo
• Um app web completo com HTML, CSS e JavaScript
• Hospedado no GitHub Pages
• Controlado com Git e GitHub
• Criado dentro do GitHub Codespaces

7.1 O Desafio Final

Agora é hora de colocar tudo em prática. Seu desafio é criar um app web real, funcional
e com identidade visual própria. É o seu primeiro cartão de visitas como dev. Nada de
simulador. É produção.
Tema: um mini gerenciador de tarefas com os seguintes requisitos:
• Interface agradável com HTML e CSS
• Campo de adicionar tarefas
• Botão para marcar como concluída
• Botão para remover tarefa
• Dados persistindo durante a sessão com localStorage

Exemplo de estrutura HTML base

< !DOCTYPE html>

<html lang= ” pt −BR” >
<head>
<meta charset= ” UTF−8 ” / >
<meta name= ” v i e w p o r t ” content= ” w i d t h =device − width , i n i t i a l − s c a l e =1.0 ”
< t i t l e >Minhas T a r e f a s < / t i t l e >
< l i n k r e l = ” s t y l e s h e e t ” h r e f = ” s t y l e . css ” / >
< / head>
<body>
<h1> L i s t a de T a r e f a s < / h1>
<input i d = ” nova− t a r e f a ” p l a c e h o l d e r = ” D i g i t e a q u i . . . ” / >
<button onclick = ” a d i c i o n a r T a r e f a ( ) ” > A d i c i o n a r < / button>
< u l i d = ” l i s t a − t a r e f a s ” >< / u l >

< s c r i p t src= ” s c r i p t . j s ” >< / s c r i p t >

< / body>
< / html>

19
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Exemplo JS para adicionar tarefas

function a d i c i o n a r T a r e f a ( ) {
c o n s t i n p u t = document . getElementById ( "nova - tarefa " ) ;
c o n s t l i s t a = document . getElementById ( " lista - tarefas " ) ;
c o n s t i t e m = document . createElement ( "li" ) ;
item . innerText = i n p u t . value ;
l i s t a . appendChild ( i t e m ) ;
i n p u t . v a l u e = "" ;
}

7.2 Organização do Projeto

• index.html – a estrutura
• style.css – a estilização
• script.js – a lógica
• README.md – descrição do projeto
• .gitignore – para ignorar arquivos desnecessários
Crie tudo dentro de um repositório no GitHub e utilize o Codespaces para desenvolver.

7.3 Subindo para o mundo

Com o projeto pronto:
1. Suba o repositório para o GitHub
2. Vá em Configurações → Pages → Branch: main /root
3. Copie o link e compartilhe com o mundo

7.4 Entregáveis
• Link do GitHub Pages funcionando
• Link do repositório com README documentado
• Print da interface final do app

Parabéns! Agora você iniciou sua jornada dev.

Esse projeto é mais que um exercício. É a fundação da sua jornada. Documente.

Compartilhe. Evolua.

20
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Mantra Dev Final

”Crie. Suba. Compartilhe. Repita. Dev bom é dev em movimento.”

21
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Glossário Nerd-Dev
HTML
Linguagem de marcação usada para estruturar conteúdo na web. Tipo o esqueleto
de um site.
CSS
Folhas de estilo que definem o visual do site. Deixa tudo bonito. É o stylist do HTML.
JavaScript
Linguagem de programação usada para tornar páginas interativas. Tipo mágica de
verdade.
Git Sistema de controle de versão. Guarda o histórico do seu código. Uma máquina do
tempo do dev.
GitHub
Plataforma online para hospedar código, colaborar com outros devs e publicar pro-
jetos.
Repositório
Pasta de projeto com todo o seu código e histórico. Pode ser local (seu PC) ou
remoto (GitHub).
Commit
Salva uma versão do seu projeto com uma mensagem explicando a mudança. Tipo
um checkpoint.
Push
Envia suas alterações locais para o GitHub.
Clone
Cópia de um repositório do GitHub para o seu computador.
Branch
Uma ramificação do seu código principal. Ótimo para testar sem quebrar o projeto.
Pull Request
Pedido para mesclar mudanças de uma branch. Essencial em trabalho em equipe.
Codespaces
Ambiente de desenvolvimento completo na nuvem. Um VS Code no navegador,
pronto pra tudo.
LocalStorage
Espaço no navegador onde você pode salvar dados simples. Útil pra apps simples.
Responsivo
Site que se adapta a qualquer tela: celular, tablet ou desktop. Fundamental hoje em
dia.

22
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Deploy
Ato de publicar seu projeto online, para o mundo ver. Tipo lançar um álbum novo.

23
CTRL + SHIFT + FUTURO Uma jornada visual e prática pelo desenvolvimento web

Apêndice Dev Power: Links e Comunidades

Plataformas para praticar
• CodePen: https://codepen.io
• Replit: https://replit.com
• JSFiddle: https://jsfiddle.net
• FreeCodeCamp: https://www.freecodecamp.org

Cursos gratuitos
• Curso em Vídeo (Gustavo Guanabara): https://www.cursoemvideo.com
• Dev em Dobro (YouTube): https://www.youtube.com/c/DevemDobro
• Rocketseat Discover: https://www.rocketseat.com.br/discover

Comunidades online pra colar junto

• Stack Overflow: https://pt.stackoverflow.com
• Dev.to: https://dev.to
• Discord Devs Brasil: https://discord.gg/devsbrasil
• Comunidade Ballerini: https://discord.gg/ballerini

Próximos Passos
• Aprender frameworks: React, Vue ou Angular
• Explorar backend: Node.js e APIs
• Criar projetos maiores: portfólios, clones de apps reais
• Participar de hackathons e maratonas de programação
• Contribuir em projetos open source no GitHub

Dica Final do Livro

Dev bom nunca para de aprender. Siga estudando, compartilhando e criando. O
mundo precisa das suas ideias online.

24