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.

3ab1d4a265ad9289afe10956a78271df?s=128

Amanda Vilela

February 03, 2016
Tweet

Transcript

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

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

  3. www.amandavilela.com Amanda Vilela Desenvolvedora front-end, UI designer e analista e

    desenvolvimento de sistemas em formação pela FATEC Sorocaba.
  4. Quem são vocês?

  5. O que iremos fazer?

  6. O que é front-end?

  7. H T M L hypertext markup language

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

  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.
  10. Sobre a sintaxe...

  11. Principais tags title h1 h2 h3 p strong emphasis ul

    ol a img header section footer nav
  12. Por que âncora? Por que img e não image?

  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
  14. C S S cascade style sheets

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

  16. Seletores ?

  17. h1 { color: green; }

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

  19. RGB, RGBA e Hexadecimal RGB = rgb(255,127,80 ) RGBA =

    rgba(255,127,80, 0.8) Hexadecimal = #ff7f50
  20. classes ?

  21. O que é CSS?

  22. Cascade Style Sheets

  23. cascatas & cataratas

  24. ordem importa seletores regras

  25. Quem define as propriedades CSS?

  26. W 3 C

  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.
  28. Correção e Erros Comuns

  29. Análise de Sites

  30. None
  31. Revisão

  32. Na próxima aula...

  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;
  34. Deixem seus e-mails para enviarmos coisas legais :D

  35. Entendendo a estrutura de um site <!DOCTYPE html> <html lang="pt">

    <head> <meta charset="UTF-8"> <title>Título</title> </head> <body> <header> Conteúdo </header> <section> Conteúdo </section> <section> Conteúdo </section> <footer> Conteúdo </footer> </body> </html>
  36. None
  37. <header> <h1> <h2> <a> <ul> <li> <li> <li>

  38. css transitions

  39. Layouting

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

  41. <div> - 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
  42. Margin x Padding conteúdo padding margin

  43. Reset e Normalize * { margin: 0; padding: 0; }

    https://necolas.github.io/normalize.css/ <link rel="stylesheet" type="text/css" href="css/normalize.css">
  44. display block inline none inline-block texto texto texto texto texto

  45. alinhando elementos verticalmente container: display: flex; elemento filho: margin: auto

    http://flexboxfroggy.com /
  46. None
  47. <section> <h3> <p> <img> <section> <h3> <section> <h3> <p> <img>

  48. Responsividade

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

    { } <meta name="viewport" content="width=device-width, initial-scale=1">
  50. Exercício Crie regras responsivas pra mudar a cor de fundo

    dos elementos <p> a partir dos seguintes tamanhos de largura de tela 420px 768px 1024px 1366px 1920px
  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
  52. Mobile First

  53. None
  54. <section> <h3> <p> <span> <span> <ul> <footer>

  55. viewport height & viewport width

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

    #nadarRasoNãoCompensa
  57. Na próxima aula...

  58. - continuar a implementação do layout - UMA SURPRESA! -

    próximos passos pra quem quer seguir estudos & carreira em front end
  59. a verdade sobre a surpresa

  60. None
  61. fontawesome.io

  62. #comunidade

  63. None
  64. próximos passos

  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
  66. manda dúvidas bernardes.flp@gmail.com amandavilela.com.br