MagicFront-v3 1

Prévia do material em texto

MAGIC FRONT
O guia moderno do frontend
@ o j u l i o c o d e
{
BOAS VINDAS!
Fico extremamente feliz que você
escolheu aprimorar seu conhecimento
com este ebook
Ao longo das próximas páginas,
exploraremos conceitos fundamentais
de HTML, CSS, JavaScript, React, e
outros assuntos
Como desenvolvedores, estamos
constantemente em busca de
aprendizado e crescimento
Estou empolgado por você ter
embarcado nessa jornada comigo.
Lembre-se de que a chave para o
sucesso é a prática constante e a
curiosidade incansável
Então, vamos começar? Estou aqui
para guiá-lo, e tenho certeza de que
juntos alcançaremos grandes
conquistas no campo do Frontend.
Boa leitura e aproveite ao máximo esta
jornada!
MAGIC FRONT
O guia moderno do frontend{
Introdução
Por onde começar
Ao longo deste ebook, vou te guiar nas
bases da programação frontend, com
HTML, CSS, JS e React
Além disso, nós também vamos ver sobre
currículo e Linkedin. Afinal, o objetivo
com tudo isso é que você consiga uma
vaga como programador
Sinta-se à vontade!
Para ir no seu ritmo, ou pular alguma parte que já tenha
conhecimento. Quero que você aproveite o máximo deste
ebook.
E, claro, caso tenha alguma dúvida, me chame pelo Instagram
@ojuliocode, ou pelo Tiktok!
Então vamos nessa!
Primeiro módulo: HTML
MÓDULO 1:
HTML
Antes de começarmos com a teoria, observe estas linhas de
código de HTML e como seu resultado ficaria na página:
Como você pôde ver, o HTML, ou Hypertext Markup
Language, é uma linguagem de marcação utilizada para
estruturar e apresentar conteúdo na internet. 
Quando você utiliza a tag , você está dizendo para
o navegador que o texto é um título (h1 significa heading 1,
ou título 1). Por isso o texto que está dentro das tags fica
maior e em negrito
Ou seja, todo conteúdo do HTML é apresentado dentro de
tags: conteúdo... 
Ao contrário de uma linguagem de programação, o HTML
não possui lógica ou capacidade de processamento. 
Em vez disso, seu objetivo principal é fornecer uma
estrutura para o conteúdo, permitindo que os navegadores
interpretem e exibam as informações de forma adequada aos
usuários.
Seção 1: Hello World!
Introdução
Um elemento é formado por três partes principais: a tag de
abertura, o conteúdo e a tag de fechamento. As tags são
envolvidas nos sinais . A tag de fechamento tem a
particularidade de ter uma barra (/), para indicar o fim do
elemento. 
O elemento abaixo () representa um parágrafo
Acabei de mostrar a você que a tag representa um título.
Mas e as outras tags? 
Temos diversas outras tags html representando outros
elementos:
 Parágrafo
 Lista
 Item de lista
 Corpo do arquivo
Há outros elementos que não precisam de duas tags (de
abertura e de fechamento), como por exemplo as tags: 
 Imagem
 Link
 Entrada de texto
Elementos
Resultado
Tag de abertura Tag de fechamento
Estrutura básica de um site
Há uma estrutura inicial que todos os sites que criaremos
seguem. A primeira coisa que precisamos fazer é declarar a
tag 
Esta tag irá especificar o elemento raíz (ou elemento root) do
nosso documento. A partir de agora, então, todas as tags que
quisermos inserir irão ficar dentro da tag HTML. Todo o nosso
site irá estar dentro da tag html
Esta é uma capacidade que algumas tags html possuem:
podemos colocar tags dentro de outras tags
Estrutura básica de um site
Agora, precisamos fazer uma divisão de duas tags: 
Tag 
Tag 
Vamos começar falando da tag body. É dentro dela que
iremos inserir todos os elementos visuais do nosso site.
Basicamente, tudo o que conseguimos ver, irá ficar dentro da
tag body:
Textos
Títulos
Imagens
Listas
Então o que teremos na tag ? 
Tudo o que não for visual. Dentro da tag head, teremos
apenas informações que serão passadas para o navegador.
Ou seja: tudo o que não será mostrado visualmente na
página
Vamos ver um exemplo: 
Veja que isso é uma informação que passamos para o
navegador, e não um elemento que renderizamos no nosso
site
Além do título, podemos passar outros tipos de informações
para o navegador utilizando a tag . Esta tag tem o
significado de “meta informação”. São informações a respeito
do nosso site e que, novamente, não irão nos trazer nenhum
elemento visual
Estrutura básica de um site
A tag irá especificar o título do nosso site. No exemplo
abaixo, pegamos o site do google, com o seu título
O exemplo acima irá passar uma informação necessária para
que o nosso navegador interprete símbolos e caracteres
especiais
Vamos revisar
Tudo o que vimos anteriormente pode ser resumido pela
imagem abaixo. Os significados de “head” e “body” são,
respectivamente, “cabeça” e “corpo”
Podemos pensar na cabeça como informações, e o body
como sendo o conteúdo 
Tag 
Essa tag envolve todo o seu código, indicando que este é um
código HTML. Esse é o elemento raiz do seu código, então
qualquer outro elemento estará dentro do 
Todos os códigos que criarmos a partir de agora serão
envolvidos na tag html
Tag 
Esta é a única tag que não nos mostra nada visualmente. Ela
serve para especificar informações para o seu navegador
sobre as nossas páginas
Ou seja: dentro da tag head, não haverá nenhum elemento
visível no browser, apenas informações para o nosso
navegador
Tag 
Aqui é onde vai ficar todo o seu site. Tudo o que você deseja
de inserir visualmente irá ficar dentro da tag body: textos,
imagens, listas, links, etc.
Imagine que tudo o que você está vendo na sua tela agora
(no seu navegador) está dentro da tag body deste site.
Você pode conferir um resumo da maior parte das tags HTML no
site https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Exercícios
Vamos fazer nossa primeira experiência prática. Antes
disso, você irá precisar ter um editor de código no seu
computador.
O editor que vamos utilizar aqui é o Visual Studio Code.
Você pode encontrar ele para fazer o download em
code.visualstudio.com
Ao clicar no botão acima, o download do editor irá começar.
Assim que terminar, é só clicar em cima do arquivo
Siga a instalação com as configurações padrão. Assim que
finalizar a instalação, você já pode abrir o seu editor
http://code.visualstudio.com/
Para criarmos um novo projeto, você primeiro irá criar uma
pasta com o nosso projeto:
Para abrir essa pasta no seu editor,
basta clicar em “Arquivo” e em “Abrir
pasta”. Depois, basta apenas
selecionar a sua pasta
Exercícios
Com a nossa pasta aberta, podemos criar um novo arquivo
HTML. Você irá clicar com o botão direito do mouse -> Novo
Arquivo.
Agora, nomeie este arquivo para index.html
Exercícios
Agora você irá escrever “Hello World” dentro do seu arquivo,
e salve com Ctrl + s. 
Exercícios
Depois disso, clique com o botão direito no seu arquivo e vá
em “Copiar Caminho”. Cole (Ctrl + V) esse caminho no seu
navegador
Parabéns! Você fez o seu primeiro programa em HTML.
Como você pôde observar, apenas escrevendo uma simples
frase já gerou pra gente um resultado na web
Agora, iremos usar as tags que aprendemos anteriormente
para poder criar um código mais organizado
Comece criando a estrutura básica com o html e o head,
como está feito acima. Depois, você irá inserir o body, com
o conteúdo que inseri dentro dele
Exercícios
Feito isso, você irá salvar o seu código (use o atalho Ctrl +
s), retornar à sua página web e recarregar a página (com o
atalho F5)
O resultado esperado será este:
Sinta-se à vontade para testar outros elementos HTML! O
importante é que você pratique esses conceitos básicos
de html. No exemplo abaixo, criamos uma lista (ul) de
items (li)
Exercícios
Nesta seção iremos aprofundar um pouco mais em como
elementos podem se relacionar uns com os outros
Vamos aprender também em como construir uma página
com elementos de texto: título, subtítulo, texto em negrito,
etc.
Quando vamos criar uma página que contenhaOutro ponto importante das suas informações pessoais é:
não é recomendável inserir o seu endereço completo 
Muitas pessoas têm o costume de colocar sua rua, endereço,
etc. no currículo. Porém essas são informações muito
sensíveis
É recomendável que você forneça seu endereço específico
apenas após garantir que realmente é uma empresa
“confiável”
Estamos vivendo uma época de muitos golpes, então proteja
a sua privacidade
A introdução do seu currículo é um pequeno texto falando
um pouco sobre você profissionalmente
Sobre mim (ou introdução)
Informações básicas
Introdução
Experiências profissionais
Formação
Skills
Lá deve conter uma breve
introdução sobre quem é
você, quais são suas
experiências e tecnologias e
qual o impacto que você
causou
Ao final do seu “sobre mim”,
deve haver um pequeno
motivo pelo qual você se
interessou pela empresa que
você está aplicando
”Desenvolvedor mobile, com experiências acadêmicas em
desenvolvimento com React Native e Kotlin. Pude desenvolver
soluções premiadas que impactaram diversas pessoas. Tenho o
objetivo de contribuir com a empresa nas soluções mobile que ela já
desenvolve hoje em dia”
Observe que destacamos pontos muito importantes na nossa
introdução de exemplo: quem nós somos, quais tecnologias
utilizamos, o que nós impactamos e qual o nosso objetivo
Você deve imaginar que, quando o recrutador olhar seu
currículo, ele estará, também, com uma pilha de outros
currículos
Então você deve ser objetivo nessa introdução, destacando
qual o motivo porque você seria apropriado para a vaga
Sobre mim (ou introdução)
Dica de ouro:
É extremamente importante que você pesquise sobre a empresa
antes de montar o currículo. Veja quais são os serviços e produtos
oferecidos pela empresa e relacione isso no seu currículo. Se a
empresa faz sistemas mobile, destaque isso fortemente currículo
Vamos ver outro exemplo:
”Programador frontend, com experiências em desenvolvimento com
HTML, CSS e JavaScript. Já desenvolvi projetos robustos com foco em
sistemas web. Tenho o objetivo de atuar na empresa como
desenvolvedor frontend, podendo contribuir com as soluções web de
alta performance que a empresa já oferece“
Este é um ponto de muita dúvida, já que muitas vezes esta é
a nossa primeira vaga. Então vamos dividir esta seção em
duas partes:
Via de regra, o que eu sempre falo é: se você possui
experiências profissionais, elas devem vir logo após a sua
introdução
Isso porque podemos pensar novamente na pilha de
currículos. O recrutador quer olhar rapidamente quais são
suas experiências e o que você realizou
Experiências profissionais
O formato que você pode utilizar
para as experiências
profissionais é bem simples:
Nome da empresa, Cargo,
Período e Descrição
1 - Possuo experiências profissionais
[NOME DA EMPRESA]
2019 - 2022
Estagiário de TI
Como estagiário na empresa [EMPRESA] pude desenvolver
atividades relacionadas ao ramo de TI, dentre elas:
Manutenção dos servidores da empresa
Realizar a hospedagem de sites
Desenvolver sites de alta performance, utilizando HTML e
CSS
Fiz parte do processo de desenvolvimento de landing pages
para diversas empresas. Foi uma conquista poder alavancar
diversos negócios com uma página web desenvolvida
Quando é o caso de não termos experiências profissionais,
eu recomendo que você coloque projetos que você realizou
Por isso é tão importante você estar sempre fazendo
soluções com as linguagens de programação
Sabe o que destaca muito um currículo que não tem
experiências profissionais? Um projeto (ou mais projetos) de
impacto
Experiências profissionais
2 - Não possuo experiências profissionais
[NOME DO PROJETO]
2019 - 2022 (Tempo de desenvolvimento)
Desenvolvi o projeto [PROJETO] com o intuito de facilitar a
gestão de estoque de lojas de departamento
Este projeto veio com a proposta de solucionar a dificuldade
da gestão de estoque das lojas de departamento. A partir
disso, criei (ou criamos) uma solução utilizando React e
Firebase para gerir o estoque
(Se o projeto ganhou alguma premiação ou reconhecimento)
Pudemos ser agraciados com o [PREMIO ou
RECONHECIMENTO] por ter sido um projeto impactante
Projetos
Sempre que tiver uma oportunidade, participe de
competições de programação, hackathons, startup
weekend, e qualquer outra possibilidade de ser premiado por
algum projeto
Como extra, gosto sempre de falar que o seu currículo tem
de estar sempre relacionado com a vaga. Eu não recomendo
colocar alguma experiência profissional que não esteja
relacionada com a vaga
Por exemplo:
Muitas vezes, já tivemos alguma experiência profissional em
atendimento ao público: em alguma loja, algum comércio
local ou um comércio familiar
Evite colocar esse tipo de experiência, pois irá trazer um ar
genérico ao seu currículo
Ao invés disso, prefira colocar projetos seus que tiveram
algum impacto
Experiências profissionais
2 - Não possuo experiências profissionais
[INSTITUIÇÃO]
2019 - 2022 (Período da formação)
Ensino Médio
Dentre as atividades desenvolvidas neste período, destaco
alguns fatos importantes:
2019: Fui líder da minha turma do primeiro ano,
desenvolvendo habilidades de liderança organizacional da
turma
2020: Recebi premiação por um projeto que realizei
(descreva o projeto)
2022: Fui agraciado com o prêmio de Destaque do Ano, no
quesito desempenho
Formação
Nesta parte, podemos ser um pouco mais direto ao ponto.
Assim como na formatação das experiências profissionais, nós
iremos colocar: nome da instituição, período, cargo (nesse caso,
será o nome do curso)
Ressalto que a importância da sua formação começa no Ensino
Médio/Ensino Técnico. Ressalte, nesta área, quaisquer
atividades extra curriculares que informam skills técnicas ou
soft skills 
Formação
Ressalto fortemente que é importante que você descreva
quaisquer premiações, destaques, projetos, etc. Mesmo que
um projeto não tenha sido premiado, coloque-o na sua
formação
Formação
Vamos ver um breve exemplo de formação na Universidade,
para uma pessoa que ainda não concluiu o curso
[INSTITUIÇÃO]
2022 - 2027 (Período da formação. Coloque o ano de previsão
da formatura)
Ciência da computação
Até o momento do curso, destaco algumas conquistas:
Projeto para a Feira de projetos da instituição, o qual
desenvolvi em equipe utilizando tecnologias web
Alto desempenho no primeiro período, o que me rendeu
um destaque concedido pela instituição
Formação
Assim como observei durante toda a concepção do currículo,
ressalto que temos que ser objetivos em nosso currículo
Os recrutadores analisam os currículos de forma objetiva e
clara. Destaque pontos de interesse que vão direto ao ponto
no que você conquistou, e o que você realizou
Na formação, não vá além de conquistas
O recrutador já tem conhecimento, por exemplo, em qual é a
grade de um curso de ADS ou de Ciência da Computação
Formação
Além da formação formal, podemos também inserir cursos
que realizamos. Tenha um pouco mais de cuidado nesta
parte, pois podemos encher esta parte com cursos
irrelevantes
Tente se recordar das formações mais relevantes que você
relalizou: um curso de 70 horas em linguagens web, ou um
curso de 30 horas que agregou consideravelmente para o seu
conhecimento
[INSTITUIÇÃO]
2022 (Ano de realização do curso)
Desenvolvimento Fullstack
Este curso foi crucial para meu desenvolvimento técnico na
programação. Durante 80 horas de curso, pude me
desenvolver tecnicamente nas tecnologias:
Javascript
Typescript
Node
AWS
Formação
[INSTITUIÇÃO]
2023 (Ano de realização do curso)
Linux avançado
Neste curso de Linux avançado, pude realizar atividades
essenciais para um desenvolvedor, como:
Realizar hospedagem de sites 
Criar máquinas virtuais
Configurar ambientes Docker
Formação
Você pode perceber que cada seção toma muito espaço do
seu currículo, o que pode tirar a objetividade
Por isso, insira somente suas formações realmente
importantes. E o mais importante de tudo:
Não é necessário inserir na sua formação tudo o que você já
fez. Apenas o essencial
Skills
Por último,depois de já ter provado na prática suas
habilidades, você irá ser um pouco redundante nas suas
skills
Aqui você irá inserir uma pequena lista com todas as suas
habilidades técnicas e soft skills
Inglês avançado
HTML e CSS
Proatividade
Firebase
...
Veja que esta é uma lista mais
genérica. Eu digo que este é o
único lugar do seu currículo
onde você pode ser genérico. 
Veja abaixo um exemplo do meu currículo. Veja que coloquei
o nome de “Competências”, mas também pode ser skills.
Este currículo foi o que utilizei para conseguir a minha vaga
atual
Skills
Vale ressaltar que: essas não são todas as minhas skills.
Porém eram as que tinham relação com a vaga
Por exemplo: eu já atuei como Técnico em Eletrônica. Por
isso, tenho conhecimentos em softwares de
desenvolvimento de placas
Porém, aquilo não tinha a ver com a vaga para a qual eu
estava me candidatando. Então não havia necessidade de
inserir no currículo
No Notion do Magic Front, deixei um modelo de currículo
incrível para você
http://bit.ly/magicfront
Modelo
Para fazer download desse currículo, é só seguir conforme a
imagem abaixo!
Projeto 
Antes de utilizarmos o Linkedin, precisamos entender como
essa rede funciona
No Linkedin, diferente de outras redes sociais como o
Instagram, Tiktok, todas as suas interações são públicas. A
rede irá notificar para os seus contatos tudo o que você fizer:
Novos posts
Likes que você der
Comentários que você fizer
Novas conexões
Ou seja: se você posta um projeto seu, e uma conexão sua
curte, as conexões da outra pessoa vão ver o seu projeto!
Seção 2: Linkedin
Como tirar o máximo do seu Linkedin
Curtida
É conexãoVocê
Não é conexão
Por isso é tão importante ser ativo no Linkedin. As conexões
da sua conexão podem ser recrutadores: isso implica que há
recrutadores tendo contato com seus posts
Antes de fazermos posts, vamos, primeiro, ver como
podemos turbinar o nosso perfil
Há uma série de recomendações para que seu perfil seja
mais facilmente achado
Como tirar o máximo do seu Linkedin
Tenho interesse em
Logo abaixo do seu nome, deve conter a posição que você
deseja. Mesmo que hoje você atue com outra coisa, coloque
em seu perfil qual o cargo você está buscando
Dessa maneira, quando recrutadores pesquisarem pelo seu
cargo, será mais fácil achar seu nome
Seu perfil
João Costa
Desenvolvedor Frontend
Empresa tech
Além disso, vale ressaltar algo muito importante: sua foto de
perfil deve estar adequada aos padrões da rede
É sempre bom ressaltar que sua foto deve ter um tom
profissional. De preferência em um fundo neutro
O Linkedin é uma rede profissional, e os recrutadores estão
buscando por esse tipo de perfil
Seu perfil
Outro ponto que podemos ressaltar é o seu “Sobre”
Sobre
Sou um desenvolvedor frontend proficiente em linguagens
de programação web. Tenho conhecimentos em HTML, CSS e
Javascript e fui desenvolvedor de soluções de impacto para
diversos projetos
Já desenvolvi projetos, que estão em meu Github, para
utilizando tecnologias como React e Firebase. Desde 2019,
quando comecei a estudar programação, tenho contribuído
constantemente para projetos robustos
Esta parte se assemelha bastante a introdução do currículo,
quando vimos sobre como montar um currículo da maneira
certa
Seu perfil
”Desenvolvedor mobile, com experiências acadêmicas em
desenvolvimento com React Native e Kotlin. Pude desenvolver
soluções premiadas que impactaram diversas pessoas. Tenho o
objetivo de contribuir com a empresa nas soluções mobile que ela já
desenvolve hoje em dia”
Veja que desta parte, o única trecho que não utilizaremos é a
parte em laranja, já que não estamos falando de uma empresa
em específico
No geral, é sempre importante destacar três pontos:
Quem você é (desenvolvedor mobile)
Quais tecnologias você já teve contato (React Native e
Kotlin)
Qual foi o seu impacto (Soluções premiadas)
Assim como no currículo, os recrutadores querem informações
objetivas e claras. O recrutador está navegando no Linkedin
com um único objetivo: achar a pessoa que mais se encaixa
com a vaga
Conseguindo ser objetivo no seu “Sobre”, você consegue ter
mais chances de atrair a atenção do recrutador
Agora vamos falar sobre a parte de projetos: 
Seu perfil
Para isso, peguei o meu próprio perfil para usar como
exemplo. Este é um dos projetos que eu fiz. Este projeto
desenvolvi com o intuito de participar de um Hackathon da
faculdade
Note que eu descrevi o projeto minunciosamente, e coloquei
o link do github para o projeto
O que isso quer dizer?
Todos os recrutadores que passarem pelo meu perfil vão
conseguir visualizar muito bem quais são minhas
proficiências na programação (projetos)
Neste outro projeto, fiz algo parecido
Seu perfil
Veja como eu também descrevo parte do projeto, e coloco o
link do Github
Além disso, para esses projetos, eu também fiz posts no
Linkedin, falando um pouco sobre como foi desenvolver o
projeto e quais tecnologias eu usei
Como eu falei no início da seção, o Linkedin possui uma
capacidade de propagação dos posts muito poderosa
Sempre que você postar algo, e uma conexão A curtir ou
comentar seu post, as conexões da conexão A também vão
ver seu post
Propagação no Linkedin
John Carl gostou disso
No exemplo a seguir, veja que eu não sigo o Lukas. Porém,
como sigo o John Carl, no exemplo, o post dele apareceu
para mim
Agora vamos ver um pouco de estatística. Observe os dados
abaixo, tirado do estudo da Finances Online:
Propagação no Linkedin
O primeiro dado é o que mais nos interessa: 72% dos
recrutadores utilizam o Linkedin para recrutar talentos
Postar os seus projetos do Linkedin é o mesmo que expôr seus
projetos a 72% das empresas. Esse dado é imenso, e você
deveria começar a usar isso a seu favor
O que eu sempre falo é: exponha seus projetos de maneira
visível para a rede. Se possível, grave um vídeo da sua tela,
mostrando o funcionamento do projeto
Para que você tenha o melhor desempenho no Linkedin,
tenha muitas conexões. Tenho certeza que isso vai ser
impactante para a sua rede
Como eu falei mais acima, o mundo inteiro está no Linkedin.
Sempre exponha suas habilidades e projetos nesta rede
Finalizações
MÓDULO 5: 
GIT E GITHUB
Você já deve ter ouvido diversas vezes essa palavra, durante o
seu aprendizado de programação. Mas o que significa Git?
Git nada mais é do que um software de controle de versão,
ou comumente chamado de VCS (Version Control System).
Um sistema de controle de versão é uma forma de gerenciar
as versões de um software
Mas como é isso na prática? 
Bem, vamos ver: sabe quando você está fazendo um trabalho
de escola no word, e você salva ele no seu computador?
Introdução
Seção 1: O que é git?
Versao 
final.docx
Imagine que você precisa fazer alguma alteração nesse seu
arquivo. Muitas vezes, o que fazemos é fazer a modificação e
alterar o nome do arquivo
Versao 
final.docx
Versao oficial 
final 2.docx
Versao final de
verdade 3.docx
Já pensou como nós salvamos as versões do nosso código?
Sem o git, nós teríamos que ficar salvando o nosso código em
algum tipo de Drive, como o OneDrive ou Google Drive
Com o tempo, nós encheríamos o nosso drive com diversas
pastas com versões diferentes
Introdução
index.js
index.html
styles.css
Projeto versão 1
index.js
index.html
styles.css
Projeto versão final
index.js
index.html
styles.css
Projeto versão final 2
Pare pra pensar se alguma dessas versões estiver com um
bug crítico: você precisará voltar para uma versão anterior.
Mas qual versão? Qual versão ainda funciona e qual está com
bug?
Em meio a esses problemas, nasceu o git
Antes de falarmos sobre o git em si, você precisa saber o que
é um repositório. Semelhante ao OneDrive, o repositório é
onde o seu código irá ficar armazenado
Diferença entre git e repositório
Para poder “mandar” seu código para o repositório, você
utilizará o git. O Git então é apenas uma ferramenta para que
você faça interações com seu repositório
O git tem uma particularidade muito interessante: ele
mantém uma linhado tempo do seu código 
Adicionou o arquivo 
index.js
Modificou o arquivo
index.js
Adicionou o arquivo
index.html
Adicionou o arquivo
styles.css
Modificou o arquivo
index.html
Quando trabalhamos com Git, nosso código se transforma
em uma linha do tempo. Vamos supôr que hoje é o seu
primeiro dia trabalhando com Git
Você tem um arquivo index.html na sua pasta de projeto, e
envia ele para o seu repositório
Git
index.html
Agora, você aprimorou o seu projeto, e adicionou um arquivo
styles.css. A grande sacada do git é que você não precisa
enviar sua pasta inteira novamente
Agora, você irá enviar apenas o styles.css
index.html
index.html
styles.css
index.html
styles.css
Com o Git, você não precisa ficar mantendo várias pastas
com diferentes versões
Você terá apenas um repositório, o qual você vai apenas
atualizar
Git
Para instalarmos o Git, você precisa saber que ele é um
programa a ser instalado no computador. Você poderá
utilizar o Git de duas maneiras
Pelo terminal
Pela interface
Em muitas empresas de software, você irá precisar utilizar o
Git pelo terminal. Então é por essa maneira que vamos
aprendê-lo
Link para download: https://git-scm.com/download/win
Introdução
Seção 2: Instalando Git
Você deverá escolher alguma das opções em azul.
Normalmente, escolha a primeira versão, onde está escrito
“Click here to download”
https://git-scm.com/download/win
Clicando neste botão, o seu downlioad irá iniciar. Após o
download completar, clique no arquivo que foi baixado
Introdução
Após isso, basta que você siga o tutorial de instalação até o
final
Neste momento, agora você poderá abrir o seu Visual Studio
Code. Você irá abrir o terminal, e deixá-lo aberto por
enquanto
Introdução
A configuração do Git é bem simples. Como neste tutorial
nós iremos utilizar o Github como sendo o nosso repositório,
você terá que criar uma conta lá
Entre no site github.com, e clique em Sign Up (ou em criar
conta). O website irá te guiar no passo a passo para criar uma
conta. O que você precisa lembrar é o seu email: é ele que
vamos utilizar para realizar o cadastro no git
Introdução
Seção 3: Configurando o Git
Tendo o cadastro no Git, agora você está pronto para poder
configurar seu terminal no VSCode. Volte para a sua tela do
Visual Studio com o terminal aberto
A sintaxe de um comando git segue o padrão acima:
git1.
nome do comando2.
opções3.
No exemplo acima, o nome do comando é “config” e a opção
é “global”, significando que essa configuração irá ser aplicada
para todos os usuários deste computador
O próximo comando serve para configurar o email de usuário
A primeira coisa que nós vamos fazer é configurar o nome de
usuário e o nosso email
Lembre-se de utilizar o email que você fez o cadastro no Git.
Para configurar o seu nome, utilize o seguinte comando no
terminal
Introdução
Acima coloquei um exemplo, porém o objetivo é que você
coloque o seu email (o email que utilizou para criar a conta
do git) no lugar de “seu-email@gmail.com”
Agora você irá criar uma pasta no seu computador e abri-la
no Visual Studio. É esta pasta que iremos criar nossos
projetos
Introdução
Seção 4: Primeiro repositório
1. Criar pasta 2. Abrir a pasta 3. Selecionar pasta
Agora, você deverá abrir o seu terminal. Clique nos três
pontos logo acima, e depois abra o terminal
Para inicializar um repositório, você deverá digitar o comando “git
init” no terminal
Inicializando
Agora que você inicializou este repositório, é importante saber
como funciona o fluxo de desenvolvimento do git. No Git, antes
de mandarmos nossas modificações para o Github, temos um a
área chamada de Staging
Staging Area
Seu projeto Github
A área de stage é como se fosse um passo antes de mandar seu
código para o Github. Pense no fluxo do Git como se fosse um
caminhão realizando uma entrega
O seu projeto (no seu computador) é a entrega ainda na loja1.
A área de staging é como se a loja estivesse colocando seu
produto no caminhão
2.
Quando seu código chega no Github, é como se essa
encomenda fosse entregue
3.
O comando que utilizamos para adicionar novos arquivos no
“Caminhão” (na Staging área) é o comando Git Add
Staging area
Staging Area
Seu projeto
git add arquivo
Vamos então fazer este experimento: crie um novo arquivo na sua
pasta do VSCode
Observe que, ao fazer isso, surgiu uma modificação na aba de git,
na esquerda do seu VSCode
Tendo este novo arquivo, agora você já está pronto para adicioná-
lo à area de staging. Vá no seu terminal e digite o comando git add
teste.js
Inicializando
Perfeito! Agora é hora de colocar uma mensagem na sua
encomenda. Sempre que estamos mandando algo pelo git,
pensando na analogia do caminhão, precisamos colocar uma
mensagem na encomenda
É pra isso que serve o comando git commit. Ele é um comando
para criar um histórico de todas as suas “entregas” ao git
Staging Area
Seu projeto Github
git commit -m “minha mensagem”
Então vamos fazer isso! Agora você irá digitar o comando git
commit -m “mensagem”. Observe que, dentro das aspas, você
poderá colocar qualquer mensagem
Commit
O commit é o principal registro utilizado em um repositório. Ele
armazena, dentre outras coisas:
Um ID único1.
A mensagem2.
A data3.
O autor4.
Por isso é um comando tão importante para poder localizar as
modificações do seu código
Estamos chegando nas partes finais de nosso processo. Antes de
mandarmos nosso código para o repositório, nós vamos precisar
fazer algo no Github
Já temos o nosso repositório criado em nosso computador. Porém,
não temos nada criado no Github. Entre no seu github pelo site
github.com e vá na parte de criação de repositórios
Linkando um repositório
Ao criar um novo repositório, por enquanto a única preocupação
que teremos é com o nome. Coloque um nome como “Aprendendo
Git” e clique em criar repositório
Agora, você precisará dar três comandos principais, que estão
listados no seu repositório
Linkando um repositório
O comando git branch -M main irá criar a ramificação principal do
seu projeto. São as branches. As branches irão servir para que você
ramifique o seu projeto, e que outras pessoas trabalhem nele junto
com você
Por enquanto não vamos nos preocupar muito com esse comando,
porém ele é necessário
O próximo comando é um dos mais importantes, e que você irá
precisar fazer apenas uma vez. Você irá conectar o seu repositório no
Github com a sua pasta local
O comando tem a seguinte estrutura:
git remote add origin git@github.com:NOMEUSUARIO/REPO.git
Você irá trocar NOMEUSUARIO pelo seu nome de usuário, e REPO
pelo nome do seu repositório
Linkando um repositório
Este comando irá estar descrito na página inicial do seu repositório
no git
O último comando que vamos precisar dar é o comando Git Push
Staging Area
Seu projeto Github
git push 
O comando git push irá mandar seu código da área de staging
para o Github propriamente. E então, agora o seu código irá
estar sincronizado com seu repositório no git!
Comandos que você mais vai usar
Depois que você já fez essas três configurações, você irá usar três
comandos principais para lidar com seu repositório
Staging Area
Seu projeto Github
git commit -m “minha mensagem”
git push git add
git add NOME_DO_ARQUIVO1.
git commit -m “MENSAGEM”2.
git push3.
Observação: para adicionar todos os arquivos modificados do seu
repositório pra área de staging, basta digitar “git add .” (git add
PONTO)
ISSO É TUDO PESSOAL
Nossa jornada não se encerra por aqui!
Este ebook tenho certeza que foi um
baita aprendizado para você. Espero
que realmente tenha sido um bom
proveito
Mas lembre-se que o aprendizado
nunca termina
Meu objetivo é que você dê sempre o
seu melhor na programação, e estarei
sempre no Instagram @ojuliocode para
tirar suas dúvidas!
Até mais!
MAGIC FRONT
O guia moderno do frontend{textos, temos
que nos atentar à organização do código e como vamos
estruturar
Seção 2: Aprofundando
Textos e formatação
No exemplo acima, podemos perceber algumas coisas: temos
um título inicial (h1), um subtítulo (h2) e o conteúdo do nosso
texto (p)
Além da tag h, temos a tag . Esta tag é utilizada para
criarmos nossos parágrafos. Se quisermos inserir vários
textos extensos em nosso código, precisamos usar os
parágrafos
Fazemos isso para que o nosso navegador identifique cada
pedaço de texto, e faça uma separação
Textos e formatação
A tag possui uma hierarquia decrescente. Ou seja, h1 é
o título maior, h2 é um texto menor, e assim por diante. 
Como você pôde ver, para utilizarmos essas tags, podemos
simplesmente inserí-la dentro de um elemento qualquer
(como o p)
A partir disso, apenas a palavra programador irá ser afetada
(pois apenas ela está envolvida pelo strong)
Textos e formatação
Temos mais algumas outras tags que podem nos ajudar a
fazer um texto mais elaborado, como o e o 
Esses dois são elementos para modificar a formatação do
nosso texto. Pense neles como o negrito e o itálico, quando
vamos escrever um documento
Veja o exemplo utilizando a tag 
Vimos, então, como funciona algumas elementos do HTML.
Há alguns elementos que possuem uma informação a mais
em sua composição: os atributos
Os atributos contém informações extra sobre o elemento
que não aparecerão no conteúdo. 
No exemplo acima, temos uma tag h1 (heading, ou título)
com o conteúdo “Bem vindo à Netflix”. O atributo “class” é
como um identificador. No caso, estamos identificando este
elemento com a classe “titulo”
Também temos alguns outros atributos. Por exemplo, o
atributo src. Lembra quando utilizamos ele mais acima?
Atributos
Atributo classe
Aqui, estamos utilizando uma tag para poder
representar uma imagem.
O atributo src significa “source” (origem, ou fonte). Ou seja,
precisamos saber qual a origem da nossa imagem. No
exemplo acima, o valor de src é ‘./imagem.png’
Atributo src
Atributos
Para aprendermos mais um atributo, vamos aprender uma
nova tag: input. Esta tag serve para que o usuário de uma
página consiga entrar com informações
Ela pode conter diversos atributos, como por exemplo o
atributo type. Ele especificará qual será o tipo de entrada do
usuário. 
Atributos
O último tipo de tag que vamos ver por agora é a tag .
Esta tag especifica um link em nossa página.
Sabe quando você se depara com uma página web dizendo
“clique no link abaixo”? O link que você clica é uma tag .
Para que você seja direcionado para outro site, é utilizado o
atributo href
O atributo href especifica que devemos ser redirecionados para
o site do google
Além de irmos para um site externo, também conseguimos fazer
um link redirecionar para o nosso próprio site. Como no
exemplo abaixo
Vamos fazer uma experiência para praticarmos os conteúdos
que aprendemos até agora
O objetivo é que você estruture uma página, do zero, para
que o resultado no navegador seja o seguinte:
Mão na massa!
O link para a imagem está no Notion do Magic Front. Você
pode acessá-lo em bit.ly/magicfront
Vou te mostrar nas próximas páginas como realizar esse
desafio. Mas lembre-se de tentar fazê-lo antes de olhar a
solução. Isso irá te ajudar a memorizar os conteúdos
http://bit.ly/magicfront
Então vamos lá: a primeira coisa que devemos fazer é a estrutura
básica do nosso HTML:
Mão na massa!
Aqui colocamos o título da nossa página e o body. Dentro do
body, iremos inserir uma tag de heading 1, para colocarmos
o título do nosso artigo
Logo abaixo, teremos a imagem que queremos colocar, que
no caso é a bandeira dos EUA. Lembre-se de colocar a
imagem dentro da pasta do seu arquivo index.html
Depois disso, vamos inserir o nosso subtítulo. Utilizamos um
h3, pois esse é um título com um tamanho razoável
Mão na massa!
Os dois detalhes que faltam na nossa página são o parágrafo,
e os destaques (de negrito e itálico)
Pra isso, vamos inserir a tag com o conteúdo do nosso
artigo, e vamos colocar as tags e para
destacar algumas palavras
E finalmente chegamos neste resultado! 
Quando um elemento está dentro de outro, falamos que este
elemento é “filho”. Ou seja, no exemplo acima. é o
elemento “pai” de e de .
Da mesma forma o é um elemento “pai” do .
Um elemento pai pode ter diversos filhos. Os elementos
filhos têm uma relação de “irmãos”.
Nesting
O termo acima se refere a quando colocamos elementos
dentro de outros. Como o HTML funciona como uma
hierarquia, podemos criar árvores com os elementos
 
Tags sem significado
Como vimos em diversos exemplos, a maioria das tags de texto
possui um significado
 significa heading (título)
 significa paragraph (parágrafo)
 significa image (imagem)
Porém temos algumas tags que não possuem um uso
específico. São as tags como e 
A tag é utilizada muitas vezes para fazer um agrupamento
de outras tags (nesting)
No exemplo acima, utilizamos a tag div para agrupar a
introdução do nosso texto (título e subtítulo) e o conteúdo
(parágrafos)
A tag também não tem um significado. Ela
representa apenas um texto genérico (não sendo
necessariamente um parágrafo, ou título)
Vamos ver um pouco sobre como podemos criar listas de
elementos. Já fizemos uma pequena lista no início do
capítulo. Para relembrar, a tag que cria uma lista é a 
O significado de ul é “unordered list” (lista desordenada).
Esta lista não precisa de uma ordenação específica dos itens
Seção 3: Listas
Listas ordenadas e não ordenadas
Cada item da lista pode ser representado por uma tag ,
que tem o significado “list item”. Veja que esta lista não
precisa de uma ordem específica
Eu poderia muito bem colocar o mousepad antes do teclado,
e não teríamos diferença
Por outro lado, podemos criar também listas ordenadas. Estas
listas possuem a característica de precisarem de uma ordem
específica
Utilizamos a tag para criar uma lista ordenada (ordered
list). Da mesma forma, utilizamos a tag li para os itens
Listas ordenadas e não ordenadas
Veja que agora, ao invés de termos bullet-points para a lista,
temos números, indicando que nossa lista possui uma ordem
Uma receita, conforme colocamos no exemplo, exige uma
ordem de execução. Por isso neste caso criamos uma ordered
list, ao invés de uma unordered list
Um fato super interessante das listas é conseguir criar uma lista
dentro de outras. Ou seja, você cria subelementos da uma lista
“pai”
Listas ordenadas e não ordenadas
Aqui estamos utilizando uma lista ordenada dentro de outra.
A lista mais interna possui o atributo type com o valor ‘i’. Isso
significa que a sua contagem será feita com algarismos
romanos 
Este é o primeiro projeto que vamos fazer para exercitar o
primeiro módulo de HTML. No próximo módulo iremos começar
a aprender sobre o CSS
Neste pequeno projeto, você poderá usar um template de html
que disponibilizei no Notion do Magic Front.
Mini-projeto 1
O objetivo deste projeto é fazermos esta página da Escola de
Inglês. Nas próximas páginas vou fazer este projeto passo a
passo com você, utilizando os conceitos que aprendemos
Além disso, também deixei um arquivo CSS que será usado para
modificar as fontes dos textos. Apenas insira ele na pasta do seu
projeto, junto com a imagem.
Escola de inglês
http://bit.ly/magicfront
A primeira coisa que vamos fazer é criar o nosso body, e uma
nova tag chamada . Esta tag especifica o cabeçalho do
nosso site
Inicialmente vamos colocar título da nossa página com um h1
Escola de inglês
O nosso header conterá três elementos:
O nosso título h1
A imagem da bandeira 
O subtítulo h3
Escola de inglês
Observe que utilizamos três atributos na imagem. O src é o
atributo que já conhecemos. É nele que inserimos o caminho
da imagem
Além disso, temos dois outros atributos:
alt: é uma descrição da nossa imagem
width: especifica a largura da nossa imagem
O atributo“width” é o primeiro contato que estamos tendo
com CSS. Ele especifica que nossa imagem vai ter um tamanho
específico
Escola de inglês
Após isso, vamos criar o conteúdo do nosso artigo
propriamente. Para isso, vamos utilizar a tag para fazer
um nesting do nosso conteúdo
Dentro dela, vamos inserir o nosso primeiro parágrafo:
O parágrafo contém o nosso texto, e colocamos ainda uma
palavra em negrito utilizando a tag 
Escola de inglês
Agora iremos criar a nossa lista ordenada, para colocarmos os
nossos itens. Ela inicialmente começará com apenas três itens
A última coisa que iremos fazer é inserir mais uma lista, dentro
do segundo item
Escola de inglês
Veja que esta última lista é uma lista sem ordenação, que
possui apenas duas dicas de listening de inglês
Vimos muitas coisas neste módulo de HTML. Logicamente
não vimos todas as tags, ou tudo que envolve HTML
Isso porque para podermos fazer um site “mais bonito” e
mais elaborado, precisaremos utilizar um pouco do CSS. Nas
próximas seções, iremos nos aprofundar em tags HTML
diferentes
Resumo de fim de módulo
Uma dica que dou para seu aprendizado: às vezes não vamos
entender um conceito completamente de primeira. Muitas
vezes vamos precisar de um conceito lá na frente, pra poder
entender algo “aqui atrás”
Isso porque o conhecimento se conecta. Então não se sinta
frustrado se não entender algo agora! Utilize meu instagram
@julio_code_ para tirar dúvidas, e vamos nessa
MÓDULO 2: 
CSS
Tudo o que nós colocamos dentro do style é estilização CSS.
Isto é chamado de CSS inline. O CSS então serve puramente
para nós podermos modificar as propriedades dos elementos
No exemplo abaixo, vemos que deixamos a cor do nosso
texto azul
Antes de começarmos com a teoria, vamos ver uma
utilização do CSS dentro do nosso próprio arquivo HTML
Em qualquer tag, nós podemos utilizar um atributo muito
importante: o style
Seção 1: Hello CSS
Introdução
Temos diversos tipos de propriedades de estilo:
color: modificar cor do texto
background-color: modificar a cor de fundo
font-size: modificar o tamanho da fonte
font-weight: modificar o peso da fonte (negrito)
Veja alguns exemplos abaixo:
Introdução
Observe agora como podemos utilizar um arquivo CSS
separadamente. Ou seja, não estamos mais utilizando CSS
inline, e sim um arquivo à parte
Vamos ver um exemplo prático de como os dois funcionam
em conjunto:
Utilizando um arquivo CSS
Vou te explicar passo a passo o que aconteceu aqui. Mas
você já deve começar a perceber como funciona a relação
entre o CSS e o HTML
Criamos um parágrafo com a classe “paragrafo”. Ou seja,
agora a nossa tag tem um identificador. Nós vamos usar
esse identificador no nosso arquivo CSS
Feito isso, no nosso arquivo CSS, selecionamos a classe
paragrafo com a sintaxe .paragrafo (ponto paragrafo), e
abrimos uma chave
A partir daí, tudo o que colocarmos dentro dessa chave irá
refletir em quem tiver a classe paragrafo
Como colocamos a propriedade “color” sendo “blue”, o nosso
texto ficou azul.
O CSS, então, é uma linguagem de estilo. Com ela, nós
podemos usar seletores (como a classe) para modificar o
estilo de um elemento HTML
Seletor
Propriedade
Valor
O seletor do CSS é uma maneira do arquivo “olhar” para o
HTML e conferir quem ele tem que modificar. No exemplo
acima, nós estamos utilizando o seletor de classe (que é o
ponto)
Utilizando um arquivo CSS
Antes de continuarmos, vamos aprender como nós podemos
relacionar o arquivo HTML com o arquivo CSS. Afinal, eles
não se comunicam automaticamente
Crie uma pasta para um projeto novo, que contenha dois
arquivos: um index.html, e um style.css
Linkando o CSS
Crie a estrutura básica do seu HTML. Dentro da tag meta, nós
teremos uma nova tag: 
A tag link serve para nós linkarmos algum arquivo externo.
No nosso caso, queremos relacionar o arquivo style.css. Nesse
caso, o atributo href vai ter o valor “style.css”
Já o atributo “rel”, indica pra nós qual a relação desse arquivo
(nesse caso é de “stylesheet”, ou folha de estilo”)
Agora com nosso CSS já linkado, nós podemos ver sobre os
seletores.
Temos diversos tipos de seletores no CSS. Podemos utilizá-los
com diferentes objetivos. Começando pela classe, que é o
nosso primeiro seletor, ela tem o objetivo de ser um seletor
reutilizável
Ou seja, vários elementos no seu HTML podem ter classes
iguais. Imagine que nós tenhamos um texto formado por
alguns elementos
Seletores - classe
Observe que os elementos que contém a classe “destaque”
são apenas o heading 1 () e o heading 3 ( tem a cor
vermelha, todos os parágrafos do texto serão alterados
Por isso, às vezes pode ser interessante usar as tags em
apenas alguns casos, ou em conjunto com as classes
Seletores - tags
De maneira semelhante às classes, nós podemos usar as tags
como seletores. Lembra das tags que estamos usando no
HTML? , , entre outras... Podemos utilizar elas como
seletores
Vamos exercitar um pouco os conceitos que aprendemos
sobre classes. Aqui, o nosso objetivo é aplicar conhecimentos
já aprendidos, mas também vamos ver algumas coisas novas
Mão na massa!
A primeira coisa a fazermos, então, é criar a nossa estrutura
básica. Aqui estamos apenas linkando nosso arquivo CSS e
criando um header
Antes de tudo, no nosso arquivo style.css, nós vamos usar um
seletor novo, que não utilizamos ainda. É o seletor * (asterisco)
Ele serve para selecionarmos todos os elementos da página:
h1, span, p, div... Todos sem exceção. Nós vamos modificar a
fonte do nosso texto
Mão na massa!
A propriedade font-family serve para nós alterarmos o tipo de
fonte que vamos utilizar. Neste caso, nós removemos a serifa
da fonte
Voltando para o nosso HTML, dentro do header, vamos criar
um heading 1. Vamos dar uma ênfase do itálico na palavra
programador
Logo abaixo, vamos colocar um subtítulo com o h3, e criar
uma div. Esta div conterá os nossos parágrafos
Mão na massa!
Vamos começar colocando algumas classes nos nossos
textos. Como observamos no resultado, temos que os dois
primeiros headings são azuis
Então vamos criar um classe que faça essa especificação:
Tendo a classe “texto-azul”, nós podemos manipulá-la no CSS
para que ela atenda a esse requisito de cor
No CSS, além de especificar o “font-family”, vamos criar mais
um estilo. Criamos o seletor .texto-azul, e especificamos que
a sua propriedade color será “blue”
Mão na massa!
Agora nós vamos passar para a parte dos parágrafos. Esses
três parágrafos estão todos dentro de uma divisão. Ou seja,
estão em nesting (um elemento dentro de outro)
Iremos usar nossa então para ser o elemento pai dos
nossos parágrafos
Podemos fazer uma observação aqui: a cor de fundo de todos
os parágrafos são iguais
Podemos concluir que existe uma propriedade background-
color (cor de fundo) na tag pai de todos os parágrafos (nesse
caso é a div)
Então podemos criar uma classe para essa tag, e determinar
qual vai ser o seu background-color
Mão na massa!
Utilizamos a cor bisque para que fique com esse tom. Além
da cor de fundo, você pode observar que a largura dos
parágrafos tem um limite
No caso acima, nós colocamos um limite de largura de 500
pixels
Para determinar esse limite, nós vamos criar a propriedade
width (largura) para a div de conteudo
Mão na massa!
A última coisa que nos precisamos atentar é quanto a cor do
últimoparágrafo. Para modificá-la, nós vamos colocar uma
classe neste parágrafo, e modificar sua cor
E assim ficou o nosso resultado! Ao longo das próximas
páginas nós vamos aprender a como melhorar esse estilo e
deixá-lo o mais semelhante possível ao sites modernos
Mão na massa!
O último tipo de seletor que vamos ver agora é o id. Este é
um tipo de seletor exclusivo. Diferente da classe, nós não
podemos ter dois elementos com ids iguais
O objetivo do id é justamente que ele seja específico. 
Seletores - id
Para usar o id no CSS, nós usamos o hash # (ou jogo da
velha). Por exemplo: se quisermos que o elemento com nosso
id único tenha a fonte em negrito, podemos usar:
Como você pôde ver, o CSS tem sua principal sintaxe com
seletores. Estes seletores tem o seu uso muito parecido: você
pode usar a classe (o mais comum), a tag ou o id para poder
criar os estilos da sua página
Na próxima seção, vamos ver como podemos encadear os
seletores. Por exemplo quando queremos aplicar um estilo a
uma tag com uma classe específica
Seção 2: Aprofundando
Encadeando seletores: sem separação
Imagine que você tenha a seguinte situação: você tem uma
página composta por parágrafos com a cor cinza. Porém você
deseja que os dois últimos parágrafos tenham a cor azul
Como você pode fazer isso?
Nós temos diversas maneiras no CSS para resolver esse problema.
Uma delas é colocando uma classe nos parágrafos que queremos
de outra cor
No nosso CSS, nós vamos utilizar uma técnica chamada
encadeamento. Para selecionar apenas tags com a classe
“destaque-azul”, nós iremos colocar o nome da tag seguida da
classe
“Tag p que contenha a classe destaque-azul”
Note que, quando vamos selecionar uma classe, usamos a mesma
sintaxe que aprendemos mais acima: 
.destaque-azul
Ponto Nome da classe
Se estivéssemos usando o seletor de id, iríamos fazer algo parecido,
porém utilizando a sintaxe do seletor de id
Encadeando seletores
Sem separação
O encadeamento de seletores pode ser feito utilizando algumas
técnicas. O primeiro que vamos ver é o encadeamento sem
separação (interseção)
Este encadeamento serve para quando queremos selecionar um
elemento que contenha classes ou ids específicos. Por exemplo:
Imagine que queremos selecionar uma tag com a classe
destaque-azul
“Elemento que tenha a classe1 e a classe2”
“Tag p que contenha o id destaque e a classe classe1”
Nesta primeira parte, vimos como encadear seletores em um único
elemento. Nessa sintaxe, não colocamos espaços nem vírgulas
entre os seletores
A seleção que fazemos pode ser chamada de interseção: quando
queremos selecionar elementos que contenham todas as classes
Encadeando seletores
Sem separação
Vamos ver mais alguns exemplos sobre como podemos encadear
seletores:
classe 1 classe 2
Interseção
Imagine que nós queremos que a tag p, que está dentro das duas
divs, tenha a cor azul. O CSS nos permite selecionar “um elemento
que está dentro do outro” com o seletor separado por espaço
Da mesma maneira que fizemos com a primeira encadeação, nós
podemos utilizar quaisquer tipos de seletores:
Encadeando seletores
Separados por espaços
O segundo tipo de encadeamento que vamos ver são os seletores
encadeados por espaços. Diferente do que vimos anteriormente,
este encadeamento se refere a um elemento que está dentro de
outro
Observe o exemplo abaixo. Nele temos três elementos:
Uma div, com classe “principal”
Uma div, com classe “conteudo”
Uma tag 
Da mesma forma que utilizamos o id no encadeamento
anterior, aqui também conseguimos utilizá-lo. Basta
utilizarmos a mesma sintaxe de id (utilizando a cerquilha #)
Observe alguns exemplos e seus significados:
“Tag p, que esteja dentro de um elemento com id conteudo”
“Tag span, que esteja dentro de um elemento com a classe
conteudo, que esteja dentro de uma tag header”
Agora vamos ver como podemos usar o encadeamento de
união
Encadeando seletores
Separados por espaços
O significado da seleção que fizemos logo acima é este:
tag 
 classe conteudo
 classe principal
Todas as tags e todas as tags terão a cor laranja. Além
das tags, também podemos utilizar as classes e os ids para fazer
nosso encadeamento
A sintaxe é a mesma: sempre separando por vírgulas
classe 1 classe 2
União:
classe 1 OU classe 2
Vamos supor que queremos colocar uma cor de fonte igual para
todos os parágrafos e para todos os headings
A sintaxe que utilizamos é: todos os elementos que queremos
selecionar separados por vírgulas
Encadeando seletores
Separados por vírgulas
O encadeamento por união é quando queremos selecionar
diversos elementos ao mesmo tempo. O esquema abaixo mostra
como funciona esse tipo de encadeamento
classe 1 classe 2
Interseção
tag 
 classe conteudo
 classe principal
tag tag 
União:
tag OU tag 
Encadeando seletores
Resumão
Interseção (sem espaços)
 União (separados por vírgulas)”
Elementos no interior (com espaço
Na próxima seção, vamos explorar como funciona o modelo
de caixas do CSS. Depois disso, vamos colocar em prática o
que aprendemos nas duas seções!
Seção 3: Modelo de caixas
Introdução
Vamos entrar agora em uma das partes mais importantes do
CSS. Até agora aprendemos apenas propriedades relativas a
cores e fontes: 
background-color
color
font-size
font-weight
Porém, mais importante do que isso, precisamos saber
posicionar nossos elementos na tela
A primeira coisa que precisamos aprender sobre o CSS é que
tudo o que compõe uma página são caixas
O que fiz aqui foi criar três textos, e colocar uma borda
vermelha para todos os elementos da página. 
Introdução
Ou seja: sempre que você criar um elemento no CSS, sempre
imagine que ele é apenas mais uma caixa. Isso é válido para
qualquer elemento: ,,, e até
mesmo a tag 
Lembra quando aprendemos sobre elementos “pai” e
elementos “filho”? Podemos visualizar isso muito bem com o
modelo de caixas
A caixa azul, maior, é a nossa tag body. Ela é uma tag “pai” de
todos os outros elementos.
A tag rosa é uma . Ela é pai de todos os elementos que
estão dentro dela (no caso são ). Já a tag div, em laranja, é
filha do body, apenas. A relação que ela tem com a tag 
(rosa) é de irmãos
Para podermos falar das caixas, precisamos falar de mais 3
propriedades importantes no CSS:
padding
margin
border
Para começar a falar sobre essas três, vamos entender
primeiramente, o que fizemos com essa linha de código
Border
Para que nós pudéssemos visualizar as caixas vermelhas nos
exemplos anteriores, inseri esta linha. O border é a
propriedade de borda. 
Aqui, o que estamos fazendo é colocar uma borda de 2
pixels, vermelha e sólida, em volta de todos os elementos.
Dessa maneira, conseguimos visualizar onde cada elemento
inicia, e onde acaba
A borda delimita, então, o espaço total de um elemento.
Ainda falando sobre este exemplo do texto, vamos imaginar o
seguinte:
Eu quero que o espaço entre os dois textos seja maior
Margin
Aumentar o espaço
É aí que nós podemos utilizar a propriedade margin. 
Essa propriedade nos fala exatamente sobre o espaço entre
dois elementos
margin: 10px margin: 30px
Voltando ao exemplo dos dois textos anteriores, nós
podemos utilizar a propriedade margin-bottom no primeiro
texto. 
A palavra “bottom” se refere a algo que está abaixo. Ou seja, a
margem debaixo
Margin
Se utilizarmos apenas a propriedade margin, ela se aplicará
para todos os lados
top (cima)
bottom (baixo)
right (direita)
left (esquerda)
Margin
100px
100px
100px
100px
O padding serve para casos onde você quer regular o seu
texto para não ocupar 100% do espaço do elemento
Veja a diferença de um texto com e sem padding:
A última propriedade relativa a distâncias é o padding. Você
irá notar que o padding e o margin são muito parecidos. A
diferença báscia entre os dois é que o padding é o espaço
interno de um elemento
Padding
padding:
espaço interno do texto 1
margin:
espaço externo do texto 1
padding: 0
padding: 30px
Assim como o margin,você também pode regular o padding
selecionando sua direção (top, bottom, right ou left)
Se quisermos, por exemplo alterar apenas o padding da
direita, nós utilizamos o padding-right
Padding
Veja que aqui, alteramos apenas uma das direções do
padding.
Resumão
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo
conteúdo conteúdo conteúdo 
border
padding
margin
Para resumirmos essas três propriedades: 
O border (em azul) delimita o tamanho do seu elemento.
Lembre-se que o border não é uma distância. É apenas
uma linha que mostra o tamanho do seu elemento
O padding é a distância interna do seu elemento
O margin é a distância externa do seu elemento
Para podermos fixar tudo o que aprendemos, vamos exercitar
os conteúdos de border, padding e margin. 
O objetivo deste “mão na massa” é transformarmos esta
interface abaixo, na interface mais abaixo
Mão na massa!
Podemos ver alguns elementos sendo destacados, outros
com um espaçamento maior, etc.
A primeira coisa que vamos fazer é criar nossa base no HTML.
O código base vai estar em nosso Notion
Módulo 2 -> Seção 3 -> Mão na massa
http://bit.ly/magicfront
A primeira coisa que vamos fazer é criar uma classe especial
para o nosso título. Ela se chamará “espaco”, e servirá para
adicionarmos o padding do título
Mão na massa!
No CSS, nós vamos fazer duas coisas para essa classe:
Adicionar um background-color
Adicionar um padding
Além disso, conforme sempre fazemos, insira a fonte sem
serifa em todo o documento
Como podemos observar em nossa lista, temos um pequeno
espaçamento entre cada elemento
Para isso, vamos utilizar um margin em cada 
Mão na massa!
Veja que o terceiro item da nossa lista tem uma importância
diferente dos outros itens. Ele possui um padding maior, e
uma borda azul
Para alterarmos o padding, nós podemos reutilizar a
classe espaco, que criamos para o título
Para a borda azul, vamos criar uma nova classe chamada
“importante”
Na classe “importante”, vamos colocar uma borda azul de 2px
Mão na massa!
Agora você deve notar uma coisa: todos os seus elementos
estão ocupando toda a página. Queremos que eles ocupem
apenas uma parte da largura da página
Para isso, vamos usar a propriedade width. 
Para o , a largura (width) vai ser de 500px
Para o , a largura vai ser de 350px
Parabéns! Creio que você conseguiu chegar no seguinte
resultado. Veja que nossas páginas estão ficando cada vez
mais elaboradas
Mão na massa!
Na próxima seção, nós vamos nos aprofundar em como as
caixas do CSS se comportam. 
Para que o body não ocupe o espaço total da página, usamos
o width para poder delimitar. Porém, nós podemos
configurar as caixas para que ocupem ou não a largura total
Isso nos dá a possibilidade de colocar caixas umas do lado
das outras. Fique ligado!
Seção 3: Tipos de caixas
Block e Inline
Agora já sabemos que tudo o que trabalhamos no CSS é uma
caixa. Com esse conhecimento, nós precisamos agora
entender como podemos posicionar as nossas “caixas” em
nosso site
Imagine o seguinte: você quer criar o site do seu portfólio.
Neste site, você quer que tenha uma barra de ferramentas
com alguns botões
Meu portfólio Sobre mim Projetos GitHub
Programador frontend, com
conhecimentos em HTML, CSS
e Javascript
Além dessas tencologias, possuo
conhecimento nos frameworks React e
Angular, e em versionamento com Git
Com os conhecimentos que temos, como conseguimos
deixar estes três botões lado a lado?
Sobre mim Projetos GitHub
Aprendemos apenas a deixar elementos um embaixo do
outro. Para conseguir atingir ao design acima, nós vamos
entender um pouco sobre como funciona o posicionamento
no CSS.
Block
Existem três tipos de caixas no CSS: 
block
inline
inline-block
A propriedade que determina esse “tipo” é a propriedade
display. Ou seja, no nosso código, nós podemos determinar o
display de uma caixa como sendo “block”, “inline” ou
“inline-block”
Mas o que isso significa?
Vamos começar com o display: block. Esta propriedade nos
diz que uma caixa vai ocupar toda a largura da nossa página.
Ela, por padrão, irá sempre criar um nova linha abaixo
Criei um elemento , e coloquei a sua propriedade
display como sendo block. Como você pode ver, a div
ocupou 100% da largura da página
Se colocarmos outra no código, você verá que ela irá
ocupar o espaço abaixo da primeira div. Isso porque o display
block sempre cria uma nova linha
Block
As tags HTML possuem uma configuração padrão da
propriedade display. Algumas tags já possuem o seu display
configurado como “block”, como por exemplo a 
Isso quer dizer que nós não precisamos inserir tal
propriedade na div. Vamos ver um exemplo:
Como vimos acima, cada div irá ocupar apenas o espaço
destinado a sua caixa. O conteúdo não se estende até o fim da
página na direita
Assim como a div é uma tag naturalmente display block,
podemos observar que a tag tem um display
naturalmente inline
Inline
A configuração “inline” do display nos diz exatamente o
contrário do “block”: quando criarmos um elemento com display
inline, ele irá ocupar o mínimo de espaço possível
Ou seja: se tivermos duas divs com display inline, é possível
colocá-las lado a lado, pois cada uma irá ocupar apenas o espaço
da sua caixa
Vamos ver em um exemplo:
Inline
Com esses conhecimentos, agora podemos fazer uma
pequena experiência. Vamos tentar recriar estes três botões
Sobre mim Projetos GitHub
A primeira coisa que vamos fazer é criar uma div para
agrupá-los. Cada um desses botões vai ser uma div diferente.
Por enquanto, não vamos usar a tag button
Vamos colocar uma
classe chamada “btn” em
cada uma das divs.
Dentro da classe, vamos
especificar o display
inline
Além do display inline, nós vamos modificar a fonte
para ficar mais parecida com a fonte acima
Inline
Ainda na classe btn, nós vamos especificar uma cor de fundo
para os botões. Antes nós estávamos apenas utilizando cores
escrevendo o nome delas
Porém, agora nós vamos utilizar um código de cor
hexadecimal. Na propriedade background-color, você vai
colocar o valor #398AD6. Este valor é a cor azul que estamos
utilizando
Além disso, a cor da fonte irá ser branca. Então também
teremos a propriedade color: white
Vemos que o nosso texto está muito “grudado” com a borda
do botão. Vamos adicionar um espaçamento interno
(padding) de 10px
Inline
Agora, precisamos fazer duas coisas: modificar a fonte da
letra, para deixá-la em negrito, e colocar a borda
arredondada dos botões
Para o negrito, nós vamos utilizar a propriedade font-weight.
Ela é a propriedade que utilizamos nos capítulos anteriores
para deixar nosso texto em destaque. O valor que vamos
utilizar é o bold
Para mudarmos a borda-arredondada, vamos utilizar a
propriedade border-radius. Essa propriedade tem a ver com
a nossa borda. Ela vai ditar o quanto de arredondamento
teremos em nosso border
Vamos colocar um border-radius de 10px
Inline
A última coisa agora é adicionarmos uma margem, pois os
botões estão muito colados na página e entre si
Vamos adicionar uma propriedade margin com 10px.
Lembre-se de que a margem é a distância externa dos
elementos
Ali embaixo, adicionei uma propriedade extra, cursor:
pointer. Essa propriedade serve apenas para deixar nosso
botão clicável quando passamos o mouse
E este é o nosso resultado!
Inline
O próximo tipo de display que vamos ver é o mais
importante de todos. O display flex é um dos mais
poderosos, pois pode tornar o seu conteúdo flexível (como
seu nome diz)
Ao invés de termos apenas um tipo de comportamento, ele
faz uma mescla, para que o elemento possa, ora ocupar um
espaço, ora ocupar outro
Fique ligado na próxima seção!
Seção 4: Flexbox
Display: flex
O flexbox é uma tecnologia particularmente nova no meio da
programaçãoweb. Ele revolucionou a tecnologia no quesito
de conseguir ser uma propriedade que adapta o seu design
ao longo da interação do usuário
A base do flexbox é o método de rearranjar os elementos em
linhas ou colunas. Esses elementos poderão se flexionar, isto
é, aumentar ou diminuir de tamanho
Vamos observar o exemplo abaixo:
Temos uma div principal, com a classe container, que
engloba todas as outras divs. Ela possui o display flex. Isso
nos diz que os elementos filhos desse container serão
flexíveis
Display: flex
Observe que, se adicionarmos mais um elemento, todas as
outras divs serão “achatadas” para que uma próxima div
caiba
Esse é o fundamento do flexbox: a capacidade que os
elementos têm de se achatar e expandir
É importante ressaltarmos a diferença entre o flex pai e os
flex filhos. No exemplo que fizemos, o flex pai é a div com a
classe container
A propriedade display:
flex sempre será
inserida no
componente pai.
Enquanto isso, os filhos
é quem serão
“flexionados”
Distribuindo elementos: horizontal
Como vimos no exemplo anterior, as nossas caixas estavam
ocupando 100% da largura da página. Isso aconteceu porque
colocamos a propriedade “flex: 1” nos filhos flex
Vamos remover essa propriedade, e vamos colocar a
propriedade “width: 900px” no elemento pai. Isso vai
determinar o tamanho total do nosso container
Além disso, nós vamos mudar o nosso HTML para um texto
diferente. Vamos usar os mesmos textos que utilizamos
anteriormente, no exemplo do portfólio
O que vamos ver agora é como o nosso flex se comporta
quando mudamos a propriedade “justify-content”. Essa é
uma propriedade inteligente para posicionar nossos
elementos
Se adicionarmos essa propriedade, com o valor “center” no
nosso flex container, veremos que nossos elementos irão
ficar centralizados
Distribuindo elementos: horizontal
Percebemos o seguinte: quando limitamos nossa div pai a
900px, e colocamos a propriedade justify-content: center,
nossos elementos filhos “grudaram” uns nos outros, e
procuraram a melhor forma de se centralizarem nos 900px
Ou seja, nossos elementos ficaram exatamente na metade
dos 900px
Por outro lado, nós podemos utilizar outro valor para o
justify-content, de forma que nossos elementos não fiquem
grudados uns nos outros:
No exemplo abaixo, nós configuramos a propriedade “justify-
content: space-between”. Ela tem a seguinte característica:
inserir um espaço igual entre todos os elementos filhos
Para visualizarmos isso melhor, eu inseri a propriedade
“border” no nosso elemento pai
Distribuindo elementos: horizontal
Veja só: se limitássemos nosso flex container a 300px de
largura, veja só como teríamos: 
Observe que a mesma coisa aconteceu: os itens foram
distribuídos de forma que houvesse um espaço igual entre
todos os itens
Uma observação importante é que, no space-between, há um
espaço apenas entre dois itens. Não há espaço entre o limite
do container e o primeiro item, por exemplo
Não há espaço aqui
Distribuindo elementos: horizontal
Para vermos o próximo exemplo de justify-content, vamos
fazer uma modificação: vamos remover a propriedade width
do nosso flex container
Dessa maneira, como nosso container é uma div, ele irá
ocupar 100% da largura da tela automaticamente
Com isso feito, os próximos justify-content que vamos ver
são o space-around e o space-evenly. Esses dois são
extremamente parecidos
Vamos ver como cada um se comporta:
space-evenly
space-around
Distribuindo elementos: horizontal
Como você pôde ver, o valor space-evenly divide os espaços
entre os elementos igualmente. E também possuímos um
espaço entre a borda inicial e o elemento inicial 
Já o space-around insere um espaço 2x maior entre os
elementos do que o espaço entre a borda e um elemento
Distribuindo elementos: horizontal
Agora que já aprendemos a realizar a distribuição de
elementos na horizontal, vamos aprender a fazer isso na
vertical
A distribuição vertical de elementos é, de uma certa maneira,
mais simples
Vamos pegar o nosso flex container, e dar a ele uma altura
maior. Para isso, no nosso flex container, vamos colocar a
propriedade height (altura) como sendo de 200px
Distribuindo elementos: vertical
Veja que todos os nossos elementos foram expandidos. Não
queremos que isso aconteça. O que queremos é conseguir
posicionar os nossos elementos
A primeira posição que podemos ver é a centralizada. Para
isso, nós vamos inserir a propriedade “align-items: center”
em nosso flex pai
Uma coisa interessante de se observar é que nosso
alinhamento horizontal continuou o mesmo. Nada mudou
sobre a distribuição dos elementos do justify-content
O que mudou com a inserção do align-items, é que agora
temos elementos organizados na vertical
Vamos fazer outro teste e alinhar de outro jeito. Vamos trocar
align-items: center por align-items: flex-end
Distribuindo elementos: vertical
Assim, você já pode imaginar que podemos também colocar
como sendo flex-start: 
Meu portfólio Sobre mim Projetos GitHub
Programador frontend, com
conhecimentos em HTML, CSS
e Javascript
Além dessas tencologias, possuo
conhecimento nos frameworks React e
Angular, e em versionamento com Git
Este mini projeto terá um tema especial: além de colocarmos
em prática o que fizemos, vamos também aprender como
funciona um agrupamento de containers
Mini projeto
Agrupamento de flex containers
Vamos fazer este projeto juntos nesta vídeo aula. Este link
está disponível apenas para os membros do Magic Front.
Todos os recursos para realizar os projetos estão no Notion
do Magic Front. Boa aula!
https://youtu.be/rCw11md6enU
http://bit.ly/magicfront
http://bit.ly/magicfront
https://youtu.be/rCw11md6enU
MÓDULO 3: 
JAVASCRIPT
Seção 1: Como funciona
Introdução
Para entender melhor como o JavaScript funciona, vamos
entender alguns dos principais recursos da linguagem. Alguns
recursos são comuns a todas as linguagens de programação,
então, se você dominar esses fundamentos, terá um bom norte
de como programar em outras linguagens tambem!
Vamos começar vendo como funcionam as variáveis 
Elas são como caixas que armazenam informações. Elas
armazenam os valores que você utilizará em seu código. Para
declarar uma variável, nós usarmos a palavra-chave let, seguida
do nome que você quer dar à variável:
Observe que não dei nenhum valor a essa variável. Isso significa
que ela está com o valor indefinido (undefined)
Para atribuírmos um valor à nossa variável, nós podemos utilizar
a atribuição, ou o símbolo de igual =
https://developer.mozilla.org/pt-BR/docs/Glossary/Variable
https://developer.mozilla.org/pt-BR/docs/Glossary/Variable
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/let
Introdução
Como colocamos o valor 12 à nossa variável, agora ela tem
esse valor. Depois de criarmos nossa variável e atribuirmos a
ela esse valor, nós podemos modificá-lo
Isso porque o Javascript não limita uma variável de ter o seu
valor modificado
O que antes tinha o valor 12, agora tem o valor 15
Veja que estamos igualando nossa variável a um valor
número. Um número é um tipo de dado no javascript.
Vamos ver os tipos que javascript possui agora
Execução
Antes de vermos os tipos, porém, nós vamos ver como nós
podemos executar um código em Javascript 
A nossa primeira alternativa é escolher um compilador
online, como por exemplo o programiz
Nele, nós conseguimos executar nossos códigos Javascript
direto do navegador. Além dele, nós podemos baixar o
NodeJS, que é um programa que também compila o nosso
código
Para baixar e usar o Node, é só acessar o site nodejs.org e
baixar a versão LTS. Depois de instalado, pesquise por
NodeJS no seu computador 
https://developer.mozilla.org/pt-BR/docs/Glossary/Variable
https://developer.mozilla.org/pt-BR/docs/Glossary/Variable
https://developer.mozilla.org/pt-BR/docs/Glossary/Variable
https://www.programiz.com/javascript/online-compiler/
Visualizar dados
No javascript, às vezes queremos ver o resultado das nossas
variáveis. Para fazer isso, vamos aprender rapidamentea
utilizar o “console.log()”
Imagine que você tem uma variável chamada numero, com o
valor 25
Para garantir que a variávels realmente tem um valor que
esperamos, podemos utilizar a função “console.log()” para
mostrar algo no terminal
Veja que, com esta linha, o nosso terminal irá nos mostrar
“25”. Isso pode ser feito com qualquer variável que tivermos 
Números
O principal tipo que utilizamos no Javascript é o número.
Podemos armazenar dois tipos diferentes de números nas
variáveis:
Números inteiros
Números com vírgulas
Assim como podemos declarar um número, nós podemos
modificar o valor de uma variável e fazer operações
matemáticas
Aqui nós já criamos nossa variável sendo uma soma de dois
números. Além disso, nós podemos somar duas variáveis
que sejam números
Seção 2: Tipos no JS
Além das operações matemáticas (soma, subtração,
multiplicação e divisão), nós podemos realizar operações
lógicas
Podemos comparar, por exemplo, se um número é maior do
que outro
Números
Nós temos também o tipo string. O tipo string é uma
sequência de caracteres entre aspas
Podemos ter qualquer tipo de caracter entre essas aspas
String
As strings servem para armazenarmos informações onde os
números não vão ser suficientes. Por exemplo, quando
precisamos armazenar:
Nome de um usuário
Senha de um usuário
Email
Nomes de ruas
Os colchetes especificam um valor do índice correspondente
à posição do valor que você deseja retornado
Uma vez que esses arrays estejam definidos, você pode
acessar cada um de seus valores através de sua localização
dentro do array
Por exemplo: se quisermos acessar o nome “Chris”, basta que
nós façamos a referência a meuNomeArray[0]. O zero
especifica a primeira posição do nosso Array
Um array é um tipo de dado lista. Ele contém valores
múltiplos inseridos entre colchetes e separados por
vírgulas. Imagine que nós tivéssemos, por exemplo, uma lista
de nomes e números:
Arrays
Com o if else, nós podemos aprender um novo tipo de dado:
o boolean. O tipo de dado boolean não armazena números
nem strings: 
Ele armazena um valor “verdadeiro” ou “falso”
Condicionais
Condicionais são estruturas de código usadas para tomadas
de decisão. Esse é um dos artefatos mais importantes do
Javascript
Quando vamos tomar uma decisão, precisamos decidir “Se
algo acontecer, então vou fazer isso”
Por outro lado, podemos falar “Se não, então vou fazer
aquilo”
No Javascript, ao invés de usarmos “Se”, nós utilizamos a
palavra if. E para o “Senão”, utilizamos o “else”
Seção 3: Estruturação
Condicionais
Veja só: nesta condicional, nós declaramos um valor
booleano com o valor true (verdadeiro). Um valor booleano
(veremos mais a frente) armazena apenas true ou false
(verdadeiro ou falso)
Observe que, na nossa condicional, nós checamos para ver se
gostoDeChocolate era true ou false
Nós também poderíamos fazer desta maneira
Como a variável gostoDeChocolate é true, concluímos que
no terminal irá aparecer “Sim!”, pois o nosso condicional if foi
satisfeito
Caso gostoDeChocolate fosse false, nosso terminal ia
aparecer “Não!”, pois quem iria estar satisfeito seria o else
O operador “==” serve para fazer uma comparação 
É como se perguntássemos: “gostoDeChocolate é true?”
Mão na massa!
Vamos fazer um simples exercício de verificação. 
A proposta é: queremos saber sobre a quantidade de horas de
sono que uma pessoa tem por dia
Para isso, vai nos ser fornecida a quantidade de horas de sono na
semana. Então, vamos considerar essa pessoa como sendo
saudável ou não
Para que possamos começar, definiremos a primeira variavel:
Aqui é declarada a variável HorasDeSonoSemana e é atribuído a
ela o valor de 40. Esta variável representa o total de horas de sono
que que essa pessoa tem em uma semana
Abaixo da horas de sono por semana, iremos declarar outra
variavel.
Aqui, outra variável chamada HorasDeSonoDia é declarada e
recebe o valor da divisão da variavel HorasDeSonoPorSemana por
7, o que basicamente calcula a média semanal de sono.
Mão na massa!
Agora iremos começar a dar as intruções para o compilador
para que ele possa, enfim, operar as variaveis
Para começarmos, vamos colocar a condição IF. O IF sera
utilizado para verificar quantas horas a pessoa dorme por
dia
Nesse caso, para que a condição seja atendida, a variável
HorasDeSonoDia deve ser maior ou igual a 8.
Abaixo dessa linha, iremos colocar a mensagem que
queremos que seja exibida caso a condição seja atendida
Para fazer isto iremos utilizar console.log para exibir a
mensagem “É saudavel”.
Mão na massa!
Agora, iremos instruir o compilador a como prosseguir no
caso de que a condição estabelecida não seja atendida
Para isso, utilizaremos a condição else logo após do colchete
ultilizado para encerrar a primeira parte da condição.
Em seguida, iremos abrir um novo colchete para que
possamos instruir o compilador sobre o que fazer quando a
condição não for correspondida:
Assim como fizemos para definir as instruções de caso a
condição seja atendida, iremos utilizar o console.log para que
seja exibida a mensagem “precisa melhorar” no caso da
mensagem não ser correspondida
E por fim, voce deve encerrar seu codigo com um colchete.
Seu codigo deve se parecer com o seguinte agora:
Mão na massa!
Agora você poderá compilar o codigo
O resultado foi “você precisa melhorar”. isso porque 40
dividido por 7 resulta em aproximadamente 6, o que é menor
que 8
Faça o teste colocando, por exemplo, o valor 65 como sendo
o HorasDeSonoSemana. Você observará que agora cairemos
na primeira condição “É saudável”
O comentário serve justamente para você comentar algo no
seu código, sem que isso tenha qualquer efeito no código
Não é uma linha semântica
Comentários são trechos de texto que podem ser adicionados
junto com o código. Você pode escrever comentários em
JavaScript da mesma forma que em CSS:
Comentários
Funções
Funções são uma forma de empacotar a funcionalidade que
você deseja reutilizar
Imagine por exemplo que você escreveu um código para
multiplicar dois valores, e depois somar o número 2
Toda vez que nós precisássemos fazer este processo,
precisaríamos copiar e colar o código de novo
Mas e se nós pudéssemos replicar esse código?
Aqui nós fizemos exatamente isso: criamos uma função
chamada multiplicarSomar(), e colocamos para ela dois
parâmetros
Parâmetros são entradas da sua função
Se nós quiséssemos por exemplo, executar esse algoritmo
com os números 2 e 3, poderíamos chamar nossa função
colocando 2 e 3 como parâmetros
Ou seja: para chamarmos uma função, basta que nós
utilizemos a sintaxe acima
2 e 3 são os parâmetros que passamos para a função. Nesse
caso, numeroA irá assumir o valor 2, e numeroB irá assumir o
valor 3
Funções
Mas e o return?
O return serve para que nos seja dado alguma coisa dessa
função. Se nós só executarmos essa função, chamando
multiplicarSomar(2, 3), você não verá nada no seu terminal
(ou console)
Lembre-se que, para vermos algo no terminal, precisamos
dar um console.log(), e colocar a informação dentro
Quando chamamos a função, ela é executada, e retorna o
valor do nosso resultado. Este resultado é armazenado na
nossa “variavel”
Depois disso, nós damos um console.log na nossa variavel.
Ou seja: nós só obtivemos o valor final que foi retornado pelo
return
Funções
O objetivo de uma função vai ser retornar um valor para nós
Vamos criar agora mais uma função:
Agora o objetivo da função é criarmos um nome com duas
strings
Algo que não mencionamos anteriormente é que nós
podemos somar duas strings. O resultado será uma string
contendo os dois primeiros textos
Quando chamamos a função, precisamos passar os
parâmetros dela (o primeiro nome e o segundo nome)
Funções
Conforme vimos anteriormente, este código não vai colocar
nada pra gente no console
Precisamos dar um console.log no que a função retornar.
Porém, nós vamos fazer diferente:
Vamos dar um console.log direto na chamada da função
Por padrão, no Javascript, para todos os tipos, nós temos
alguns métodos
Os métodos sãonada mais do que funções que fazem algum
processo com a nossa variável
Por exemplo: imagine que você tem um array de vários
nomes
Nós podemos utilizar um método do array, para percorrer
todos os itens: o método map. Para chamar um método, nós
utilizamos a notação PONTO + NOME DO MÉTODO
Da mesma forma que nossas arrays possuem métodos, as
strings e os números também possuem
Seção 4: Métodos e propriedades
Alguns métodos
O que estamos fazendo ali é:
Declaramos um número com 4 casas decimais
Chamamos o método toFixed(), passando o parâmetro 2
O método toFixed() vai pegar o nosso número, e limitá-lo à
quantidade de casas decimais que nós passarmos como
parâmetro
Neste caso, como o parâmetro que passamos foi dois, a
função toFixed nos retornou o valor 1.12. Colocamos tudo isso
dentro de um console.log
Para os números, nós também temos alguns métodos
(funções), como por exemplo o método toFixed()
Outro método dos números que podemos utilizar é o
toString(). Pelo nome do método, você já deve imaginar o
que ele faz
Alguns métodos
A variável numeroString agora se trata de uma string com o
valor 404 dentro
Alguns métodos
O último método que vamos ver por agora é um método das
strings. Nós podemos querer saber se uma string contém
um certo valor
Por exemplo: precisamos saber se a variável
“nomeCompleto” contém a string “Silva”
O método “includes” é um método das strings que nos
retorna um valor booleano
Ou seja: se a string contém o valor que passamos como
parâmetro, então irá nos retornar true
Caso contrário, irá nos retornar false
Os objetos são estruturas um pouco mais complexas no
nosso código. Vamos ver sua base, e como podemos chamar
um objeto
Por mais que seja um assunto novo, nós já trabalhamos com
objetos no nosso código
Introdução
Seção 4: Objetos
Quando nós damos este comando acima, nós estamos
acessando um método de dentro do objeto console
Um objeto é nada mais que uma estrutura chave-valor
Veja que temos o nosso objeto “pessoa” e dentro dele temos
duas chaves-valores: nome e idade
O valor de nome é Marcelo e o valor de idade é 30
Da mesma maneira, nosso console também é um objeto. A
única diferença é que ele não armazena apenas chaves
como nome
Ele também armazena funções
Introdução
Se você observar acima, teremos uma chave chamada log.
Ela é uma chave que tem uma função como valor. No
exemplo acima, nós estamos declarando uma função com o
método arrow function
Podemos fazer algo semelhante em nosso código. Vamos
declarar um objeto chamado cachorro
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Se nós chamarmos a função latir, que está dentro do
cachorro, nós iremos ter no console a palavra “Au”, pois
acessamos a função de dentro do objeto
Introdução
Conclusão
Vimos como funciona um objeto. Iremos detalhar mais o que
podemos fazer com ele no módulo de React. Fique ligado!
MÓDULO 4: 
REACT
Vamos entender agora o que é o React e pra que ele serve. O
React é uma biblioteca do Javascript para a construção de
interfaces
Uma biblioteca Javascript é nada mais que uma coleção de
códigos pré-escritos que são desenvolvidos para tornar o
desenvolvimento mais fácil 
Uma das principais vantagens do React é a criação de
componentes
Seção 1: O que é React?
Introdução
Sobre mim
Quando nós criamos o botão acima utilizando HTML e CSS,
nós criamos todo o código do botão do zero
Se nós tivéssemos que usar esse mesmo botão em outra
página do nosso site, nós teríamos que copiar a colar todo o
botão novamente
Com o React não
No React, nós conseguimos criar um componente com o
nome que quisermos. Vamos chamá-lo de “BotaoAzul”
A partir do momento que criamos o nosso botão, podemos
reutilizá-lo simplesmente escrevendo como se
fosse uma tag HTML
Esse é o mais poderoso de todos: você cria novas tags, e as
usa como se fossem tags HTML
Introdução
Configuração
Para podermos configurar o React, primeiro nós
precisaremos instalar o Node. No módulo de Javascript, já
vimos algo similar. Porém vou mostrar novamente como
instalamos o Node
Você irá acessar o site nodejs.org e irá instalar a versão
escrita LTS
A versão que você instalar pode ser que esteja mais
atualizada. Porém sempre baixe a da esquerda
http://nodejs.org/
node-v20.10.0-x64.msi
Open file
Você irá abrir o arquivo baixado, e irá seguir com a instalação
Configuração
Depois de instalado, você pode conferir se foi realmente
instalado pelo terminal. Entre na barra de pesquisa do
windows e pesquise “CMD”
Clique na opção acima Command Prompt, ou “Prompt de
comando”. No terminal, digite o comando “node -v” e aperte
Enter
Se você está vendo uma versão, quer dizer que deu certo
Faça a mesma coisa para o comando “npm -v”, e aperte
enter. Se você ver uma versão no terminal, quer dizer que
deu certo
Para criar um novo projeto React, nós vamos ter que criar
uma nova pasta. Crie uma pasta chamada “react-magic-
front”
Configuração
Depois, entre no Visual Studio
Code, e abra esta pasta que
acabamos de criar. Vá em
Arquivo, e depois em Abrir
Pasta
Selecione a pasta que acabamos de criar
Agora, nós vamos precisar abrir o terminal no Visual Studio
Code. Para isso, vá nesses três pontinhos -> Terminal -> Novo
Terminal
Configuração
Com o terminal aberto, vamos criar o nosso projeto em React
usando a seguinte linha:
npm create vite@latest meu-app -- --template react
O terminal provavelmente vai mostrar a seguinte mensagem
a você
Basta que você pressione a tecla “y” e aperte Enter. Agora
basta esperar o download concluir
Para começar a rodar o seu projeto, digite as seguintes linhas
de código (e pressione Enter depois de concluir cada uma):
Configuração
cd meu-app
npm install
npm run dev
Entra na pasta que você criou do projeto
Instala todos os pacotes necessários
Roda o seu projeto localmente
Se todos os passos foram executados corretamente, agora
nós podemos abrir o projeto no nosso browser. Se você
observar no terminal, temos algo parecido com isso:
Acesse o primeiro link do terminal, onde está escrito Local:
localhost. O número que está após o localhost pode mudar.
Coloque no seu navegador o que estiver aparecendo para
você. No meu caso é localhost:5173
Parabéns! Você criou a sua primeira aplicação em React.
Agora nós vamos ver como nós podemos começar a criar
nossos sites
Configuração
Seção 2: Mexendo no projeto
Estrutura de pastas
Vamos entender um pouco como podemos mexer no nosso
projeto. Se você clicar na pasta “meu-app” (que é a pasta do
nosso projeto) você vai visualizar todos os arquivos e pastas
A pasta mais importante para nós nesse momento é a pasta
“src”, ou source. O principal arquivo que vamos olhar dentro
dessa pasta é o App.jsx
A extensão jsx do arquivo quer dizer que esse é um arquivo
React. Mas, no final das contas, esse é um arquivo Javascript
Estrutura de pastas
Se você entrar no arquivo App.jsx, você verá que temos um
pouco de código em Javascript e um pouco de código HTML.
Javascript 
(função)
HTML
Vamos ver mais a fundo como funciona o fluxo do React.
Mas, por ora, entendemos que a função App acima é a que
renderiza todo o nosso site
Quaisquer outras páginas ou componentes que tivermos,
vamos inseri-lo dentro da nossa função principal App (que
está no arquivo App.jsx).
Componentes
Um programa em React pode ter diversos componentes
reutilizáveis. Poderíamos, por exemplo, criar o nosso header,
e chamá-lo de tag 
A partir de então, poderíamos reutilizar todo o nosso código
do Header, apenas chamando a tag
 
Mas como podemos criar os nossos componentes? Bom,
como vimos para o nosso App, os componentes são
simplesmente funções
Conforme vimos no capítulo de javascript, existem funções
que retornam valores. Um componente é nada mais do que
uma função que retorna elementos HTML
Componentes
Vamos observar no exemplo abaixo, como poderíamos criar
um componente
Olhando este código pela primeira vez, temos a impressão de
umagrande mistura de tecnologias. Vamos detalhar um
pouco mais:
HTML puro
Retorno da função
Se quiséssemos, nós poderíamos fazer com que o retorno
dessa função tivesse parênteses, e nós iríamos colocar todo
o nosso código entre parêteses
Componentes
Se nós fizéssemos isso, no nosso arquivo App.jsx, e
colocássemos a nossa BoasVindas dentro da função App, nós
teríamos o seguinte resultado:
Componentes
Para poder fazer isso, nós teríamos que apagar o que já
existe na função App()
Apagar
Agora vamos substituir tudo isso pelo nosso componente de
Boas Vindas
Componentes
Essa foi nossa primeira experiência reutilizando
componentes. Veja que tudo o que colocamos dentro da
nossa função App principal é o que reflete na tela
No exemplo anterior, nós apagamos tudo o que estava sendo
retornado na função App, e substituimos pelo nosso
componente
Agora nós vamos ver como podemos criar componentes
externos. Isto é: criar componentes em outros arquivos.
Clique com o botão direito do mouse na pasta “src” e clique
em “Nova Pasta”
Componentes
Depois, você irá criar uma pasta chamada “componentes”.
Dentro da pasta componentes, clique com o botão direito do
mouse e crie outra pasta chamada “botao”, e, dentro dela,
um arquivo chamado index.jsx
Agora, nós vamos fazer nosso primeiro componente externo
no React. Neste arquivo, nós vamos criar a função “Botao”.
Nela, vamos retornar um botão simples
Só que, para podermos utilizar este botão no nosso arquivo
App.jsx, nós precisamos exportar esse botão. Se não
exportarmos, ele não ficará visível no projeto
Componentes
Para importar algum componente, nós utilizamos a sintaxe
“import Componente from ‘./caminho’
Agora que nós temos nosso botão importado, nós podemos
inseri-lo dentro da nossa função App()
O resultado será este:
Componentes
Como você pode observar, nossos elementos estão
incrivelmente bonitos, sem precisarmos estilizá-los. Isto
porque, quando criamos o projeto, já foram gerados alguns
arquivos CSS para nós
Por enquanto, nós podemos aproveitar estes arquivos para
os nossos projetos, enquanto aprendemos a teoria
Porém, quando passarmos para a parte prática, nós iremos
excluir a maior parte desses estilos e fazer os nossos próprios
Na próxima seção, nós vamos ver sobre como podemos
renderizar elementos Javascript junto com elementos HTML
Fique ligado!
Seção 3: Renderizando JS
Introdução
Como vimos anteriormente, o React é uma pura mistura de
JavaScript com HTML. Sendo assim, diferente do HTML, nós
podemos inserir variáveis Javascript no meio do nosso código
HTML
O resultado que teremos na tela será este: 
Ou seja: isto nos abre uma possibilidade muito grande de
poder fazer interações muito mais simples com o nosso site
Renderizando listas
Vamos relemebrar um pouco do Javascript: tínhamos a
estrutura Array, que era para nós uma lista de itens
Em uma array, nós temos diversos métodos que podemos
usar. Uma delas é o map. A função map nos permite
percorrer por todos os elementos de uma array
É como se tivéssemos um loop, e em cada ciclo, a variável
item terá o valor de um item do array (Maçã, Banana e depois
Pêra)
Renderizando listas
No React, podemos utilizar deste artefato para renderizar
lista de itens. Assim como nós abrimos chaves dentro do
nosso HTML, e usamos uma variável, vamos fazer a mesma
coisa com o método map
Este código parece meio confuso de início. Se observarmos
bem, temos uma estrutura parecida com essa
Código JS (function Lista)
Código HTML ( )
Código JS (lista.map)
Código HTML ( )
Primeiro percorremos todos os itens com o map1.
A cada item, nós vamos retornar uma tag , com
este item dentro
2.
Renderizando listas
Vamos fazer isto de uma maneira diferente para podermos
entender realmente: vamos criar um array com uma lista
literal de itens
O resultado será exatamente o mesmo. Veja que estamos
colocando tags HTML diretamente dentro de um array
Isso é uma coisa inimaginável de se fazer em um arquivo
puramente HTML. Mas conseguimos fazer isso livremente no
React
Renderização condicional
Assim como podemos colocar listas no HTML, nós podemos
também colocar condicionais
Às vezes nós só queremos renderizar um elemento se uma
condição for satisfeita
Aqui, nós estamos utilizando o operador ternário para fazer
esta condição. A variável podeRenderizar está sendo
condicionada. Se ela for verdadeira, renderizamos “lista”
Caso contrário, se o podeRenderizar for false, nós vamos
renderizar apenas uma tag vazia ()
Compartilhando informações
Agora, nós vamos entrar em um assunto muito importante
para o React. Imagine que temos um componente lista, que
queremos reutilizar durante todo o código
Uma lista é um elemento , com vários elementos 
dentro. Mas, como fizemos no caso anterior, não queremos
renderizar os mesmos elementos sempre
Não vamos querer sempre renderizar uma lista de frutas
Ou seja: precisamos dizer a esse componente o que ele deve
renderizar (ou quais itens)
Vamos criar nossa função lista, e, como parâmetro da função,
vamos passar a palavra “props”
A partir disso, qualquer propriedade que chamarmos dentro
de props, se tornará um atributo
No exemplo acima, itens se tornará um atributo no
componente Lista
Compartilhando informações
Lembra dos atributos HTML? No HTML nós tínhamos
atributos para as tags
 tinha o atributo src
 tinha o atributo href
Todas as tags tinham o atributo class
Agora que criamos nossa lista com o props.itens, podemos
chamar itens como sendo um atributo
Compartilhando informações
No HTML, tínhamos o atributo style. Ele permitia que nós
inseríssemos CSS inline nos nossos elementos
Podemos transformar qualquer propriedade CSS em um
atributo
Aqui, nós criamos um objeto buttonStyle, que vai armazenar
todo o estilo do nosso botão (CSS inline)
Colocamos o valor de color como sendo props.color. Ou seja:
color virou um atributo do nosso Botão
Compartilhando informações
Inserimos nosso botão dentro do App, e colocamos o atributo
“color” como sendo yellow.
O atributo será passado ao nosso componente. Se
quisermos, agora podemos utilizar este componente 
e passar qualquer cor para ele 
Isto seria útil, por exemplo, se quiséssemos criar um botão
com nosso estilo, e, quando formos replicá-lo, quiséssemos
mudar apenas a cor do texto
MÓDULO 5: 
CURRÍCULO E LINKEDIN
Esta provavelmente é uma das seções mais importantes
deste ebook. Afinal, tudo o que aprendemos até agora será
usado como ferramenta para divulgarmos nosso perfil (nosso
currículo)
Para começarmos este módulo, temos que imaginar como
funciona o processo de recrutamento de uma empresa
Introdução
Seção 1: Como montar um currículo
Temos, em todas as instituições,
um departamento de RH que
está sempre de olho em novos
candidatos e atendendo à
necessidade da empresa. Muitas
vezes, esse “departamento” pode
ser que seja apenas uma pessoa
O que muitas pessoas não imaginam é que essa pessoa
analisa diversos currículos de uma vez
Ou seja, nosso currículo deve ser claro e objetivo: direto ao
ponto. O recrutador irá analisar o seu currículo de forma
rápida. Então ele precisa achar todas as suas informações
de forma clara
Pensando em todas as coisas, precisamos refletir em como
podemos tornar o nosso currículo objetivo. Para tal objetivo,
nós precisamos analisar a estrutura básica de um currículo
Introdução
Informações básicas
Introdução
Experiências profissionais
Formação
Skills
Primeiramente, vamos ter suas informações básicas. Esta é a
parte mais tranquila. As principais informações que vamos
ter ali é:
Nome completo
Telefone
Email
Endereço (Apenas cidade e estado)
Links do Github e Linkedin
Por que é importante colocar Linkedin e Github?
Introdução
O recrutador irá observar duas coisas principais com essas
duas redes: o seu portfólio de projetos e as suas experiências
prévias no Linkedin
Hoje em dia, o Linkedin é amplamente utilizado por
empresas de todo o mundo. É lá que o recrutador irá ter uma
prévia de quem você é profissionalmente