Web-Development - Coderhouse (Aulas)

DESENVOLVIMENTO WEB
MÓDULO I: INTRODUÇÃO
1.[Aula 2: Criação de arquivos HTML] Primeiros

passos com HTML
Compreender a sintaxe do HTML; Conhecer e a prender a usar as tags; Construir e
entender nosso arquivo HTML
1.1 Convenção de Arquivos

● Não devem ter espaços, acentos, símbolos;
● Se tiver várias palavras, usar traços “-” ou “_” (ex.: minha-pagina-web)
● Devem ser escritos em letras minúsculas
● Devem ter a extensão “.html”, pois assim o servidor web sabe que se trata de
um documento web (ou seja, ao abrir o VS CODE e abrir/criar um novo
arquivo, ele deve ser sempre “nome.html”
● ATENÇÃO: ao salvar arquivos no Windows, verifique se eles não foram
salvos com a extensão de arquivo dupla (ex: arquivo.html.txt)
1.2. Documento pré-determinado
1.3. Tags
Para inspecionar os elementos que compõem um site:
1
1.3.1. Tags HTML
a) Atributos: qualquer caraterística que possa ser diferente de uma tag para outra / Os
mesmos vão apenas na tag de abertura
b) Agrupar tags: É possível colocar uma tag dentro da outra (super comum). / Sempre
fecham na ordem inversa à abertura
c) Sintaxe do Código: É importante manter a ordem dentro do código e incorporar boas

práticas
d) Fechamento de tags [Tags com fechamento obrigatório e com auto fechamento
(self-closing)]
2
e) Estrutura Básica (Head, Body, title, meta,html):
f) Doctype
3
g) Favicon
PARA PRATICAR
1.3.1.1. Tipos de tags
4
 Containers : Todas as tags que vão dentro de <body></body> são divididas em dois
grupos:
a) Elementos de Bloco: Aqueles que, sem serem modificados pelo CSS, ocupam 100%
de largura do container e são exibidos um abaixo do outro
Ex.: DIV
a) Elementos da linha: Ocupam apenas a largura que o conteúdo indica, e são exibidos
lado a lado
Ex.: SPAN
 Containers mais comumente usados:
5
6
7
 Qual a diferença entre DIV x SPAN?
`<div>` e `<span>` são elementos HTML usados para agrupar e formatar conteúdo, mas
são geralmente usados de maneiras diferentes.
1. `<div>` (bloco):
- O elemento `<div>` é um bloco de divisão que é utilizado para agrupar outros elementos
HTML e aplicar estilos ou lógica a eles.
- Ele é um elemento de bloco, o que significa que normalmente ocupa toda a largura
disponível e começa em uma nova linha.
- É comumente usado para criar contêineres ou seções em uma página.
Exemplo:
```html
<div style="background-color: #FFD700; padding: 10px;">
Este é um bloco de divisão (div) com um fundo amarelo.
</div>
```
2. `<span>` (linha):
- O elemento `<span>` é uma linha de marcação utilizada para aplicar estilos ou lógica a
partes específicas de texto ou conteúdo em linha.
- Ele é um elemento em linha, o que significa que normalmente não cria uma nova linha e
se ajusta ao conteúdo que contém.
- É frequentemente utilizado quando você deseja aplicar estilos ou manipular partes
específicas de texto ou conteúdo sem afetar o layout da página.
Exemplo:
```html
<p>
8
Este é um parágrafo com <span style="color: #FF0000;">texto vermelho</span>
destacado.
</p>
```
Em resumo, `<div>` é usado para criar blocos de conteúdo, enquanto `<span>` é usado
para envolver partes menores e em linha do conteúdo. Ambos são frequentemente usados
em conjunto com estilos CSS para controlar a aparência de uma página web.
 <h1> a <h6> de um bloco:
9
# Resumo/Fim da aula 2
MÓDULO II: VERSIONAMENTO
2.[Aula 3: Conhecer e instalar o GIT] GIT
2.1. O que é a GIT?
O Git é um sistema de controle de versão distribuído amplamente utilizado para rastrear

alterações no código-fonte durante o desenvolvimento de software. Vamos explicar alguns
conceitos básicos:
 Repositório: Um repositório Git é basicamente um local onde você armazena seu

código-fonte. Pode ser local (no seu computador) ou remoto (em um servidor).
 Commit: Um commit no Git é uma gravação de uma mudança no seu repositório. Ele
armazena uma versão específica do seu código, acompanhada por uma mensagem
que descreve as alterações feitas.
 Branch (ramificação): Um branch é uma linha de desenvolvimento independente.

Você pode criar branches para trabalhar em novas funcionalidades ou corrigir bugs
sem afetar o código na branch principal (normalmente chamada de "master" ou
"main").
10
 Clone: Clonar um repositório Git significa copiar todo o repositório para o seu
computador. Isso é útil quando você deseja contribuir para um projeto existente.
 Pull: Atualiza seu repositório local com as alterações feitas no repositório remoto.
 Push: Envia as alterações locais do seu repositório para o repositório remoto.
 Merge (mesclar): Combina as alterações de duas branches diferentes.

Normalmente, você faz isso para incorporar as mudanças de uma branch de
desenvolvimento de volta à branch principal.
 Pull Request (solicitação de pull): Usado em plataformas como o GitHub, é uma

forma de propor mudanças em um repositório. Você solicita que o proprietário do
repositório revise e incorpore suas alterações.
 Configuração Inicial: Antes de começar a usar o Git, você deve configurar seu nome
de usuário e endereço de e-mail. Use os seguintes comandos no terminal:
```bash
git config --global user.name "Seu Nome"
git config --global user.email "seu@email.com"
```
 Comandos Básicos:
- `git init`: Inicia um novo repositório Git.

- `git add`: Adiciona alterações ao próximo commit.
- `git commit -m "Mensagem do commit"`: Grava as alterações no repositório.
- `git status`: Exibe o estado atual do seu repositório.
- `git log`: Mostra o histórico de commits.
- `git branch`: Lista as branches no repositório.
- `git checkout NOME_DA_BRANCH`: Muda para a branch especificada.
- `git clone URL_DO_REPOSITORIO`: Clona um repositório remoto para o seu computador.
- `git pull`: Atualiza seu repositório local com as alterações remotas.
- `git push`: Envia suas alterações locais para o repositório remoto.
Esses são conceitos e comandos básicos para começar com o Git. Conforme você ganha
experiência, poderá explorar recursos mais avançados para trabalhar de maneira mais
eficiente.
### CORRELACIONANDO GIT AO GOOGLE DRIVE PARA ENTENDER MELHOR:###
Sim, você pode usar uma analogia com o Google Drive para explicar o Git, especialmente
para quem está começando e não tem familiaridade com controle de versão. Aqui está uma
analogia simplificada:
Git é como o Google Drive para Desenvolvedores:
11
1. Repositório Git = Pasta no Google Drive:
- Assim como você cria uma pasta no Google Drive para organizar e armazenar seus
documentos, você inicia um repositório Git para organizar e armazenar seu código-fonte.
2. Commit = Snapshot (Instantâneo):

- Cada vez que você faz um commit no Git, é como tirar um instantâneo do seu projeto
naquele momento. É uma versão específica do seu código.
3. Branches = Ramificações de Documentos:

- Imagine que você está trabalhando em um documento no Google Drive, e você cria uma
cópia para experimentar com uma ideia nova, mantendo a versão original intacta. No Git,
isso seria equivalente a criar uma branch para desenvolver uma nova funcionalidade sem
afetar o código principal.
4. Push = Atualizar o Google Drive:

- Quando você faz um push no Git, você está enviando suas alterações para um
repositório remoto, assim como quando você atualiza um documento no Google Drive para
que outras pessoas vejam.
5. Pull = Baixar do Google Drive:

- Se você precisa da versão mais recente do código de outra pessoa, você faz um pull no
Git, assim como você baixaria a versão mais recente de um documento do Google Drive.
6. Merge = Mesclar Documentos:

- No Git, quando você mescla duas branches, é como combinar alterações de
documentos diferentes. O Git tenta unir as alterações automaticamente, mas, assim como
no Google Drive, podem ocorrer conflitos que precisam ser resolvidos manualmente.
7. Histórico de Commits = Histórico de Versões:

- O histórico de commits no Git é como o histórico de versões no Google Drive. Você pode
ver quem fez quais alterações em cada commit.
8. .gitignore = Ignorar Arquivos no Google Drive:

- Assim como você pode escolher ignorar certos arquivos no Google Drive, o arquivo
`.gitignore` no Git permite que você especifique quais arquivos ou diretórios devem ser
ignorados pelo controle de versão.
Embora essa analogia simplificada ajude a transmitir a ideia básica do Git, é importante
notar que o Git é mais poderoso e flexível do que a analogia sugere. O Git oferece um
controle de versão preciso, ramificação eficiente e capacidades de colaboração avançadas
para desenvolvedores.
 Nele, há 3 etapas:
12
2.1.1. GIT X GITHUB
13
2.2. Criando Repositórios (GIT INIT, GIT ADD, GIT
COMMIT, GIT LOG)
2.2.1. O que é um repositório?
 GIT INIT: Criar um repositório GIT
1. git init meu_repositorio
14
2. dir
3. cd
4. Iniciar repositório no VS CODE utilizando o git init
5. Criando um arquivo para ser salvo no repositório
Para abrir a pasta “meu repositório” no VS, eu cliquei em “abrir pasta” > this pc> acer >
users > forte > “meu repositório”
15
6. Checar o status do repositório (ou seja, aqui ele mostra que ok, existe a pasta, mas
não existe ainda o conteúdo index adicionado no stage, então precisa ser adicionado
com o GIT ADD)
 GIT ADD: Adicionar o arquivo ao staging área
16
7. git add index.html
8. git status (para checar se agora sim o novo arquivo está adicionado no staging
área)
 GIT COMMIT: Envia nossos arquivos para o repositório que foi criado
O termo "commit" em Git não é uma abreviação de uma palavra específica como no caso
de "init" que vem de "initiate" (iniciar). O "commit" em Git é uma terminologia que reflete a
ação de confirmar ou registrar um conjunto de alterações em um repositório Git.
Quando você executa o comando `git commit`, você está efetivamente registrando um
snapshot das alterações feitas no seu projeto até aquele momento. Cada commit cria um
ponto na história do seu repositório Git e armazena informações como quem fez a
alteração, quando ela foi feita e uma mensagem descritiva que o autor fornece para explicar
o propósito do commit.
A palavra "commit" é frequentemente usada em ambientes de controle de versão para

descrever a ação de confirmar ou salvar alterações em um repositório. Nesse contexto, o
termo "commit" não é uma abreviação, mas sim uma convenção adotada para descrever
essa ação específica dentro do Git e outros sistemas de controle de versão.
Em resumo, enquanto "init" em `git init` sugere "iniciação" ou "inicialização", "commit" em

`git commit` representa o ato de confirmar ou registrar as alterações no repositório.
17
9. git commit -m “Primeiro commit”
 GIT LOG: Histórico do que aconteceu no repositório
10. git log
- GIT LOG – Listar Commits
11. git log --oneline
18
# Resumo/Fim da aula 3
[PROMPT]
1) GIT INIT pasta_nome
~CRIOU PASTA
2) dir
~DIRETÓRIO DE PASTAS
3) cd pasta_nome
~ENTROU NA PASTA
[VS CODE]
4) Criar file (nome_do_file.html) dentro da pasta do projeto, codar e
salvar
[PROMPT]
5) GIT ADD nome_do_file.html
~ARQUIVO ADICIONADO NO GIT DENTRO DA ENTÃO PASTA CRIADA E
“ADENTRADA”
6) GIT STATUS
~AQUI APARECE SE FOI MESMO ADICIONADO O nome_do_file.html À PASTA
[VS CODE]
7) Ao continuar a codar, essas alterações/codagens novas feitas no VS
CODE precisam ser salvas no GIT, logo:
[PROMPT]
8) GIT ADD nome_do_file.html
9) GIT COMMIT -M “nome da alteração que foi realizada no file”
19
10) GIT LOG para ver as alterações feitas até então
REPETIR PROCESSO TODA VEZ QUE UMA ALTERAÇÃO NO FILE FOR FEITA, para que
haja um histórico de mudanças realizadas no file
3.[Aula 4: Aprender o que é repositório GITHUB]

GITHUB
Aprender o que é um repositório no GITHUB; Criar um repositório para o nosso projeto;
Fazer o upload do projeto para o repositório usando os comandos do GIT
3.1 O que é GITHUB?

 É uma espécie de “rede social” de programadores: com esta plataforma podemos
subir os nossos projetos e deixar que outras pessoas colaborem
 = compartilhar o nosso trabalho com outras pessoas (parceiros de projeto, clientes,
etc)
3.2 Criando um repositório (GIT PUSH)

 É necessário seguir a regra da primeira aula, em que os nomes de arquivo levam
uma certa restrição de caracteres (sem espaço, sem acento, etc)
 Escolha entre público ou privado, e depois clique em “create repository”
 Criado o repositório no GITHUB, agora passamos para o PROMPT:
- Colocando em prática:
20
 ~dentro da pasta meu_repositorio no prompt~ GIT ADD index.html > GIT LOG > GIT
COMMIT -M “Primeiro parágrafo dentro de um DIV estilizado”>
21
 Para subir com o repositório do que já foi criado:
git push -u origin master
22
3.3 Editando no GITHUB
3.4 Atualizando um repositório (GIT PULL)
3.5 Clonando um repositório (GIT CLONE)
23
3.6 Mais propriedades do Github: Gestão de projetos,
adicionar colaboradores, comandos github, github pages e
github no vs code
24
#Desafio obrigatório
25
# Resumo/Fim da Aula 4
# GIT e GIT HUB no VS CODE

Como trabalhar com git e git hub dentro do vs code?
Só para lembrar:
26
MUDANÇAS FEITAS DO VSCODE PARA O GITHUB
 Source control
Toda vez que uma alteração no código for feita no VSCODE, o source control ficará com
uma “notificação” como na imagem, como “changes” (working directory)
a) Para realizar um commit é necessário adicionar a modificação de working directory

(changes) para o staging área (staged changes). Para iniciar o processo eu clico em
“+”:
Passou de changes para staged changes:
b) SEMPRE SALVAR AS MUDANÇAS (só que já ativei o “Auto Save” no VSCODE

para não ter que ficar fazendo isso manualmente)
c) Agora que já passou a alteração do working directory (changes) para o staged area,
pode ser feito o commit: [Lembrando que não precisa ficar adicionando toda hora no
staged area para comittar; o staged area é uma uma área de stand by; portanto
pode ser feito o commit direto no símbolo de CHECK na mesma direção onde
está escrito “source control” no topo desse screenshot: )
27
d) Commitando do VSCODE para o GITHUB
Agora o source control não há mais notificação e nem há mais nenhuma mudança a ser
commitada
e) Agora é necessário Syncar essas duas mudanças, já que lá embaixo mostra que há
0 alterações para baixar do github x 2 Alterações para SUBIR para o github
Então, clica para syncar:
E clica para subir as mudanças para o github no canto esquedo:
E já está zerado!
f) Github atualizado com os commits feitos:
28
É importante que:
 Os passos 2.2. da página 15 estejam feitos:
 Adicionar o projeto/pasta de origem do GITHUB para o prompt do computador para

que as sincronizações sejam realizadas:
29
git push -u origin master
MUDANÇAS FEITAS DO GITHUB PARA O VSCODE
É só clicar na “bolinha de atualização” do canto inferior esquerdo, que ele faz/baixa a

alteração direto do github para o vscode
MÓDULO III: HTML
4.[Aula 5: HTML- conhecer as diferentes tags e

o uso de cada uma]
Conhecer as diferentes tags e o uso de cada uma.
4.1 Listas
 O HTML permite agrupar elementos que tenham mais significado quando estão em
conjunto;
 Embora cada palavra separadamente faça sentido, juntas elas constituem o menu
de navegação da página de modo que seu significado conjunto é maior do que
separadamente
30
4.1.1. Tipos de Listas
a) Marcadores ou números? (ol, ul, li)
31
4.2. Tabelas
 São um conjunto de células organizadas, dentro das quais é possível hospedar
diferentes conteúdos;
 Servem para representar informações tabuladas, em linhas e colunas
4.2.1. Tags básicas para tabelas em HTML
32
4.3. Formulários
 São tags onde o usuário irá inserir ou selecionar valores, que serão enviados para
um arquivo responsável pelo processamento das informações;
 Para inserir um formulário, é utilizada a tag <form>
4.3.1. Tag <form>
 É um elemento de container como um <div> e <span>, mas também suporta alguns

atributos específicos para configurar a forma como o formulário se comporta
4.3.2. Entrada de texto
4.3.3. Botões
<form>
<button type="submit">
Enviar formulário
</button>
<button type="reset">
Limpar formulário
</button>
33
<button type="button">
Sem ação padrão
</button>
<button>Sem ação padrão</button>

</form>
4.3.4. Controles de seleção
a) Radio
O usuário escolhe apenas uma opção
<form>
<span>masculino</span>
<input type="radio" name="genero" value="masculino" />
<span>feminino</span>
<input type="radio" name="genero" value="feminino" />
<span>outro</span>
<input type="radio" name="genero" value="outro" />
</form>
34
b) Caixa de seleção
O usuário seleciona, ou não, cada uma das caixas que tem disponível
<form>
<div>Aceita termos e condições</div>
<input type="checkbox" name="acepta" value="1" />
</form>
c) Menu suspenso
É o chamado combo-box, seletor ou menu. A partir da lista, é possível escolher uma opção.
O ideal é que devem ter pelo menos dois elementos diferentes para escolher:
<form>
<select name="tamanhos">
<option value="G">Grande</option>
<option value="M">Médio</option>
<option value="P">Pequeno</option>
</select>
</form>
d) Tag <label>
 Define formalmente cada elemento de um formulário;
 Esta tag é muito útil para gerar um formulário acessível;
 Seu principal atributo é o “for”, que faz referencia ao elemento do formulário;
 O valor do atributo “for” deve ser igual ao valor do atributo “id” ou “name” do
elemento.
<form>
<label for="nome_sobrenome">Nome:</label>
<input type="text" name="nome_sobrenome" />
</form>
35
e) Conjunto de campo
As tags <fieldset> e <legend> são utilizadas em conjunto. O primeiro tem como objetivo
criar grupos de elementos do formulário com um mesmo propósito; enquanto que o
segundo, define formalmente o propósito do elemento fieldset.
<form>
<fieldset>
<legend>Tamanho de camiseta</legend>
O tamanho da camiseta vai de acordo com o tamanho do
busto e da largura do ombro
</fieldset>
</form>
# Para praticar:
4.4. Links
 São conhecidos como âncoras, utilizados para relacionar partes do mesmo
documento;
 Por padrão, são exibidos em azul e sublinhados;
 Para criar um link é necessário utilizar a tag de âncora <a> com o atributo “href”, que
definirá o destino para o qual aponta.
36
4.4.1. Links Relativos, Absolutos e Internos
 É um elemento de container como um <div> e <span>, mas também suporta alguns

atributos específicos para configurar a forma como o formulário se comporta
a) Links relativos
São aqueles que apontam para páginas localizadas dentro do mesmo projeto. Se a página
referenciada estiver na mesma pasta, basta mencionar o seu nome para gerar o link.
b) Links absolutos
São aqueles cujo destino apontam para páginas que estão fora do site, e devem ser
especificados utilizando a URL completa
c) Links internos
Estes permitem fazer referências a seções de sua página, para as quais a ID é utilizada:
4.5. Multimídia em HTML
4.5.1. Imagens
As imagens são elementos que, quando bem utilizados, melhoram a experiência dos
usuários.
37
a) Inserir imagens
 São inseridas com a tag <img/>, que perentece ao grupo de tags que fecham
nelas mesmas (com barra no final);
 Para funcionar, requere indicar onde está o arquiva a ser exibido. Isto é feito com o
atributo “src” (source);
 As imagens se comportam como elementos de linha, o que significa que serão vistas
uma ao lado da outra.
4.5.2. ALT
O Atributo “alt” deve ser um texto que representa a imagem que está sendo visualizada.
Deve ser conciso e breve, mas deixar claro do que se trata a imagem.
4.5.3. Links em Imagens

Podemos também combinar as duas tags e colocar links nas imagens.
4.5.4. Tag iframe

É um elemento HTML que permite inserir ou incorporar um código ou documento HTML
dentro de um outro documento HTML.
OUTRAS PALAVRAS: A tag <iframe> em HTML (Inline Frame) é utilizada para incorporar
ou inserir conteúdo de outra fonte dentro de uma página da web. Essa tag é comumente
usada para incorporar vídeos do YouTube, mapas do Google Maps, widgets de redes
sociais e outros tipos de conteúdo incorporável.
<iframe src="pagina_fonte.html" width=290 height=250>

Texto para quando o navegador não conhece a tag iframe
</iframe>
Código GPT:
<!DOCTYPE html>
<html>
<head>
<title>Página com iframe</title>
</head>
<body>
<h2>Exemplo de iframe</h2>
38
<p>Aqui está um vídeo do YouTube incorporado:</p>
<iframe width="560" height="315"

src="https://www.youtube.com/embed/seu_codigo_do_video" frameborder="0"
allowfullscreen></iframe>
</body>
</html>
a) Inserir vídeo do youtube
# Para praticar
39
5.[Aula 6: HTML Semântico - Conhecer]
Semântico: SEO e acessibilidade
Conhecer o HTML semântico; Entender o que é SEO; Como deixar um site acessível.
5.1 HTML Semântico

 O HTML5 incorpora tag semânticas, que não apenas geram estrutura, mas também
definem seu conteúdo;
 Antes utilizava-se somente divs para dividir conteúdos e classes para estilizar,
mas isso dificultava que suas respostas fossem passadas para buscas e leitores de
acessibilidade.
5.1.1. <header>
5.1.2. <section>
40
5.1.3. <article>
5.1.4. <nav>
5.1.5. <aside>
A tag `<aside>` por si só não garante que seu conteúdo será exibido na lateral da tela. A tag
`<aside>` é usada para indicar conteúdo relacionado, secundário ou complementar ao
conteúdo principal da página, mas sua apresentação visual depende inteiramente do estilo
CSS aplicado a ela.
Para fazer com que o conteúdo dentro da tag `<aside>` seja exibido na lateral da tela, você
precisa aplicar estilos CSS adequados para definir sua posição e largura. Por exemplo,
você pode usar propriedades como `float`, `position`, `display`, `width`, `margin`, entre
outras, para controlar o layout e a posição do `<aside>` em relação ao conteúdo principal.
41
Aqui está um exemplo simples de como você pode usar CSS para posicionar o `<aside>` na
lateral da tela:
Lembre-se de que o código CSS acima deve ser adicionado a um arquivo CSS externo ou
incorporado ao seu documento HTML usando a tag `<style>` dentro da tag `<head>`.
Além disso, certifique-se de que o conteúdo dentro do `<aside>` seja realmente secundário
ou complementar ao conteúdo principal da página. Se o conteúdo dentro do `<aside>` for
considerado tão importante quanto o conteúdo principal, pode ser mais apropriado não usar
a tag `<aside>` e, em vez disso, colocá-lo diretamente dentro do fluxo do conteúdo principal.
5.1.6. <main>
5.1.7. <footer>
42
# PARA PRATICAR
Observações de estudo:
<TITLE> VS. <HEADER>
<HEAD> VS. <HEADER>
5.2 Benefícios do HTML Semântico
 SEO: Os mecanismos de pesquisa irão considerar seu conteúdo como palavras-

chave importantes para influenciar os rankings de pesquisa da página;
 Acessibilidade: Os leitores de tela podem usá-lo como uma placa de sinalização
para ajudar usuários com deficiência visual a navegar em uma página.
43
5.3 SEO
 O que é? : Otimização dos motores de Busca

 Seu objetivo é melhorar a posição de um site nos motores de busca;
 Motores de busca: sistemas formados por uma série de algoritmos que rastreiam,
ranqueiam e indexam os conteúdos da web para exibi-los de maneira ordenada nas
pesquisas dos usuários
 O objetivo dos motores de busca é oferecer as melhores respostas para aquilo que o
usuário está procurando
5.3.1. Organizar a hierarquia de Arquivos

 A navegação é importante para os motores de busca: Planeje a navegação a partir
da homepage
 Crie uma estrutura de diretório simples
44
5.3.2. Meta tags para SEO
a) Palavras-Chave: determinar o que está sendo otimizado
b) Meta Description: Fornece ao google e aos outros motores de busca um resumo do

conteúdo da página, pode conter uma frase ou duas, ou mesmo um parágrafo
curto.
 São muito importantes pois o motor de busca pode usá-las como snippets nos
resultados de busca de suas páginas
 Sugestão X Evitar
45
c) Títulos: Uma <title> indica tanto aos usuários quanto aos mecanismos de busca
sobre o tema tratado em uma página
d) Headlines: Estrutura hierárquica de conteúdo
46
# PARA PRATICAR
5.3.3. Análise do Desempenho de Busca
Google = Search Console (análise do desempenho de busca)
5.4 Acessibilidade
Já pensou como deficientes visuais usam a internet?
O termo acessibilidade, no contexto da internet, está associado à disponibilização da
informação a todos os usuários.
47
5.4.1. W3C – WAI e doc WCAG
 World Wide Web Consortium: Tem a missão de orientar a web, desenvolvendo
padrões, protocolos e diretrizes para garantir o crescimento da web a longo prazo.
o Criou a WAI (Web Accessibility Initiative), que elabora diretrizes para

garantir acessibilidade aos conteúdos web para pessoas com deficiência
o O WCAG (Web Content Acessibility Guidelines) é o seu documento que
traz as diretrizes de acessibilidade para a web, explicando como tornar o
conteúdo acessível para pessoas com deficiência.
5.4.2. Boas práticas acessíveis (como saber se o meu site é

acessível?)
 Descrição alternativa das imagens: Assim os leitores de tela poderão identificá-las

e descrevê-las para os usuários cegos;
 Legendas de vídeos e transcrições para áudios: Para facilitar o entendimento de
deficientes auditivos;
48
 Evitar usar apenas cores para destacar uma informação: Isso ajudará pessoas
com daltonismo, por exemplo, que não conseguiriam diferenciar os itens destacados
apenas por cores;
 Simplificar o texto: Para facilitar a leitura de pessoas com dislexia;
 Criar áreas de cliques maiores nos botões: Para ajudar usuários que não têm
precisão nos cliques a acessar conteúdos específicos;
 Fazer com que toda a funcionalidade fique disponível a partir de um teclado;
 Utilizar navegação consistente e clara: Além de colocar informação objetiva no
topo dos cabeçalhos, parágrafos, listas etc.;
 Criar ordem cronológica para os links apresentados: Facilitando a navegação;
 Fornecer links para a página inicial: Em todas as páginas;
 Escrever links com textos descritivos: Como por exemplo, “clique aqui para saber
mais”;
 Identificar abreviações e mudança de linguagem: Ex:
MÓDULO IV: PROTOTIPAGEM
6.[Aula 7: Prototipagem desde o papel –

conhecer as etapas da prototipagem]
Prototipagem desde o papel
Conhecer as etapas da prototipagem Começas a prototipagem de um site.
49
6.1 O que é prototipagem?
 É a tangibilização da ideia;
 Visualizar a ideia e simular a experiência do usuário.
6.2 Benefício da prototipagem
6.3 O que considerar ao iniciar a construção de um

protótipo?
6.3.1. Briefing
 Um dos momentos de interação mais importantes entre uma empresa e aquele que
irá fazer o serviço
6.3.2. UX (User Experience)

 Não basta ter um website ou um aplicativo bonito: ele precisa ser funcional;
 “Bonito E intuitivo”;
 O ideal é fazer testes de usabilidade: chamar alguém que não esteja envolvido com
o projeto, e pedir que realiza algumas ações e ver como ele se sai sem ajuda.
6.3.3. Posicionamento
 É fundamental hierarquizar as informações de acordo com o objetivo do site:
SITE DE UMA PIZZARIA -> FOCO: DELIVERY -> FÁCIL ACESSO DO CARDÁPIO
50
6.3.4. Cores
 Devem ser harmônicas e ter contraste para que as informações sejam visualizadas
facilmente;
 DICA de visualização: Adobe Color
 Se for uma empresa que já tem identidade visual bem trabalhada, é nela que
devemos nos basear.
6.3.5. Feedback
 Altamente recomendado solicitar feedback,tanto do cliente quanto da equipe.
Quanto mais cabeças pensarem juntas, melhor será o resultado.
6.4 Vamos prototipar?
6.4.1. Sketch
 Desenho rápido/esboço de guia, que reproduz de forma muito simples um conceito,
uma ideia ou generalidade de um projeto.
51
6.4.2. Wireframe
 É a representação estática, de baixa qualidade, de um design.
6.4.3. Mockup
 É a representação estática de um design, em qualidade média ou alta.
52
6.4.3. Protótipo
 É a representação navegável do produto final
DICAS PARA CRIAR UM BOM PROTÓTIPO
6.4 Com o protótipo em mão, qual o próximo passo?
6.4.1. MVP
 MVP é a sigla para Minimum Viable Product (Produto Minimamente Viável), até
mesmo quando se fala em produtos digitais robustos;
 Não se trata de entrega de partes soltas, mas sim, versões completas, com
funcionalidades especificadas já prontas para testes.
53
6.4.1. PROTÓTIPO X MVP
6.4 Praticando no Figma
6.4.1. Ferramentas no Figma
54
6.4.2. Frames no Figma
6.4.3. Plugins no Figma

 Para ter acesso a elementos mais elaborados, usam-se os plugins:
6.4.4. Exportar projetos do Figma

 Menu principal > File > Export frames do PDF
55
6.4.5. Templates no Figma
 “Explore FigJam Templates” [see all]:
6.4.5. Trabalhar em equipe

 É possível compartilhar seu projeto e trabalhar em equipe
56
7.[Aula 8: Ferramentas para prototipagem /
FIGMA] Workshop de prototipagem
Praticar a criação de protótipos; Construir protótipos interativos no Figma
[AULAS UDEMY EM PRÁTICA]
8.[Aula 9: Introdução ao CSS]

Compreender a sintaxe de CSS; Incluir CSS ao nosso projeto; Conhecer o uso de cores,
fontes e fundos em CSS
8.1 Sintaxe de CSS
8.1.1. Regras Sintáticas
8.2 Pai e filhos

Quando se tem uma tag “dentro” de outra, o que você faz é aplicar o conceito de pais e
filhos.
57
Nesse caso, SECTION é pai de ARTICLE, e ARTICLE é pai de H2 e P.
 Isso permite adicionar atributos específicos a “filhos” sem alterar os do “pai”. Um pai
pode ter muitos filhos, e todos eles herdam suas características, e também
podem ter características particulares.
Nesse caso é observada a forma correta de declarar cada estilo. Quando deseja selecionar
uma tag, deve incluir as tags pais para que sejam mais específicas ao aplicar estilos.
8.3 Incluindo CSS na página
8.3.1. Inserir CSS no HTML
Formas interna e inline: não recomendáveis
8.4 Atributo Class

 É uma lista das classes de um elemento, separada por espaços.
 Classes permitem a CSS e Javascript selecionar e acessar elementos específicos
através dos seletores de classe ou funções como o método DOM.
 Utilizada quando você deseja aplicar o mesmo estilo para mais de um elemento
58
8.4.1. HTML: atributo class=””
8.4.2. Class a partir de CSS
8.4.2. Mais de uma class

 Blabla
8.5 Atributo ID
8.5.1. HTML: atributo id=””

 Blabla
8.5.2. ID de CSS
 Blabla
8.6 Comparação CLASS vs. ID
59
#PARA PRATICAR
8.7 Herança e cascata
8.7.1. Herança
 Blabla
8.7.2. Precedência de declarações

 Blabla
8.7.3. Estilo Inline

 Blabla
8.7.4. !important
 Blabla
8.8 Reset
8.8.1. Reset CSS

 Blabla
8.9 Primeiras Propriedades
8.9.1. Propriedade: color

 Blabla
8.10 Estilos para Listas
8.10.1. list-style-type
 Blabla
60
8.11 Estilos para Textos
8.11.1. font-style
 Blabla
8.11.2. font-weight
 Blabla
8.11.3. font-size
 Blabla
8.11.4. font-family
 Blabla
8.11.5. text-align
 Blabla
8.11.6. line-height
 Blabla
8.11.7. text-decoration
 Blabla
8.12 Estilos para Background
8.12.1. background-color
 Blabla
8.12.2. background-image
 Blabla
8.12.3. background-repeat
 Blabla
8.12.4. background-position
 Blabla
61
8.12.5. background-size
 Blabla
8.13 Unidades de medidas
8.14 Tipografia
8.14.1. Tipografia local

 Blabla
8.14.2. Tipografia WEB

 Blabla
#Resumo/Fim da aula 9
62
Conteúdo
MÓDULO I: INTRODUÇÃO.....................................................................................................1
1. [Aula 2: Criação de arquivos HTML] Primeiros passos com HTML..................................1
1.1 Convenção de Arquivos.................................................................................................1
1.2. Documento pré-determinado.........................................................................................1
1.3. Tags...............................................................................................................................1
1.3.1. Tags HTML.............................................................................................................2
1.3.1.1. Tipos de tags....................................................................................................4
# Resumo/Fim da aula 2........................................................................................................10
MÓDULO II: VERSIONAMENTO...........................................................................................10
2. [Aula 3: Conhecer e instalar o GIT] GIT..........................................................................10
2.1. O que é a GIT?............................................................................................................10
2.1.1. GIT X GITHUB......................................................................................................13
2.2. Criando Repositórios (GIT INIT, GIT ADD, GIT COMMIT, GIT LOG).........................14
2.2.1. O que é um repositório?.......................................................................................14
# Resumo/Fim da aula 3........................................................................................................19
3. [Aula 4: Aprender o que é repositório GITHUB] GITHUB...............................................20
3.1 O que é GITHUB?........................................................................................................20
3.2 Criando um repositório (GIT PUSH).............................................................................20
3.3 Editando no GITHUB....................................................................................................23
3.4 Atualizando um repositório (GIT PULL)........................................................................23
3.5 Clonando um repositório (GIT CLONE)........................................................................23
3.6 Mais propriedades do Github: Gestão de projetos, adicionar colaboradores, comandos
github, github pages e github no vs code...........................................................................24
#Desafio obrigatório...............................................................................................................25
# Resumo/Fim da Aula 4........................................................................................................26
# GIT e GIT HUB no VS CODE.............................................................................................26
MÓDULO III: HTML................................................................................................................30
4. [Aula 5: HTML- conhecer as diferentes tags e o uso de cada uma]...............................30
4.1 Listas............................................................................................................................30
4.1.1. Tipos de Listas......................................................................................................31
a) Marcadores ou números? (ol, ul, li)....................................................................31
4.2. Tabelas........................................................................................................................32
4.2.1. Tags básicas para tabelas em HTML...................................................................32
4.3. Formulários..................................................................................................................33
4.3.1. Tag <form>...........................................................................................................33
63
4.3.2. Entrada de texto....................................................................................................33
4.3.3. Botões...................................................................................................................33
4.3.4. Controles de seleção............................................................................................34
a) Radio..................................................................................................................34
b) Caixa de seleção................................................................................................35
c) Menu suspenso..................................................................................................35
d) Tag <label>.........................................................................................................35
e) Conjunto de campo............................................................................................36
# Para praticar:.......................................................................................................................36
4.4. Links............................................................................................................................36
4.4.1. Links Relativos, Absolutos e Internos...................................................................37
a) Links relativos.....................................................................................................37
b) Links absolutos...................................................................................................37
c) Links internos.....................................................................................................37
4.5. Multimídia em HTML...................................................................................................37
4.5.1. Imagens................................................................................................................37
a) Inserir imagens...................................................................................................38
4.5.2. ALT.......................................................................................................................38
4.5.3. Links em Imagens.................................................................................................38
4.5.4. Tag iframe.............................................................................................................38
a) Inserir vídeo do youtube.....................................................................................39
# Para praticar........................................................................................................................39
5. [Aula 6: HTML Semântico - Conhecer] Semântico: SEO e acessibilidade.....................40
5.1 HTML Semântico..........................................................................................................40
5.1.1. <header>...............................................................................................................40
5.1.2. <section>..............................................................................................................40
5.1.3. <article>................................................................................................................41
5.1.4. <nav>....................................................................................................................41
5.1.5. <aside>.................................................................................................................41
5.1.6. <main>..................................................................................................................42
5.1.7. <footer>.................................................................................................................42
# PARA PRATICAR...............................................................................................................43
Observações de estudo:.............................................................................................43
<TITLE> VS. <HEADER>...........................................................................................43
<HEAD> VS. <HEADER>...........................................................................................43
64
5.2 Benefícios do HTML Semântico...................................................................................43
5.3 SEO..............................................................................................................................44
5.3.1. Organizar a hierarquia de Arquivos......................................................................44
5.3.2. Meta tags para SEO.............................................................................................45
# PARA PRATICAR...............................................................................................................47
5.3.3. Análise do Desempenho de Busca.......................................................................47
5.4 Acessibilidade...............................................................................................................47
5.4.1. W3C – WAI e doc WCAG.....................................................................................48
5.4.2. Boas práticas acessíveis (como saber se o meu site é acessível?).....................48
MÓDULO IV: PROTOTIPAGEM............................................................................................49
6. [Aula 7: Prototipagem desde o papel – conhecer as etapas da prototipagem]
Prototipagem desde o papel..................................................................................................49
6.1 O que é prototipagem?.................................................................................................50
6.2 Benefício da prototipagem............................................................................................50
6.3 O que considerar ao iniciar a construção de um protótipo?.........................................50
6.3.1. Briefing..................................................................................................................50
6.3.2. UX (User Experience)...........................................................................................50
6.3.3. Posicionamento....................................................................................................50
6.3.4. Cores....................................................................................................................51
6.3.5. Feedback..............................................................................................................51
6.4 Vamos prototipar?........................................................................................................51
6.4.1. Sketch...................................................................................................................51
6.4.2. Wireframe.............................................................................................................52
6.4.3. Mockup.................................................................................................................52
6.4.3. Protótipo................................................................................................................53
DICAS PARA CRIAR UM BOM PROTÓTIPO............................................................53
6.4 Com o protótipo em mão, qual o próximo passo?........................................................53
6.4.1. MVP......................................................................................................................53
6.4.1. PROTÓTIPO X MVP.............................................................................................54
6.4 Praticando no Figma....................................................................................................54
6.4.1. Ferramentas no Figma..........................................................................................54
6.4.2. Frames no Figma..................................................................................................55
6.4.3. Plugins no Figma..................................................................................................55
6.4.4. Exportar projetos do Figma...................................................................................55
6.4.5. Templates no Figma.............................................................................................56
65
6.4.5. Trabalhar em equipe.............................................................................................56
7. [Aula 8: Ferramentas para prototipagem / FIGMA] Workshop de prototipagem............57
8. [Aula 9: Introdução ao CSS]...........................................................................................57
8.1 Sintaxe de CSS............................................................................................................57
8.1.1. Regras Sintáticas..................................................................................................57
8.2 Pai e filhos....................................................................................................................57
8.3 Incluindo CSS na página..............................................................................................58
8.3.1. Inserir CSS no HTML............................................................................................58
8.4 Atributo Class...............................................................................................................58
8.4.1. HTML: atributo class=””.........................................................................................58
8.4.2. Class a partir de CSS...........................................................................................58
8.4.2. Mais de uma class................................................................................................58
8.5 Atributo ID.....................................................................................................................58
8.5.1. HTML: atributo id=””..............................................................................................58
8.5.2. ID de CSS.............................................................................................................58
8.6 Comparação CLASS vs. ID..........................................................................................58
#PARA PRATICAR.............................................................................................................59
8.7 Herança e cascata........................................................................................................59
8.7.1. Herança................................................................................................................59
8.7.2. Precedência de declarações.................................................................................59
8.7.3. Estilo Inline............................................................................................................59
8.7.4. !important..............................................................................................................59
8.8 Reset............................................................................................................................59
8.8.1. Reset CSS............................................................................................................59
8.9 Primeiras Propriedades................................................................................................59
8.9.1. Propriedade: color.................................................................................................59
8.10 Estilos para Listas......................................................................................................59
8.10.1. list-style-type.......................................................................................................59
8.11 Estilos para Textos.....................................................................................................60
8.11.1. font-style.............................................................................................................60
8.11.2. font-weight..........................................................................................................60
8.11.3. font-size..............................................................................................................60
8.11.4. font-family...........................................................................................................60
8.11.5. text-align.............................................................................................................60
8.11.6. line-height...........................................................................................................60
66
8.11.7. text-decoration....................................................................................................60
8.12 Estilos para Background.............................................................................................60
8.12.1. background-color................................................................................................60
8.12.2. background-image..............................................................................................60
8.12.3. background-repeat..............................................................................................60
8.12.4. background-position............................................................................................60
8.12.5. background-size..................................................................................................61
8.13 Unidades de medidas.................................................................................................61
8.14 Tipografia....................................................................................................................61
8.14.1. Tipografia local....................................................................................................61
8.14.2. Tipografia WEB...................................................................................................61
#Resumo/Fim da aula 9.........................................................................................................61
67

Web-Development - Coderhouse (Aulas)

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web-Development - Coderhouse (Aulas)

Enviado por

Direitos autorais:

Formatos disponíveis

DESENVOLVIMENTO WEB

1.[Aula 2: Criação de arquivos HTML] Primeiros

1.1 Convenção de Arquivos

1.2. Documento pré-determinado

c) Sintaxe do Código: É importante manter a ordem dentro do código e incorporar boas

1.3.1.1. Tipos de tags

 Containers mais comumente usados:

 <h1> a <h6> de um bloco:

MÓDULO II: VERSIONAMENTO

2.[Aula 3: Conhecer e instalar o GIT] GIT

2.1. O que é a GIT?

O Git é um sistema de controle de versão distribuído amplamente utilizado para rastrear

 Repositório: Um repositório Git é basicamente um local onde você armazena seu

 Branch (ramificação): Um branch é uma linha de desenvolvimento independente.

 Push: Envia as alterações locais do seu repositório para o repositório remoto.

 Merge (mesclar): Combina as alterações de duas branches diferentes.

 Pull Request (solicitação de pull): Usado em plataformas como o GitHub, é uma

- `git init`: Inicia um novo repositório Git.

### CORRELACIONANDO GIT AO GOOGLE DRIVE PARA ENTENDER MELHOR:###

Git é como o Google Drive para Desenvolvedores:

2. Commit = Snapshot (Instantâneo):

3. Branches = Ramificações de Documentos:

4. Push = Atualizar o Google Drive:

5. Pull = Baixar do Google Drive:

6. Merge = Mesclar Documentos:

7. Histórico de Commits = Histórico de Versões:

8. .gitignore = Ignorar Arquivos no Google Drive:

2.2.1. O que é um repositório?

 GIT INIT: Criar um repositório GIT

1. git init meu_repositorio

4. Iniciar repositório no VS CODE utilizando o git init

5. Criando um arquivo para ser salvo no repositório

 GIT ADD: Adicionar o arquivo ao staging área

A palavra "commit" é frequentemente usada em ambientes de controle de versão para

Em resumo, enquanto "init" em `git init` sugere "iniciação" ou "inicialização", "commit" em

 GIT LOG: Histórico do que aconteceu no repositório

10. git log

- GIT LOG – Listar Commits

11. git log --oneline

3.[Aula 4: Aprender o que é repositório GITHUB]

3.1 O que é GITHUB?

3.2 Criando um repositório (GIT PUSH)

git push -u origin master

3.4 Atualizando um repositório (GIT PULL)

3.5 Clonando um repositório (GIT CLONE)

# GIT e GIT HUB no VS CODE

a) Para realizar um commit é necessário adicionar a modificação de working directory

Passou de changes para staged changes:

b) SEMPRE SALVAR AS MUDANÇAS (só que já ativei o “Auto Save” no VSCODE

Então, clica para syncar:

E clica para subir as mudanças para o github no canto esquedo:

f) Github atualizado com os commits feitos:

 Os passos 2.2. da página 15 estejam feitos:

 Adicionar o projeto/pasta de origem do GITHUB para o prompt do computador para

MUDANÇAS FEITAS DO GITHUB PARA O VSCODE

É só clicar na “bolinha de atualização” do canto inferior esquerdo, que ele faz/baixa a

MÓDULO III: HTML

4.[Aula 5: HTML- conhecer as diferentes tags e

a) Marcadores ou números? (ol, ul, li)

4.2.1. Tags básicas para tabelas em HTML

4.3.1. Tag <form>

 É um elemento de container como um <div> e <span>, mas também suporta alguns

4.3.2. Entrada de texto