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

Demystifying HTML: An introduction for beginners

Avatar for Lucas Cherkewski Lucas Cherkewski
August 12, 2017
Programming
0
310

Demystifying HTML: An introduction for beginners

Avatar for Lucas Cherkewski

Lucas Cherkewski

August 12, 2017
Tweet

More Decks by Lucas Cherkewski

See All by Lucas Cherkewski
Learning to Code by Failing Safely
Avatar for Lucas Cherkewski lchski
0
870
Tiny Little Pieces: Designing and developing with pattern libraries
Avatar for Lucas Cherkewski lchski
1
220
Why bother with code?
Avatar for Lucas Cherkewski lchski
1
750
(Re)Designing Creativity
Avatar for Lucas Cherkewski lchski
0
230
Be the Perfect Client (Round 2!)
Avatar for Lucas Cherkewski lchski
0
680
Be the Perfect Client
Avatar for Lucas Cherkewski lchski
1
390

Other Decks in Programming

See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
320
Claude Codeの使い方
Avatar for ttnyt8701 ttnyt8701
1
130
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
2
470
Gleamという選択肢
Avatar for Comamoca comamoca
6
750
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
2
360
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
390
Is Xcode slowly dying out in 2025?
Avatar for 上ちょ / uetyo uetyo
1
180
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
150
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
Avatar for irof irof
1
300
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
Avatar for Kenichi SUZUKI knih
11
2k
[初登壇＠jAZUG]アプリ開発者が気になるGoogleCloud/Azure＋wasm/wasi
Avatar for asaringo asaringo
0
130
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
Avatar for Mitsuharu Maruyama m4maruyama
1
130

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
330
24k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.8k

Transcript

  1. Demystifying HTML An introduction for bloggers

  2. What’s the plan?

  3. 1. What is HTML?

  4. 1. What is HTML? 2. Why use it?

  5. 1. What is HTML? 2. Why use it? 3. How

    do we use it?

  6. 1. What is HTML? 2. Why use it? 3. How

    do we use it? 4. Where can we learn more?

  7. (Picture of me)

  8. Lucas Cherkewski

  9. What is HTML?

  10. HTML is…

  11. HTML is… content

  12. HTML is… content HTML is… description

  13. HTML is… content HTML is… description HTML is… structure

  14. HTML:

  15. HTML: HyperText HTML:

  16. HTML: HyperText HTML: Markup

  17. HTML: HyperText HTML: Markup HTML: Language

  18. Why use HTML?

  19. Specify precisely what you mean

  20. Accessibility

  21. Easier editing in WordPress

  22. Customizing plugins and themes

  23. Stepping stone to learning to code

  24. How do we write HTML?

  25. Somewhere to code…

  26. Somewhere to code… the “text” tab!

  27. None
  28. None

  29. Back to language school!

  30. Meet your new best friends:

  31. Meet your new best friends: </>

  32. A basic HTML “tag”:

  33. A basic HTML “tag”: <p>

  34. A basic HTML “tag”: <p>Our words…

  35. A basic HTML “tag”: <p>Our words…</p>

  36. <p>Our words…</p>

  37. A real-world example…

  38. None
  39. None
  40. None
  41. None
  42. None

  43. =

  44. = <strong>

  45. None

  46. <p>
 Yaks are the <strong>best</ strong> </p>

  47. Some basic tags…

  48. Some basic tags… • <p>

  49. Some basic tags… • <p> • <h1>

  50. Some basic tags… • <p> • <h1>, <h2>, <h3>, …

  51. Some basic tags… • <p> • <h1>, <h2>, <h3>, …

    • <a>

  52. Going beyond simple description

  53. <a>Check out my site!</a>

  54. <a href="example.com">Check out my site!</a>

  55. <a href="example.com">Check out my site!</a>

  56. A small post

  57. My great adventure I went to Vancouver. It was so

    cool!

  58. <article> <h1>My great adventure</h1> <p>I went to <a href="example.org">Vancouver</a>. It

    was so <strong>cool</strong>!</p> </article>

  59. <article> <h1>My great adventure</h1> <p>I went to <a href="example.org">Vancouver</a>. It

    was so <strong>cool</strong>!</p> </article>

  60. Where can we learn more about HTML?

  61. In-person

  62. In-person • Ladies Learning Code

  63. In-person • Ladies Learning Code • Camp Tech

  64. In-person • Ladies Learning Code • Camp Tech • Lighthouse

    Labs

  65. Online courses

  66. Online courses • Treehouse

  67. Online courses • Treehouse • Codecademy

  68. Online courses • Treehouse • Codecademy • Lynda

  69. Online resources

  70. Online resources • CSS-Tricks

  71. Online resources • CSS-Tricks • MDN

  72. Online resources • CSS-Tricks • MDN • Stack Overflow

  73. Tools

  74. Tools • Code editors

  75. Tools • Code editors • Codepen

  76. Tools • Code editors • Codepen • Glitch

  77. WordPress specific

  78. WordPress specific • Codex

  79. WordPress specific • Codex • Facebook groups

  80. WordPress specific • Codex • Facebook groups • WordCamps and

    meetups

  81. What’d we talk about?

  82. HTML is a language to describe content

  83. Knowing HTML helps us work on the web

  84. There are many resources to learn from

  85. None

  86. Thanks!

  87. Thanks! [email protected] @lchski