HTML + CSS

Slides do curso de HTML + CSS na semana de atualização tecnologica na Fatec Sorocaba

Transcript

1. HTML + CSS Felipe Soares e Jullia Saad
2. Quem é esse cara? Felipe Luiz Soares Web Developer at Codeminer 42 GitHub: https://github.com/felipesoares6 SpeakerDeck: https://speakerdeck.com/felipesoares6
3. E quem é essa mina? Jullia Saad ADS - Fatec Sorocaba Desenvolvedora front-end - Tegra GitHub: https://github.com/julliasaad/
4. How the web works
5. Front-end and Back-end
6. Beginner’s Guide https://www.codeschool.com/beginners-guide-to- web-development
7. github.com/felipesoares6/Curso-Fatec-HTML-CSS Where is the code?
8. WTF is GIT? and GitHub Git GitHub
9. HTML <HyperText Markup Language>
10. CSS {Cascading Style Sheets}
11. Definição bem básica <definição> Linguagem de marcação utilizada na construção de páginas na Web </definição>
12. Definição mais básica ainda Definição { Linguagem de estilo utilizada para apresentação de páginas web } ; ;
13. Então, tags <head> <!DOCTYPE html> <body> <html> <header> <footer> <section> <title> <p> <a> <img> <div> <strong> <ul> <ol> <li> <span> <h1> <meta charset=”utf-8”>
14. <!DOCTYPE html> Não é uma tag html! Instrução para o browser sobre a versão HTML usada.
15. Conjunto de caracteres utilizados para escrever o documento. <meta charset=”utf-8” >
16. <html> </html> <head> </head> <body> </body>
17. <head> </head> <meta charset=”utf-8” > <title> </title>
18. <header> <section> <footer> <body> </body>
19. <html> </html> <head> </head> <body> </body> <header> </header> <section> </section> <footer> </footer> <meta charset=”utf-8” /> <title> </title>
20. Alguma pergunta?
21. VOCÊS JÁ SABEM TUDO <Sobre estrutura HTML>
22. SLIDE
24. <h1> cepo de madeira </h1> <h2> cepo de madeira </h2> <h3> cepo de madeira </h3>
25. <a href=” ”> </a>
26. <p> hoje eu vou ensinar uma brincadeira com palitos de fósforo, É O SEGUINTE, vc tem que pegar um palito de fósforo e raspar essa camada preta aqui da ponta </p>
27. É bom que vc tenha um martelo <strong> </strong> BEM FORTE
28. <em> </em> BEM DURO
29. <img src=” ” >
30. <li> carro 1 </li> <ul> </ul> <li> carro 2 </li>
31. <div> </div> <span> </span>
32. Nenhuma pergunta mesmo? Sério?
33. VOCÊS JÁ SABEM TUDO <Sobre HTML>
34. <header> </header>
35. <section> </section> DESTA QUE DES TAQUE
36. <footer> </footer>
37. fontawesome.io Ícones legais É de graça tem em vários sites CDN é uma fonte birl
38. fontawesome.io https://www.bootstrapcdn.com/fontawesome/ http://fontawesome.io/ SITE CDN
39. HTML
40. HTML HTML + CSS
41. Link CSS <link rel="stylesheet" href="css/style.css">
42. Seletor
43. How to CSS h2 { font-size: 38px; font-family: Arial; }
44. How to CSS h1, h2 { font-size: 38px; font-family: Arial; }
45. How to CSS header h2 { font-size: 38px; font-family: Arial; }
46. Responsividade
47. Responsividade <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width"/>
48. px vh vw view height view width pixel AQUELE 1%
50. Cores color: red; color: #20009a; color: rgb(21,255,0);
51. Cores color: rgb(21,255,0); color: rgba(21,255,0,0.7); R(ed)G(reen)B(lue)A(lpha)
52. .class .wow { min-height: 100vh; text-align: center; } <section class=”wow”> <h1></h1> <img src=”birl.png> </section>
53. #id #wow { min-height: 100vh; text-align: center; } <section id=”wow”> <h1></h1> <img src=”birl.png> </section>
54. Alguma pergunta?
55. Padding, Margin e Border border margin padding
56. How to Set Margin/Padding padding: 10px; margin: 10px 30px; margin: 10px 30px 5px 12px; top/down left/right top/down/left/right top right down left
57. Display
58. FLEX BOX
59. Display FLEEEEEEEEEEEEEEEEXXXX Elemento pai que ganhará a oportunidade gloriosa de ter seu display como FLEX { display: flex; flex-flow: row; (default) }
60. Display FLEEEEEEEEEEEEEEEEXXXX Elemento pai { flex-flow: column; justify-content: center; align-items: center; }
61. Alguma pergunta sobre o famigerado FLEXBOX?
62. <header> </header>
63. <section> </section> DESTA QUE DES TAQUE
64. <section> </section> CON TATO SEM TATO
65. <footer> </footer>
66. VAMO DE CSS
67. a:hover
68. a:hover a { transition: all .2s ease; background-color: rgba(0,0,0, .7); } slow start, then fast, then end slowly transition-duration all attributes
69. a:hover a: hover { background-color: rgba(0,0,0, .9); }
70. CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS
71. Responsividade
72. Responsividade @media (min-width:768px) { }
73. Responsividade @media (min-width:1024px) { }
75. WOW WOW WOW MT BEM TOP Vai embora cara
76. speakerdeck.com/felipesoares6 Onde estão os slides?
77. https://goo.gl/forms/2dCp462KuTkJ WwZn1 Responda o formulário!
78. SO PARTI PRO ABRAÇO
79. Agora que eu já sei HTML+CSS
80. O que ta rolando por ai python sorocaba - https://www.meetup.com/pt-BR/Grupy-SP/ guru sorocaba - https://www.meetup.com/pt-BR/GURU-Sorocaba/ hacklab - https://www.facebook.com/hacklabsorocaba/ GDG Sorocaba - https://www.facebook.com/GDGSorocaba/ sorocaba css - https://www.meetup.com/pt-BR/SorocabaCSS/ Node Sorocaba - https://www.meetup.com/pt-BR/Sorocaba-Node-User-Group-SNUG/ WomenTechmakers - https://www.facebook.com/groups/wtmsorocaba/ in.tegra.do - http://www.meetup.com/In-Tegra-Do/ english meetup - http://www.meetup.com/Sorocaba-English-Conversation-Happy-Hours/ rails girls sorocaba - https://www.facebook.com/railsgirlssorocaba/
81. 1st codepen meetup brazil
82. sorocabacss
83. A LITTLE PUG say thank you for your time !