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.

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