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
330

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

Other Decks in Programming

See All in Programming
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
1
650
GeistFabrik and AI-augmented software development
Avatar for Ade Oshineye adewale
PRO
0
120
Feature Flags Suck! - KubeCon Atlanta 2025
Avatar for Pete Hodgson phodgson
0
150
DartASTとその活用
Avatar for そた sotaatos
2
140
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
280
ソフトウェア設計の課題・原則・実践技法
Avatar for 増田 亨 masuda220
PRO
20
13k
アーキテクチャと考える迷子にならない開発者テスト
Avatar for irof irof
9
3.2k
Amazon Bedrock Knowledge Bases Hands-on
Avatar for Kono konny0311
0
150
レイトレZ世代に捧ぐ、今からレイトレを始めるための小径
Avatar for ichi-raven ichi_raven
0
460
モデル駆動設計をやってみよう Modeling Forum2025ワークショップ/Let’s Try Model-Driven Design
Avatar for haru860 haru860
0
170
Private APIの呼び出し方
Avatar for Kishikawa Katsumi kishikawakatsumi
3
890
Bakuraku E2E Scenario Test System Architecture #bakuraku_qa_study
Avatar for teyamagu teyamagu
PRO
0
780

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
760
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
118
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.1k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.8k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.3k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
340
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k

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