Front-End Do Zero
Front-End Do Zero
do zero
@iuricode
Índice
Capítulo 1 - HTML Fundamentos
1.1 O que é HTML?
1.2 Iniciando
1.3 Sintaxe
1.4 Estrutura de uma página HTML
1.5 Indentação adequada
1.6 Tags
4.1 Geral
4.2 HTML
4.3 CSS
4.4 JavaScript
4.5 Prática
Esse e-book tem como objetivo principal apresentar e
ensinar o básico da área front-end de uma maneira
completa e acessível para todos.
HTML Fundamentos
O que é HTML?
HTML, ou Hypertext Markup Language é uma linguagem
de marcação (não de programação) da web - cada vez que
você carrega uma página da web, você está carregando
um código HTML. Pense em HTML como o esqueleto de
uma página da web, ele é responsável pelos textos, links,
listas e imagens - ele oferece conteúdos (enquanto
javascript fornece comportamento dinâmicos e o css
estilos).
Iniciando
HTML é escrito em arquivos .html. Para criar uma página
HTML é fácil, entre em seu editor de código e salva em
arquivo em branco como meu-site.html (você pode nomeá-
lo como quiser).
Sintaxe
Os elementos HTML são escritos usando tags. Todas as
tags tem uma chave de abertura e fechamento (por
exemplo, <tag>) e uma tag de fechamento que tem uma
barra após o primeiro colchete (por exemplo, </tag>).
<tag>
iuricode
</tag>
<p>
Um programador sem café é um poeta sem poesia.
</p>
<pai>
<filho>
Esta tag está dentro de outra tag também
conhecida como a tag pai.
</filho>
</pai>
Estrutura de uma página HTML
A estrutura inicial do seu html é essa:
Indentação adequada
As quebras de linha entre suas tags são super importante
para escrever um bom código HTML.
Tags de títulos
tamanho 24 pontos
tamanho 18 pontos
tamanho 14 pontos
tamanho 12 pontos
tamanho 10 pontos
tamanho 8 pontos
Tags para texto
<p><span>Um texto</span></p>
<b>Texto em Negrito</b>
<i>Texto em Itálico</i>
Tags de imagem
Vamos colocar uma imagem no seu site?
É bem simples colocar uma imagem no HTML. Vejamos:
<img src="nomeDoArquivo.formato">
Tags de lista
Vamos falar agora um pouco sobre as listas (ordenadas e
desordenadas) e como elas funcionam no HTML. As listas
são muito importantes quando queremos listar alguns
itens no site e também para a criação de menu de
navegação.
Listas ordenadas.
Listas desordenadas.
Listas ordenadas
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>front-end</li>
</ol>
<ol type="a">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>front-end</li>
</ol>
a. html
b. css
c. javascript
d. front-end
I. html
II. css
III. javascript
IV. front-end
Listas desordenadas
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>front-end</li>
</ul>
Aparecerá assim no site:
html
css
javascript
front-end
Elemento Form
<form action="/pagina-processa-dados-do-form"
method="post">
</form>
Todos os seus atributos são opcionais, mas é considerada a
melhor prática sempre definir pelo menos o atributo action
e o atributo method.
Algumas observações:
Elemento Button
<div class="button">
<button type="submit">Enviar sua
mensagem</button>
</div>
Algumas observações:
<form action="/pagina-processa-dados-do-form"
method="post">
<div>
<label for="nome">Nome:</label>
<input type="text" id="nome" />
</div>
<div>
<label for="email">E-mail:</label>
<input type="email" id="email" />
</div>
<div>
<label for="msg">Mensagem:</label>
<textarea id="msg"></textarea>
</div>
<div class="button">
<button type="submit">Enviar sua
mensagem</button>
</div>
</form>
Última observação
Exemplo:
<div id="footer">
não seria melhor:
<footer>
O que é JavaScript?
JavaScript é uma linguagem de programação que permite
a você implementar itens complexos em páginas web.
Toda vez que uma página da web faz mais do que
simplesmente mostrar a você informações estáticas,
mostrando conteúdo que se atualiza em um intervalo de
tempo, mapas interativos ou gráficos 2D/3D animados, etc.
Você pode apostar que o JavaScript provavelmente está
envolvido.
Iniciando
Vamos por etapas.
<script src="./script.js"></script>
</body>
</html>
Comentários em JavaScript
Variáveis
Case sensitivo
Evitam repetições
var quantidade = 5;
var valor = 20;
var total = quantidade * valor; // Nesse caso retornar 5 *
20 que é : 100;
Boolean
Operadores Lógicos
Condicionais if e else
Funções
Funções são blocos de códigos fundamentais em
JavaScript. Uma função é um procedimento de JavaScript,
um conjunto de instruções que executa uma tarefa ou
calcula um valor.
Parâmetros e Argumentos
var eu = {
nome: 'andrew',
idade: 18,
time:'vasco',
}
console.log(eu) // { nome: "andrew", idade: 18, time =
"vasco"}
console.log(eu.nome) // andrew
eu.nome = 'heitor';
var quadrado = {
lados:4,
area: function(lado){
return lado + lado
},
};
console.log(quadrado.lados); // 4
console.log(quadrado.area(4)); // soma 4 + 4 e retorna
o 8.
times[0] // barcelona;
times[1] // manchester united;
times[2] // Milan;
times.pop();
console.log(times) // (3) ["barcelona", "manchester
united", "Milan"] removeu o último valor que era o
vasco.
Loops
Um loop faz algo repetidamente até que uma condição
seja atendida. Um loop possui 1 ou mais itens dos seguintes
itens. O contador, é inicializado com um determinado valor.
Este é o ponto inicial do loop. A condição de saída, que é o
critério no qual o loop para, geralmente o contador atinge
um certo valor. Um iterador, que geralmente incrementa o
contador em uma pequena quantidade a cada loop,
sucessivamente, até atingir a condição de saída.
for(var i = 1; i < 10;i++){
console.log(i);
}
Escopo
function ola(name){
// isso é um escopo
}
Escopo de Bloco
if(true){
var nome = 'andrew';
}
console.log(nome) // andrew
IMPORTANTE: Chaves {} criam um escopo de bloco, não
confundir com a criação de objetos = {}.
if(true){
`const` nome = 'andrew';
}
console.log(nome) // error: nome is not defined
Const
O que é CSS?
CSS ou folhas de estilo em cascata é a linguagens de
marcação (não de programação) responsável por adicionar
estilos nos sistema web, como cores, tamanhos,
posicionamentos. Sem ele, os sites são apenas um monte
de texto e links, html acaba virando um Markdown.
h1 {
color: #00f;
font-size: 25px;
}
body {
...
}
Os navegadores por padrão processam as páginas na cor
branca e textos na cor escura, primeiramente dentro do
body mesmo iremos realizar alterações no padrão de cor de
fundo.
body {
background color: #4169E1;
}
body {
background color: #5d665b;
color: #5d665b;
}
body {
background color: #5d665b;
color: #5d665b;
margin: 50px;
}
Class e ID
<h1 id = "souID">
Chamando no CSS
.souClass {
color: # f00;
}
#souID principal {
color: # f00;
}
E qual usar?
Agora te bateu uma dúvida né? Se os dois fazem a mesma
coisa, qual devo usar?
A resposta é simples, se você tem vários elementos (no
nosso caso é o <p>) e queira usar de cor de texto vermelha
em algumas, nesse caso usamos a Class, pense a Class em
uma união em comum. Vou dar um exemplo que meu
professor disse na faculdade, todos nós tem uma Class em
como, que no caso é humano porém, todos nós temos um
ID, que no caso é o RG. Então caso queira mudar somente
em um elementos, usamos o ID.
Bônus
Aqui vou dizer dois padrões que eu uso sempre no começo
do meu CSS, o primeiro é o uso da fonte e o segundo é o
reset nos padrões dos navegadores.
Fontes
Para colocar fonte no seu site é preciso chamar ele no seu
CSS (ou no HTML), para isso vamos entrar no site do Google
Fonts. Logo em seguida, procure uma fonte que você
deseja e clique no botões "Select this style" para assim
adicionar os estilos que você deseja (perceba que quando
você selecionar uma vai abrir uma aba na lateral direita).
Nessa aba vai ter duas opções para colocar no seu site, um
é o <link> e o outro @import. O link é para importar no seu
HTML e o import é para o seu CSS, agora você me pergunta
qual eu devo usar?, você pode escolher qualquer um, isso
vai com seu gosto. Como para mim a fonte é um estilo,
então eu sempre importo ele para meu CSS.
Logo depois de importar precisamos falar para nossa
página que queremos aquela fonte em nossos textos e
como fazer isso? É bem simples!
*{
font-family: 'Nome da sua fonte aqui';
}
Reset
Agora vamos resetar os navegadores, mas espera, o quer
isso quer dizer? Quer dizer que os navegadores tem um
padrão deles, e alguns desses padrões não são legais, então
vamos tirar alguns deles (três para falar a verdade)!
Primeiro vamos zerar os espaçamentos das nossas páginas.
Quando criamos um HTML, por padrão, nosso site tem um
espaçamentos e quando criamos algo, nossos estilos não
fica da forma que queremos, eles acabam sempre tento
um espaço em volta dele. Para tirar esse padrão usamos
duas coisas. Um é o padding (espaçamento dentro do
conteúdo) e o margin (espaçamento fora do conteúdo).
Veja o exemplo:
*{
font-family: 'Nome da sua fonte aqui';
padding: 0;
margin: 0;
}
sem
*{
font-family: 'Nome da sua fonte aqui';
padding: 0;
margin: 0;
}
#caixa{
width: 300px;
height: 300px;
background-color: #ddd;
padding:30px;
}
<div id="caixa">
<p>iuricode</p>
</div>
*{
font-family: 'Nome da sua fonte aqui';
padding: 0;
margin: 0;
box-sizing: border-box;
}
#caixa{
width: 300px;
height: 300px;
background-color: #ddd;
padding:30px;
}
Roadmap Front-End
Geral
Antes de mais nada, devemos nos contextualizar com
aquilo que vamos aprender. Não é necessário para o
mercado, mas é interessante que você saiba como tudo
começou, quais eram as dificuldades que as pessoas
enfrentavam em outras décadas para desenvolver para
web e etc.
Como a internet funciona?
O que é DNS?
Protocolo HTTP
A história do front-end
HTML
HTML - W3Schools
HTML - MDN
Curso de HTML
CSS
CSS - MDN
CSS - W3Schools
CSS Tricks
JavaScript
Javascript - MDN
Javascript - W3Schools
Curso de Javascript
Javascript
ES6
GitHub: https://github.com/iuricode
Instagram: https://www.instagram.com/iuricode/