Slide 1
Slide 1 text
HTML+CSS
fundamentos e iniciação ao front end
Slide 2
Slide 2 text
http://felipebernardes.github.io
#votorantim
http://tegra.me
2
Slide 3
Slide 3 text
www.amandavilela.com
Amanda Vilela
Desenvolvedora front-end, UI designer e analista e
desenvolvimento de sistemas em formação pela FATEC
Sorocaba.
Slide 4
Slide 4 text
Quem são vocês?
Slide 5
Slide 5 text
O que iremos fazer?
Slide 6
Slide 6 text
O que é front-end?
Slide 7
Slide 7 text
H T M L
hypertext markup language
Slide 8
Slide 8 text
marcação
conteúdo
hierarquia
sequência
Slide 9
Slide 9 text
Sobre Semântica
Marcação do conteúdo da página, estrutura da informação;
Claro e limpo, focado em marcar o conteúdo;
Estrutura baseada no significado de seu conteúdo. Carrega significado independente da sua
apresentação visual;
Usuário cego usar um leitor de tela para ouvir a página, essencial para entender o conteúdo.
Slide 10
Slide 10 text
Sobre a sintaxe...
Slide 11
Slide 11 text
Principais tags
title h1 h2 h3 p
strong emphasis ul ol
a img header section
footer nav
Slide 12
Slide 12 text
Por que âncora?
Por que img e não image?
Slide 13
Slide 13 text
W 3 C
apple google mozilla
microsoft CERN dell IBM
paypal red hat USP
oxford university yahoo
400+
https://www.w3.org/Consortium/Member/List
Slide 14
Slide 14 text
C S S
cascade style sheets
Slide 15
Slide 15 text
C S S + H T M L :)
Slide 16
Slide 16 text
Seletores ?
Slide 17
Slide 17 text
h1 {
color: green;
}
Slide 18
Slide 18 text
h1 {
color: green;
}
seletor
regra
atributo valor
Slide 19
Slide 19 text
RGB, RGBA e Hexadecimal
RGB = rgb(255,127,80 )
RGBA = rgba(255,127,80, 0.8)
Hexadecimal = #ff7f50
Slide 20
Slide 20 text
classes ?
Slide 21
Slide 21 text
O que é CSS?
Slide 22
Slide 22 text
Cascade Style Sheets
Slide 23
Slide 23 text
cascatas & cataratas
Slide 24
Slide 24 text
ordem importa
seletores regras
Slide 25
Slide 25 text
Quem define as
propriedades CSS?
Slide 26
Slide 26 text
W 3 C
Slide 27
Slide 27 text
Exercício
Crie uma página sobre você, a página deve conter:
- um título
- uma descrição sobre você
- uma lista de sabores de pizza favoritos, em ordem
- uma lista de músicas favoritas, não ordenada
Aplique os conhecimentos da aula de hoje.
Slide 28
Slide 28 text
Correção e Erros Comuns
Slide 29
Slide 29 text
Análise de Sites
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Revisão
Slide 32
Slide 32 text
Na próxima aula...
Slide 33
Slide 33 text
- Análise e identificação de elementos HTML no
layout;
- layouting & posicionamento
- mobile first & responsividade
- Início da estruturação do hotsite com base no
layout ao lado;
Slide 34
Slide 34 text
Deixem seus
e-mails para
enviarmos
coisas legais :D
Slide 35
Slide 35 text
Entendendo a estrutura de um site
Título
Conteúdo
Conteúdo
Conteúdo
Conteúdo
Slide 36
Slide 36 text
No content
Slide 38
Slide 38 text
css transitions
Slide 39
Slide 39 text
Layouting
Slide 40
Slide 40 text
Position
static//relative//absolute//fixe
d
Slide 41
Slide 41 text
- Elemento genérico que serve para criar divisões;
- Não tem significado semântico nenhum;
- Serve para agrupar elementos dentro ou fazer outros detalhes que não precisam de
significado semântico, apenas visual
Slide 42
Slide 42 text
Margin x Padding
conteúdo
padding
margin
Slide 43
Slide 43 text
Reset e Normalize
* {
margin: 0;
padding: 0;
}
https://necolas.github.io/normalize.css/
Slide 44
Slide 44 text
display
block
inline
none
inline-block
texto
texto
texto texto texto
Slide 45
Slide 45 text
alinhando elementos verticalmente
container: display: flex;
elemento filho: margin: auto
http://flexboxfroggy.com
/
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Slide 48
Slide 48 text
Responsividade
Slide 49
Slide 49 text
Media Queries
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
Slide 50
Slide 50 text
Exercício
Crie regras responsivas pra mudar a cor de
fundo dos elementos
a partir dos seguintes tamanhos de largura de tela 420px 768px 1024px 1366px 1920px
Slide 51
Slide 51 text
Exercício
- comente seu código
- copie o conteúdo comentado abaixo do
comentário
- troque de lugar com a pessoa ao seu lado
- troque um caracter de cada media query
- destroque de lugar e arrume seu código
Slide 52
Slide 52 text
Mobile First
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Slide 55
Slide 55 text
viewport height
& viewport width
Slide 56
Slide 56 text
Organização, boas práticas &
por que estamos todos aqui
#ingressarNoMercado
#nadarRasoNãoCompensa
Slide 57
Slide 57 text
Na próxima aula...
Slide 58
Slide 58 text
- continuar a implementação do layout
- UMA SURPRESA!
- próximos passos pra quem quer seguir estudos &
carreira em front end
Slide 59
Slide 59 text
a verdade sobre
a surpresa
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
fontawesome.io
Slide 62
Slide 62 text
#comunidade
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
próximos passos
Slide 65
Slide 65 text
html&css validator sass gulp javascript ZOFE
otimização prematura frameworks bootstrap single
page application conferências iminentes SEO tags
codepen.io open graph tags maujor, o dinossauro
integrados
Slide 66
Slide 66 text
manda dúvidas
bernardes.flp@gmail.com
amandavilela.com.br