O CURSO DO FRONT-END DAS GALÁXIAS
Jean Lucas de Carvalho
Desenvolvedor Frontend com foco na experiência do usuário e entusiasta de tecnologias Frontend, criou a Futuring para ajudar jovens universitários a adentrarem no mercado de trabalho. É um dos Organizadores do GDG Goiânia e em 2013 participou do Google Developer Bus Brasil e criou o Frontend Goiás. Já palestrou em eventos como: Google DevFest Centro-Oeste, Seminário Locaweb, Android Bootcamp, FLISOL e Join Community. Trabalha com AngularJS desde 2013, contribuindo em projetos open-source e na estruturação e arquitetura de diversos projetos goianos que utilizam o framework.
O que faz um desenvolvedor Front End???
O que faz um desenvolvedor Front End?
- É o profissional responsável por projetar, construir e otimizar as interfaces de um projeto web.
- Ele é a ponte entre o designer e o desenvolvedor Back End
Responsabilidades
- Trabalhar junto com o designer na criação de uma melhor experiência possível
- Desenvolver código limpo e bem documentado
- Criar páginas web rápidas
Qual sua importância?
- 80% do tempo de carregamento é gasto no frontend
- Cada vez mais as interfaces vem ficando complexas e detalhadas, fazendo ainda mais necessária a presença de um especialista
- O visual é a primeira coisa a ser vista, se ele estiver quebrado, o risco do usuário sair e nunca mais voltar é maior
Mercado de trabalho
Google trends
Text
Só em olhar o gráfico, da para perceber o crescimento na área. Quanto mais você se qualifica, mais fácil conseguir um bom emprego em uma boa empresa
Níveis de conhecimento
Iniciante
- HTML (estrutura e tags)
- CSS (propriedades básicas)
- JS (pequenas noções, chamadas de scripts prontos)
- Básico de Photoshop (recortes, cores, fontes)
Intermediário
- HTML (Semântica e Acessibilidade)
- CSS (propriedades avançadas do CSS3, Design Responsivo, funcionamento de grids e noção de frameworks)
- JS (Entendimento da linguagem, noções de orientação a objeto)
- Ferramenta de Versionamento (Git)
- Noções de performance
- SEO (Extra)
Avançado
- CSS (Entender pre-processadores e suas funcões)
- JS (Conhecimento forte na linguagem, entender algumas arquiteturas e Testes)
- NodeJS (Saber como funciona e alguns conhecimentos basicos para automatização e afins)
- Grunt/Gulp (saber como automatizar processos)
- Bons conhecimentos de performance
- Noções de UX/UI (Extra)
Master
- CSS (conceitos avançados de arquitetura - BEM, Organic, Atomic)
- JS (Total domínio na linguagem, design patterns na palma da mão)
- NodeJS (saber como criar módulos, chamá-los tanto no front quanto no back)
- Ter sólida experiência em sistemas front como o MEAN Stack
hahahahaha
Relaxa =D
O que vamos aprender no curso?
But first as primeiras coisas, então vamos aprender um pouco de cada um dos tópicos abaixo
HTML
CSS
Twitter Bootstrap
Boas Práticas
Ferramentas que vamos usar
O que é HTML?
O HTML é uma abreviação de HyperText Markup Language ou seja que em português significa, Linguagem de marcação de Hipertexto.
Os arquivos HTML são interpretados pelos navegadores (browsers), portanto, caso você tenha algum arquivo HTML no computador, basta pedir que o seu navegador abra ele.
Por que aprender HTML?
Toda página web é escrita em uma linguagem chamada HTML. Você pode pensar em HTML como um esqueleto que dá estrutura a todas as páginas.
Neste curso, vamos usar HTML para adicionar parágrafos, cabeçalhos, imagens, links a uma página e muitas outras coisas.
Criando um arquivo HTML
É muito simples:
1. Vamos abrir o editor de texto ( sublime text )
2. Criar um novo arquivo ( file > new file)
3. Salvar o arquivo com a extensão .html
O que são TAGs?
Para aprender mais sobre HTML, devemos aprender a falar sobre HTML. Então não se assuste ao ver muitas <>
1. Tags são palavras-chave (nomes tag) cercadas por colchetes
2. As coisas dentro de <>s são chamadas de tags.
3. Tags geralmente são colocadas em pares: uma tag de abertura, e uma tag de fechamento.
<primeira tag><segunda tag>Algum texto!</segunda tag></primeira tag>
Algumas tags básicas que devemos saber:
1. <h1> ou <H1>
2. <p>
3. <b>
<h1> Algum texto aqui </h1><p> Algum outro texto aqui </p><b> Este texto estará em negrito </b>Estrutura básica
HTML – <html> </html>
Essa tag é responsável por definir o início de um documento HTML e seu fim. Logo deve ser aberta no início do documento e fechado no seu final.
HEAD – <head></head>
Tag que define o início e o fim do cabeçalho do documento. Abordaremos mais abaixo o que deve ser inserido no cabeçalho.
BODY – <body></body>
Tag onde devem ser inseridos os conteúdos do site que deverão ficar visíveis ao usuários quando a página for renderizada no navegador.
<!DOCTYPE html>
<html>
<head>
<!--conteudo do head-->
</head>
<body>
<!--conteudo do body-->
</body>
</html>
Condificação e titulo da página
O computador não entende texto, e sim 0 e 1, código binário. Então é por isso que temos que fazer a codificação de texto.
Para isso, usaremos uma tag chamada meta
<meta name="" content="" />
Essa metatag, é inserida no head da estrutura html
Metatag CHARSET.
Com ela você define que tipo de codificação que o seu texto vai usar ao ser renderizado pelo navegador. Recomendo utilizar o utf-8 mesmo.
<!doctype html>
<head>
<meta charset="utf-8" />
</head>
Inserido o titulo da página
<!doctype html>
<head>
<title>Título da página</title>
<meta charset="utf-8" />
</head>Código Amigável
Deixar um código mais legível é sempre mais legal, tanto para você quanto para outras pessoas que irão ver seu código.
Chamamos essa melhor organização do código de indentação
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8" />
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8" />
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>=/
=D
Versões do HTML
O <!DOCTYPE html> inserido antes da tag <html> no exemplo anterior é para especificar para o navegador o tipo de página HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente porém os mais usados são o HTML 5
Porém recomendo que sempre utilizem o doctype do HTML 5, pois ele é mais enxuto e mesmo que não utilize HTML 5 em sua página não vai prejudicar em nada a renderização da página pelo browser.
Declarações DOCTYPE Comum
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Adicionando Heading
As posições são definidas com a <h1> para <h6> tags.
<H1> define o título mais importante.
<H6> define o título menos importante.
<h1>Isto é um titulo</h1>
<h2>Isto é um titulo</h2>
<h3>Isto é um titulo</h3>
<h4>Isto é um titulo</h4>
<h5>Isto é um titulo</h5>
<h6>Isto é um titulo</h6>Os títulos são importantes
Use títulos HTML para apenas títulos. Não use títulos para tornar o texto GRANDE ou negrito .
Posições de h1 deve ser principais posições, seguido por posições h2, h3, em seguida, o menos importante, e assim por diante.
Inserindo parágrafos
É muito simples:
Um paragrafo é representado pela tag <p></p>
Vamos usar muito essa tag na nossa estrutura, pois praticamente todo texto inserimos dentro dessa tag
<p>O Front End é toda a parte de apresentação visual de um site.
É a forma como o conteúdo se apresenta na tela.</p>Estilos no HTML
Cada elemento HTML tem um estilo padrão (cor de fundo é branco e cor do texto é preto).
Mudar o estilo padrão de um elemento HTML, pode ser feito com o atributo de estilo .
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>O atributo de estilo HTML tem a seguinte sintaxe :
style="propriedade:valor"
<body style="background-color:green>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>Atividade
1 - Criar um novo documento HTML e salvar na pasta do nosso curso
2 - Criar a estrutura básica do HTML
3 - Adicionar a codificação de texto e titulo
4 - No conteúdo da página inserir:
- O corpo da pagina dever ter o fundo preto
- Um titulo destaque com o texto : Meu primeiro site
- Esse titulo deve ter: fundo azul e cor da fonte branca e fonte arial
- Um parágrafo com um texto descrevendo o que você faz
- Esse parágrafo deve ter cor preta e fundo branco
5 - Deixar o código amigável
Tags de formatação de texto
Tag - Descrição
<b> - Define texto em negrito
<big> - Define texto grande
<em> - Define texto enfatizado;
<i> - Define texto em itálico
<small> - Define texto pequeno
<strong> - Define texto forte
<p>Lorem ipsum dolor sit amet</p>
<p><b>Lorem ipsum</b> dolor sit amet</p>
<p><i>Lorem ipsum</i> dolor sit amet</p>
<p><strong><i>Lorem ipsum</i></strong> dolor sit amet</p>Comentários dentro do HTML
Podemos adicionar comentários no nosso código. Muitas vezes comentamos para lembrar algo, ou até mais para delimitar onde um bloco começa e termina
Para criar um comentario usamos a seguinte sintaxe
<!-- Um texto qualquer -->
<!-- Este é um comentário -->
<p>This is a paragraph.</p>
<!-- Lembrar de adicionar um novo parágrafo aqui -->Inline CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titulo da pagina</title>
<style>
body {background-color:green}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>Nosso titulo</h1>
<p>Nosso paragrafo</p>
</body>
</html>Aqui vamos adicionar a tag <style> para inserir estilo as tags que estamos usando no HTML.
Colocamos a tag <style> dentro do head da estrutura
INSERINDO IMAGENS
É muito simples:
1. Selecionamos uma imagem qualquer
2. Colocamos essa imagem dentro da pasta do nosso projeto
3. Inserimos a seguinte tag no html
<img src="caminho da imagem" alt="algum texto">O src atributo define o endereço web (URL) da imagem
A alt atributo especifica um texto alternativo para a imagem, se não pode ser exibida
Podemos definir um tamanho especifico para imagem
<img src="caminho da imagem" alt="algum texto" width="125" height="125">Criando Links
O link é representado pela ta <a></a>
O A é um elemento responsável por "linkar" páginas/arquivos na sua página. Através do atributo href você pode especificar aonde está a página/arquivo a ser linkado na página.
Ex:
<a href="clientes.html">Página de clientes</a>
Link externo:
<a href="">Site externo sendo linkado</a>
Link target:
_blank: ao ser clicado, o link é aberto em uma nova janela do navegador
<a href="http://www.algumsite.com" target="_blank">Visite esse site!</a>_self: ao ser clicado, o link abre a na mesma pagina ( ja é padrão)
<a href="http://www.algumsite.com" target="self">Visite esse site!</a>Atividade 2
1 - Criar um novo documento HTML e salvar na pasta do nosso curso
2 - Criar a estrutura básica do HTML
3 - Adicionar a codificação de texto e titulo
4 - No conteúdo da página inserir:
- O corpo da pagina dever ter o fundo preto
- Um titulo destaque com o texto : Meu primeiro site
- Esse titulo deve ter: fundo azul e cor da fonte branca e fonte arial
- Um parágrafo com um texto descrevendo o que você faz
- Esse parágrafo deve ter cor preta e fundo branco
5 - Deixar o código amigável
6 - Inserir uma foto sua
7 - Colocar 2 links na pagina: 1 abrir na mesma pagina e 1 abrir em uma outra aba
Listas
Listas Não Ordenadas
Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets (tipicamente pequenos círculos pretos).
Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>.
Aqui está como aparece em um navegador:
-
Café
-
Leite
Dentro de um item de uma lista você pode colocar parágrafos, quebras de linha, imagens, vínculos, outras listas, etc.
<ul>
<li>Café</li>
<li>Leite</li>
</ul>Listas ordenadas
Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com números.
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>.
Aqui está como aparece em um navagador:
-
Café
-
Leite
Dentro de um item de uma lista você pode colocar parágrafos, quebras de linha, imagens, vínculos, outras listas, etc.
<ol>
<li>Café</li>
<li>Leite</li>
</ol>Lista de Definições
Uma lista de definições não é uma lista de itens. Esta é uma lista de termos e explicações dos termos.
Uma lista de definições começa com a tag <dl>. Cada termo da lista de definições começa com a tag <dt>. Cada definição da lista de definições começa com a tag <dd>.
Aqui está como aparece em um navegador:
Café
Bebida quente preta
Leite
Bebida fria branca
<dl>
<dt>Café</dt>
<dd>Bebida quente preta</dd>
<dt>Leite</dt>
<dd>Bebida fria branca</dd>
</dl>
Menu usando listas
Menu Vertical
<ul>
<li><a href="index.html">Home page</a>
<li><a href="pensamentos.html">Pensamentos</a>
<li><a href="cidade.html">Minha cidade</a>
<li><a href="links.html">Links</a>
</ul>Menu Horizontal
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>Tabelas
Tabelas
As tabelas são definidas com a tag <table>.
Uma tabela é dividida em linhas (com a tag <tr>)
Cada linha é dividida em células de dados (com a tag <td>).
As letras td significam "table data," que é o conteúdo de uma célula de dados. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, filetes horizontias, tabelas, etc.
Estrutura simples
<table>
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>Podemos adicionar uma bordar na tabela
<table border="1">
Cabeçalhos em uma Tabela
Os cabeçalhos em uma tabela são definidos com a tag <th>.
<table>
<tr>
<th>Cabeçalho</th>
<th>Outro Cabeçalho</th>
</tr>
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>
Formulários
Formulários HTML são usados para coletar a entrada do usuário.
<form>
<!-- conteúdo do formulario -->
</form>A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo type (tipo). Os tipos de input mais usados são:
- text
- radio
- checkbox
Exemplos de formularios:
1. Usando tipo text
2. Usando tipo radio
3. Usando tipo checkbox
<form>
Primeiro nome:
<input type="text" name="firstname">
<br>
Último nome:
<input type="text" name="lastname">
</form><form>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name="sex" value="female"> Feminino
</form><form>
<input type="checkbox" name="bike">
Eu tenho uma bicicleta
<br>
<input type="checkbox" name="car">
Eu tenho um carro
</form>Também podemos inserir dentro de uma formulario, uma caixa de seleção.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>Temos também o elemento textarea, muito ultilizado para entrada de textos grandes, tipo comentarios
<textarea name="message" rows="10" cols="30">
</textarea>O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit)
Quando o usuário clica no botão "Enviar", o conteúdo do formulário é enviado para outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida.
<form name="input" action="" method="">
Nome do Usuário:
<input type="text" name="user">
<input type="submit" value="Enviar">
<button type="submit">Enviar</button>
</form>Podemos adicionar um texto, que podemos dizer que indica o valor do input, chamamos a propriedade placeholder.
<form>
Primeiro nome:
<input type="text" placeholder="Primeiro nome" name="firstname">
<br> Último nome:
<input type="text" placeholder="Ultimo nome" name="lastname">
</form>Novos elementos estruturais do
HTML 5
<div> - O que é ?
O nome div vem de divisão, e esta tag vai lhe dar o simples poder de dividir qualquer trecho de seu código. Isso mesmo, você pode criar um bloco, uma divisão, e dentro deste bloco ter uma imagem, links, textos e o que mais você quiser.
Como usar a tag <div> em HTML e CSS
A sintaxe da tag div é:
<div>
Todo, qualquer e quantos
elementos do HTML você queira
colocar aqui.
</div>Exemplo de divisão de um layout:
<!DOCTYPE html>
<html>
<head>
<title> Como usar DIV </title>
<meta charset=utf-8">
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>Usando o os elementos estruturais do HTML 5
● <header>
● <nav>
● <section>
● <article>
● <aside>
● <footer>
Os nomes dos elementos são bem auto-explicativos caso você saiba o básico de inglês:
● <header> - Cabeçalho, onde você coloca informações importantes como o nome ou o logo do site. Não confunda com a tag <head>! São duas coisas diferentes!
● <nav> - Navegação. Ou seja, o menu.
● <section> - Seção. Por exemplo, uma seção para o artigo em destaque, outra para o restante dos
artigos de um site, etc.
● <article> - Artigo. Em um blog, por exemplo, será equivalente a um post.
● <aside> - Representa o conteúdo relacionado a uma página. Geralmente usa-se como uma barra
lateral, mas não é algo obrigatório.
● <footer> - Rodapé que pode conter informação sobre o autor, copyright, bibliografia e outras
coisas de rodapé.
Exemplo de como ficaria a estrutura usando os elementos HTML 5
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Título do seu site</title>
</head>
<body>
<!-- Cabeçalho do site: -->
<header>
<h1>Nome do site</h1>
</header>
<!-- Menu: -->
<nav>
<ul>
<li><a href="#inicial">Inicial</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>
</nav>
<!-- Área para artigos -->
<section>
<article>
<h2>Titulo do artigo</h2>
<p>Restante do artigo...</p>
</article>
<article>
<h2>Outro artigo</h2>
<p>Texto aleatório...</p>
</article>
</section>
<!-- Barra lateral: -->
<aside>
<h3>Entre em contato</h3>
<p>Entre em <a href="#contato">contato</a> conosco</p>
</aside>
<!-- Rodapé -->
<footer>
<p>Todos os direitos reservados.</p>
</footer>
</body>
</html>CSS
Cascading Style Sheets (Folhas de Estilo em Cascata), assim como a HTML, não é uma linguagem de programação.
CSS é uma linguagem de folha de estilos usada amplamente na web e criada com o propósito principal de estilizar páginas HTML.
Sintaxe
A linguagem CSS funciona através de regras com o principal objetivo de estilizar visualmente o conteúdo HTML da página. Com as regras, podemos selecionar um ou mais elementos em uma página e aplicar estilos de acordo. Uma regra é formada de:
- Um ou mais seletores;
- Chaves: “{” e “}”;
- Declarações: propriedade e valor (terminando a linha com ";").
CLASSES E IDS
Para possibilitar uma organização melhor da página e da seleção de elementos por CSS, podemos utilizar classes e/ou ids para identificar tags.
Uma id, como o nome diz, é uma identificação única: só pode ser utilizada uma vez no documento inteiro. Normalmente é utilizada para identificar elementos estruturais da página.
Uma classe é reutilizável: pode se repetir na página e também combinar-se com outras (podemos pôr mais de uma classe em um elemento).
É perfeitamente possível fazer um site apenas com ids, apenas com classes, com uma combinação das duas, ou sem nenhuma das duas.
Exemplo com ID
<div>
Aqui vai o cabeçalho do site
</div>
<div>
Aqui vai o conteúdo do site
</div>
<div>
Aqui vai o rodapé do site
</div><div id="cabecalho">
Aqui vai o cabeçalho do site
</div>
<div id="conteudo">
Aqui vai o conteúdo do site
</div>
<div id="rodape">
Aqui vai o rodapé do site
</div>Exemplo com Classes
<p class="destaque">
...
</p>
<p>
...
</p>
<p class="destaque">
...
</p>SELETORES
Muito do poder da linguagem CSS está nos seletores. Com os seletores, conseguimos escolher qualquer elemento (ou elementos) na página para aplicar estilos.
Vejamos primeiro os principais tipos de seletores:
-
Seletor de tipo: selecionamos todas as tags de um mesmo tipo. Útil para estilos gerais, mas para maior especificidade utilizamos outros seletores.
-
Seletor descendente: com este seletor, podemos escolher um ou mais elementos que estão dentro de outro, ou seja, que são descendentes do elemento principal. Exemplo: p strong.
-
Seletor de classe: seleciona elementos com uma classe específica aplicada.
-
Seletor de id: seleciona o elemento com a id especificada.. Cada id é única e não pode ser repetida no mesmo documento.
Exemplos
<p>
<a href="#">Este é um link e ele está sendo selecionado com o seletor <code>a</code></a>.
</p>
<p>
<strong>Esta tag está dentro de um elemento </strong> e está sendo selecionada com o seletor p strong.
</p>
<p class="destaque">
Este é um parágrafo com a classe "destaque" e ele está sendo selecionado com o seletor .destaque.
</p>
<p id="unico">
Este é um parágrafo com a id "unico" e ele está sendo selecionado com o seletor #unico.
</p>COMBINANDO SELETORES
Podemos também combinar os seletores :
-
p.destaque seleciona apenas os parágrafos que possuem a classe "destaque".
-
div#cabecalho h1 seleciona tags h1 que estejam dentro da div com a id "cabecalho".
-
#conteudo ul li a seleciona links (tag a) dentro de itens de lista dentro de tags ul que estejam dentro de um elemento com a id "conteudo".
-
#conteudo p.destaque strong seleciona elementos strong dentro de parágrafos com a classe "destaque" que estejam dentro de um elemento com a id "conteudo".
-
Separando itens por vírgulas, como p.destaque, h1, a.saiba-mais seleciona todos os respectivos elementos para as regras. Muito útil para diminuir a repetição de regras no arquivo CSS.
INSERINDO CSS EM UMA PÁGINA
Para que as regras tenham efeito na página, há três maneiras de inseri-las (veremos isso com mais detalhes na lição seguinte):
- Dentro da tag <head> de uma página, utilizando a tag “<style>”
- Dentro de um elemento, utilizando atributo style (estilos em linha)
- Arquivo externo “.css” ligado à página HTML através da tag <link> (melhor método). O atributo rel determina a relação deste "link" com a página, aqui sendo stylesheet ou folha de estilos.
<head>
<meta charset="utf-8">
<title>Título do seu site</title>
<link rel="stylesheet" href="caminho_do_css.css">
</head>Curso do Front-end das galáxias
By Jean Lucas de Carvalho
