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

Curso HTML e CSS - Semana de Tecnologia Fatec 2018

Avatar for Jullia Saad Jullia Saad
October 09, 2018
Technology
0
31

Curso HTML e CSS - Semana de Tecnologia Fatec 2018

Um curso de introdução ao Front-end, com foco na sua base, que é o HTML e o CSS. Vamos aprender sobre como funciona a web, HTML semântico e o básico de CSS. Para aplicar o conteúdo proposto na prática, vamos criar um página estática de tributo para a sua banda preferida, da estrutura ao estilo.

Avatar for Jullia Saad

Jullia Saad

October 09, 2018
Tweet

More Decks by Jullia Saad

See All by Jullia Saad
Além dos retângulos ou quadrados: CSS Shapes
Avatar for Jullia Saad julliasaad
0
47
PWA, a web virando app
Avatar for Jullia Saad julliasaad
0
54
Seletores avançados, pseudo-classes e pseudo-elementos no CSS
Avatar for Jullia Saad julliasaad
0
27
Atomic Design
Avatar for Jullia Saad julliasaad
0
23

Other Decks in Technology

See All in Technology
関数型プログラミングで 「脳がバグる」を乗り越える
Avatar for manabeai manabeai
1
190
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
Avatar for 株式会社カオナビ kaonavi
9
4.4k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for markhor64456 airhelpsupport
0
380
Should Our Project Join the CNCF? (Japanese Recap)
Avatar for whywaita whywaita
PRO
0
340
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
Avatar for ar_tama ar_tama
7
1.1k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
7.7k
ネットワーク保護はどう変わるのか？re:Inforce 2025最新アップデート解説
Avatar for Shun Tokuyama tokushun
0
210
第４回Snowflake 金融ユーザー会 Snowflake summit recap
Avatar for Makoto tamaoki
1
280
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
Avatar for jackkkk harrry1211
0
120
オーティファイ会社紹介資料 / Autify Company Deck
Avatar for Autify autifyhq
10
130k
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
190
OPENLOGI Company Profile
Avatar for OPENLOGI hr01
0
67k

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.4k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k

Transcript

  1. criando uma página de tributo para sua banda preferida Curso

    HTML + CSS

  2. Quem sou eu? Contatos @julliasaad https://github.com/julliasaad Jullia Saad 22 anos

    Desenvolvedora na Codeminer 42 Patinadora inline nas horas vagas

  3. Quem sou eu? Contatos @fortunatooo @juliofortunato https://github.com/juliofortunato Julio Fortunato 23

    anos Desenvolvedor na Codeminer 42 Tentando ser patinador nas horas vagas

  4. Front-end (cliente) Back-end (servidor) solicita responde

  5. None
  6. None

  7. front-end

  8. HTML <HyperText Markup Language/> <head> <!DOCTYPE html> <body> <header> <p>

    <a> <img> <div> <li> <span> <h1>

  9. <definição> Linguagem de marcação utilizada na construção de páginas na

    Web </definição>

  10. CSS { Cascading Style Sheets } font-size background-color font-weight width

    color position display height font-family margin padding

  11. definição { } Linguagem de estilo utilizada para apresentação de

    páginas web

  12. <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is

    heading 3</h3>

  13. <a href="path">Texto do link</a>

  14. <img src="onde-está-o-dog.jpg" alt="catioro fofinho" />

  15. None

  16. <p> Assim mesmo, a percepção das dificuldades possibilita uma melhor

    visão global das condições financeiras e administrativas exigidas. </p>

  17. LET’S DO IT https://github.com/julliasaad/html-css-setec

  18. None

  19. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nome da sua banda

    preferida</title> </head> <body> <!-- conteúdo da página --> </body> </html> index.html

  20. index.html ... <body> <header></header> <main> <section></section> <section></section> </main> <footer></footer> </body>

    ...

  21. <header> </header>

  22. <section> </section>

  23. <section> </section>

  24. <footer> </footer>

  25. editores de texto

  26. CADÊ AS COREEES?!

  27. h1 { color: red; } seletor regra atributo valor

  28. Box model

  29. None

  30. • criar pasta css • novo arquivo style.css css/style.css

  31. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./css/style.css">

    <title>Nome da sua banda preferida</title> </head>

  32. css/style.css

  33. css/style.css

  34. css/style.css

  35. css/style.css

  36. css/style.css

  37. css/style.css

  38. Responsividade @media (min-width: 768px) { }

  39. Responsividade @media (min-width: 1024px) { }

  40. DEV TOOLS BFF BFF BFF BFF BFF BFF BFF BFF

  41. E agora?

  42. Obrigada!