HTML + CSS Fundamentos e Iniciação ao Front-end

Slides do minicurso ministrado com o Felipe Bernardes na Fatec Sorocaba de 03 a 05 de fevereiro de 2016.

Transcript

1. HTML+CSS
   fundamentos e iniciação ao front end
   

   View Slide

2. http://felipebernardes.github.io
   #votorantim
   http://tegra.me
   2
   

   View Slide

3. www.amandavilela.com
   Amanda Vilela
   Desenvolvedora front-end, UI designer e analista e
   desenvolvimento de sistemas em formação pela FATEC
   Sorocaba.
   

   View Slide

4. Quem são vocês?
   

   View Slide

5. O que iremos fazer?
   

   View Slide

6. O que é front-end?
   

   View Slide

7. H T M L
   hypertext markup language
   

   View Slide

8. marcação
   conteúdo
   hierarquia
   sequência
   

   View Slide

9. 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.
   

   View Slide

10. Sobre a sintaxe...
    

    View Slide

11. Principais tags
    title h1 h2 h3 p
    strong emphasis ul ol
    a img header section
    footer nav
    

    View Slide

12. Por que âncora?
    Por que img e não image?
    

    View Slide

13. 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
    

    View Slide

14. C S S
    cascade style sheets
    

    View Slide

15. C S S + H T M L :)
    

    View Slide

16. Seletores ?
    

    View Slide

17. h1 {
    color: green;
    }
    

    View Slide

18. h1 {
    color: green;
    }
    seletor
    regra
    atributo valor
    

    View Slide

19. RGB, RGBA e Hexadecimal
    RGB = rgb(255,127,80 )
    RGBA = rgba(255,127,80, 0.8)
    Hexadecimal = #ff7f50
    

    View Slide

20. classes ?
    

    View Slide

21. O que é CSS?
    

    View Slide

22. Cascade Style Sheets
    

    View Slide

23. cascatas & cataratas
    

    View Slide

24. ordem importa
    seletores regras
    

    View Slide

25. Quem define as
    propriedades CSS?
    

    View Slide

26. W 3 C
    

    View Slide

27. 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.
    

    View Slide

28. Correção e Erros Comuns
    

    View Slide

29. Análise de Sites
    

    View Slide

30. View Slide

31. Revisão
    

    View Slide

32. Na próxima aula...
    

    View Slide

33. - 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;
    

    View Slide

34. Deixem seus
    e-mails para
    enviarmos
    coisas legais :D
    

    View Slide

35. Entendendo a estrutura de um site
    
    
    
    
    Título
    
    
    
    Conteúdo
    
    
    Conteúdo
    
    
    Conteúdo
    
    
    Conteúdo
    
    
    
    

    View Slide

36. View Slide

37. 
    
    
    
    
    
    

    View Slide

38. css transitions
    

    View Slide

39. Layouting
    

    View Slide

40. Position
    static//relative//absolute//fixe
    d
    

    View Slide

41. 
    - 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
    

    View Slide

42. Margin x Padding
    conteúdo
    padding
    margin
    

    View Slide

43. Reset e Normalize
    * {
    margin: 0;
    padding: 0;
    }
    https://necolas.github.io/normalize.css/
    
    

    View Slide

44. display
    block
    inline
    none
    inline-block
    texto
    texto
    texto texto texto
    

    View Slide

45. alinhando elementos verticalmente
    container: display: flex;
    elemento filho: margin: auto
    http://flexboxfroggy.com
    /
    

    View Slide

46. View Slide

47. 
    
    
    
    
    
    
    
    
    

    View Slide

48. Responsividade
    

    View Slide

49. Media Queries
    @media (min-width: 768px) {
    }
    @media (min-width: 1024px) {
    }
    
    

    View Slide

50. 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
    

    View Slide

51. 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
    

    View Slide

52. Mobile First
    

    View Slide

53. View Slide

54. 
    
    
    
    
    
    
    

    View Slide

55. viewport height
    & viewport width
    

    View Slide

56. Organização, boas práticas &
    por que estamos todos aqui
    #ingressarNoMercado
    #nadarRasoNãoCompensa
    

    View Slide

57. Na próxima aula...
    

    View Slide

58. - continuar a implementação do layout
    - UMA SURPRESA!
    - próximos passos pra quem quer seguir estudos &
    carreira em front end
    

    View Slide

59. a verdade sobre
    a surpresa
    

    View Slide

60. View Slide

61. fontawesome.io
    

    View Slide

62. #comunidade
    

    View Slide

63. View Slide

64. próximos passos
    

    View Slide

65. 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
    

    View Slide

66. manda dúvidas
    bernardes.flp@gmail.com
    amandavilela.com.br
    

    View Slide