Framework Front-End

1. HTML5 e CSS3
Web Design

2. HTML5 e CSS3
Unidades de medidas CSS
1. Unidades de medidas de distância, comprimento <length>
Medidas relativas
Para fontes: unidades em, ex, ch, rem
Porcentagem da viewport: unidades vw, vh, vmin, vmax
Medidas absolutas
Unidades cm, mm, q, in, pt, pc, px

3. HTML5 e CSS3
A especificação do W3C classifica
tecnicamente a porcentagem (%)
como tipo de dado e não unidade
de medida.

4. HTML5 e CSS3
Unidades de medidas CSS
Unidades de medidas para outras quantidades
Outras quantidades
Ângulos: unidades: deg, grad, rad, turn
Duração: unidades s, ms
Frequência: unidades Hz, kHz
Resolução: unidades dpi, dpcm, dppx

5. HTML5 e CSS3
Objetivo da atividade
Criar botões padronizados para uma aplicação web

6. HTML5 e CSS3
Código .html

7. HTML5 e CSS3
Código .html

8. HTML5 e CSS3
Código .css

9. HTML5 e CSS3
Código .css

10. HTML5 e CSS3
Código .css
Essa declaração equivale a seguinte

11. HTML5 e CSS3
Código .css

12. HTML5 e CSS3

13. HTML5 e CSS3
Bootstrap
Woratana
Ngarmtrakulchol
Fundador da
Designil.com

14. HTML5 e CSS3
Bootstrap é uma framework de front-end
baseada em HTML, CSS e JS
Uma framework para todos os dispositivos

15. HTML5 e CSS3
Bootstrap possui extensa documentação
e dezenas de componentes HTML e CSS

16. HTML5 e CSS3
Feitos usando Bootstrap

17. HTML5 e CSS3
Feitos usando Bootstrap

18. HTML5 e CSS3
Feitos usando Bootstrap

19. HTML5 e CSS3
Feitos usando Bootstrap

20. HTML5 e CSS3
Temos oficiais dos criadores do Bootstrap

21. HTML5 e CSS3 Documentação fácil

22. HTML5 e CSS3 Cabeçalho

23. HTML5 e CSS3
Ícones

24. HTML5 e CSS3
Ícones - exemplos

25. HTML5 e CSS3
Ícones - exemplos

26. HTML5 e CSS3 Botões

27. HTML5 e CSS3
Criando o ambiente de desenvolvimento

28. HTML5 e CSS3
Criando a estrutura do projeto

29. HTML5 e CSS3
Arquivo HTML

30. HTML5 e CSS3
Cabeçalho da página

31. HTML5 e CSS3
Exemplo de navegação

32. HTML5 e CSS3
Conteúdo principal da página

33. HTML5 e CSS3
Formulário

34. HTML5 e CSS3
francisco.soares@ifam.edu.br