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
340

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
970
Tiny Little Pieces: Designing and developing with pattern libraries
Avatar for Lucas Cherkewski lchski
1
260
Why bother with code?
Avatar for Lucas Cherkewski lchski
1
780
(Re)Designing Creativity
Avatar for Lucas Cherkewski lchski
0
260
Be the Perfect Client (Round 2!)
Avatar for Lucas Cherkewski lchski
0
770
Be the Perfect Client
Avatar for Lucas Cherkewski lchski
1
430

Other Decks in Programming

See All in Programming
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
200
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
AIに仕事を丸投げしたら、本当に楽になれるのか
Avatar for ディップ株式会社 dip_tech
PRO
0
180
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
340
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
510
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
Avatar for kouki.miura koukimiura
2
180
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
230
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
1.4k
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
2.2k
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
190
Event Storming
Avatar for Henning Schwentner hschwentner
3
1.3k
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
2
2.1k

Featured

See All Featured
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
68
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
140
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
480
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
360
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
300
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
47k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
700
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.7k

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