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

Demystifying HTML: An introduction for beginners

9059e112be00a40606e7e16162e10e9a?s=47 Lucas Cherkewski
August 12, 2017
Programming
0
160

Demystifying HTML: An introduction for beginners

9059e112be00a40606e7e16162e10e9a?s=128

Lucas Cherkewski

August 12, 2017
Tweet

More Decks by Lucas Cherkewski

See All by Lucas Cherkewski
Learning to Code by Failing Safely
9059e112be00a40606e7e16162e10e9a?s=48 lchski
0
330
Tiny Little Pieces: Designing and developing with pattern libraries
9059e112be00a40606e7e16162e10e9a?s=48 lchski
1
140
Why bother with code?
9059e112be00a40606e7e16162e10e9a?s=48 lchski
1
520
(Re)Designing Creativity
9059e112be00a40606e7e16162e10e9a?s=48 lchski
0
120
Be the Perfect Client (Round 2!)
9059e112be00a40606e7e16162e10e9a?s=48 lchski
0
300
Be the Perfect Client
9059e112be00a40606e7e16162e10e9a?s=48 lchski
1
160

Other Decks in Programming

See All in Programming
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
0
1.6k
From Java 11 to 17 and beyond
F784a8de872a5d98f67ac5ccbd6683d0?s=48 josepaumard
0
300
職場にPythonistaを増やす方法
86b349524dfba1c635e944f2a9c92e91?s=48 soogie
0
310
2022 FrontEnd Training
B16717ef4b7aab0b253d933c3934f280?s=48 mixi_engineers
1
280
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
1f1d874ed952074278d27fad3fb870b8?s=48 microcms
0
470
Yumemi.apk #6 ～ゆめみのAndroidエンジニア 日頃の成果大発表会！～ Session 2
7e5089310d68eca7e2ad404a1c8f2292?s=48 blendthink
1
210
Modern Web Apps with Spring Boot, Angular & TypeScript
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
12
14k
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
330c5e37fb238d6b319ae6e18770f44b?s=48 posquit0
1
320
Explore Java 17 and beyond
F784a8de872a5d98f67ac5ccbd6683d0?s=48 josepaumard
3
650
プログラミングを勉強したいと言われたら
6dd39716ef7dde18a609703e8e26b7ec?s=48 yuba_4
0
400
読みやすいコードを書こう
A7048be18b1c2e712e5b564b1adb1f7e?s=48 yutorin
0
400
書籍【テスト駆動開発による組み込みプログラミング】を写経した感想
84931a5617d844ecfda982721de3a9e9?s=48 kabe
0
100

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
5.5k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
151
12k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
21k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
31
5.8k
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
34
6.1k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
41
6.7k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k

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! lucas@lucascherkewski.com @lchski