Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Amanda Vilela

February 03, 2016
Tweet

More Decks by Amanda Vilela

Other Decks in Programming

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
    [email protected]
    amandavilela.com.br

    View Slide