Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Demystifying HTML: An introduction for beginners

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

Demystifying HTML: An introduction for beginners

Avatar for Lucas Cherkewski

Lucas Cherkewski

August 12, 2017

More Decks by Lucas Cherkewski

See All by Lucas Cherkewski
Learning to Code by Failing Safely
Avatar for Lucas Cherkewski lchski
0
1k
Tiny Little Pieces: Designing and developing with pattern libraries
Avatar for Lucas Cherkewski lchski
1
300
Why bother with code?
Avatar for Lucas Cherkewski lchski
1
810
(Re)Designing Creativity
Avatar for Lucas Cherkewski lchski
0
290
Be the Perfect Client (Round 2!)
Avatar for Lucas Cherkewski lchski
0
790
Be the Perfect Client
Avatar for Lucas Cherkewski lchski
1
460

Other Decks in Programming

See All in Programming
ALB ログから Trace を気合で繋げる技術
Avatar for Hayato Kawai fohte
7
880
新卒PdEのリアル
Avatar for ryu ryu1013
1
480
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
190
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
3
490
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
230
GKE アップグレード前に知っておきたい Blue/Green と PDB の関係
Avatar for Sota Takaki stkk
0
160
AIとGame Jamで、ゲームを完成させた話
Avatar for hiro takahirosaeki
0
120
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
230
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
490
Building an Out-of-Order CPU
Avatar for Latte72 latte72
1
750
週末にAI-DLCを本気で回したら$1,600溶けた
Avatar for Atsushi Shimizu hbashimizu
0
130
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
Avatar for 藤掛大介 wp_daisuke
0
140

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
510
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
220
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
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