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

Front-end: Criando sua primeira página web!

Front-end: Criando sua primeira página web!

Slides da palestra/hands-on apresentado juntamente com Jullia Saad no Rails Girls Sorocaba 2017 em 24 de junho de 2017.

Amanda Vilela

June 24, 2017
Tweet

More Decks by Amanda Vilela

Other Decks in Programming

Transcript

  1. Front-end: Criando sua
    primeira página web!
    Amanda Vilela && Jullia Saad

    View Slide

  2. O que é front-end?

    View Slide

  3. O que é back-end?

    View Slide

  4. Mas como assim?

    View Slide

  5. Vamos entender como funciona
    a internet

    View Slide

  6. Vamos entender como funciona
    a internet

    View Slide

  7. Back-end --- HTTP --- Front-end

    View Slide

  8. Vamos nos aprofundar no front-end

    View Slide

  9. Sobre HTML

    View Slide

  10. Vamos criar nossa primeira
    página HTML!

    View Slide




  11. Um título bem legal aqui :)




    View Slide

  12. Parabéns! :)

    View Slide

  13. Agora vamos criar uma página
    sobre você

    View Slide

  14. Títulos
    Seu nome
    Subtítulo
    Subtítulo
    Subtítulo
    Subtítulo
    Subtítulo

    View Slide

  15. Conteúdo
    Parágrafo
    negrito
    itálico

    View Slide

  16. Listas não ordenadas

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5

    View Slide

  17. Listas ordenadas

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5

    View Slide

  18. Adicionando imagens
    />

    View Slide

  19. Caracteres especiais

    View Slide

  20. Criando links
    Texto do link

    View Slide

  21. Estrutura

    Título

    View Slide

  22. Estrutura

    Subtítulo

    View Slide

  23. Estrutura

    Aqui é o rodapé :)

    View Slide

  24. CSS

    View Slide

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

    View Slide

  26. CSS
    h1 {
    color: #222;
    font-size: 22px;
    font-family:
    text-align: center;
    }

    View Slide

  27. Cores
    google.com
    color picker

    View Slide

  28. Google Fonts
    https://fonts.google.com/

    View Slide

  29. Esse é só o começo :D

    View Slide