Pro Yearly is on sale from $80 to $50! »

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.

3ab1d4a265ad9289afe10956a78271df?s=128

Amanda Vilela

June 24, 2017
Tweet

Transcript

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

    Saad
  2. O que é front-end?

  3. O que é back-end?

  4. Mas como assim?

  5. Vamos entender como funciona a internet

  6. Vamos entender como funciona a internet

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

  8. Vamos nos aprofundar no front-end

  9. Sobre HTML

  10. Vamos criar nossa primeira página HTML!

  11. <!DOCTYPE html> <html> <head> <title>Um título bem legal aqui :)</title>

    </head> <body> </body> </html>
  12. Parabéns! :)

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

  14. Títulos <h1>Seu nome</h1> <h2>Subtítulo</h2> <h3>Subtítulo</h3> <h4>Subtítulo</h4> <h5>Subtítulo</h5> <h6>Subtítulo</h6>

  15. Conteúdo <p>Parágrafo</p> <strong>negrito</strong> <em>itálico</em>

  16. Listas não ordenadas <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li>

    <li>Item 4</li> <li>Item 5</li> </ul>
  17. Listas ordenadas <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item

    4</li> <li>Item 5</li> </ol>
  18. Adicionando imagens <img src=”caminho da imagem” alt=”Descrição da imagem” width="200"

    />
  19. Caracteres especiais <meta charset="utf-8">

  20. Criando links <a href=”caminho do link”>Texto do link</a>

  21. Estrutura <header> <h1>Título</h1> </header>

  22. Estrutura <section> <h2>Subtítulo</h2> </section>

  23. Estrutura <footer> <p>Aqui é o rodapé :)</p> </footer>

  24. CSS

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

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

    }
  27. Cores google.com color picker

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

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