O documento resume um curso de HTML/CSS chamado HackaPET 2019, abordando tópicos como consistência de dados, cache, UX, design responsivo, acessibilidade, segurança, performance e testes. Ele também discute termos importantes como box model e seletores CSS e inclui exercícios práticos e links para recursos adicionais de aprendizagem sobre HTML e CSS.

1. HackaPET 2019
HTML/CSS
Maíra Bello

2. Não é só
“colocar um botão na tela"

3. Consistência de dados
Cache
Offline
UX
Design
Responsividade
Acessibilidade
Segurança
Single Page Applications
Performance
Testes
Comunicação com backend
Tempo real
Search Engines
Infra
Browsers

5. Ambiente
• Editor de texto (Sublime, VS Code, Atom)
• Browser
• Alternativa: Codepen - https://codepen.io/pen/

6. Termos e conceitos importantes

11. Box Model

14. <div>
<span>

15. Seletores

16. Prática

17. Prática 1

18. 10px
#0096b4
#FFFFFF
14px
5px
Prática 1

19. Prática 2
300px

20. O que falta?

21. O que falta?
• Layout (FLEX!)
• Positioning (position static, relative, absolute, fixed)
• Mais elementos HTML, como form fields (input, textarea,
select, etc)

22. More
HTML/CSS
freecodecamp
https://www.freecodecamp.org/
Khan Academy
https://www.khanacademy.org/computing/computer-
programming/html-css
HTML & CSS Is Hard
https://internetingishard.com/html-and-css
Flexbox Froggy
https://flexboxfroggy.com/

23. Mas não precisa ser assim. acreditamos que
a tecnologia pode entregar cada vez mais
conveniência sem comprometer a nossa
privacidade.