slides_html_e_css

Prévia do material em texto

Curso de 
HTML e CSS
Otacilio Maia
Otacilio Maia
● Engenheiro de Software no Cesar; 
● Professor Platzi;
● GitHub Campus Expert;
● https://otaciliomaia.com.
HTML CSS JS
O que são?
Front-end, 
Back-end, e 
Fullstack
Front-end
(Cliente)
HTML CSS JS
Padrões
Back-end (Servidor)
Linguagens de 
Programação
NodeJS Python Java
Linguagens de 
Programação
php Go Ruby
API
Application Programming Interface
Front-end API Back-end
Fullstack
Ferramentas de 
Desenvolvimento
Seus companheiros no dia a dia
Editores de Texto
VSCode Atom Bloco de notas
Editores de Texto
VSCode
Navegadores
Chrome Firefox Safari
DevTools
Anatomia de 
uma página Web
Logo
Header
Navegação
Conteúdo 
Principal
Side
bar
Footer
Anatomia
Index e sua 
estrutura básica: 
head
Index e sua 
estrutura básica: 
body
Anatomia de 
uma tag html
Anatomia de 
uma tag html
Anatomia de uma tag
<a href="https://platzi.com.br">Link Platzi</a>
Atributo
Nome do 
Atributo
valor do 
Atributo
Anatomia de uma tag
<a href="https://platzi.com.br">Link Platzi</a>
Tag de 
Abertura
Tag de 
Fechamento
Desafio de 
Layout
Tag img
Tag video
Tag audio
Tag form e
Input
Mais tipos de 
Inputs
Autocomplete e 
Required
Select
Input type submit 
vs. Button tag
O que é CSS?
HTML CSS
Como utilizamos 
CSS?
Pseudo classes e 
pseudo elementos
Anatomia de uma 
regra CSS
Anatomia de uma regra 
css
p {
color: orange;
}
Propriedade
Seletor
Valor
Anatomia de uma regra 
css
.main {
color: orange;
}
Propriedade
Seletor
Valor
Modelo de caixa
TOP
BOTTOM
LEFT RIGHTCONTENT
WIDTH
H
E
IG
H
T
PADDING
BORDER
MARGIN
Herança
!important
Medidas
Relativas vs 
Absolutas
Medidas EM/REM
Max/Min, vh e vw
Position
Display
Flexbox
Responsividade e
Media Queries
Desafio de layout
Semântica
Acessibilidade
45 
milhões
Pelo menos
de brasileiros possuem 
algum tipo de deficiência (IBGE)
Próximos passos 
como Dev Web