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

Demystifying HTML: An introduction for beginners

Demystifying HTML: An introduction for beginners

Lucas Cherkewski

August 12, 2017
Tweet

More Decks by Lucas Cherkewski

Other Decks in Programming

Transcript

  1. Demystifying HTML
    An introduction for bloggers

    View Slide

  2. What’s the plan?

    View Slide

  3. 1. What is HTML?

    View Slide

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

    View Slide

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

    View Slide

  6. 1. What is HTML?
    2. Why use it?
    3. How do we use it?
    4. Where can we learn more?

    View Slide

  7. (Picture of me)

    View Slide

  8. Lucas Cherkewski

    View Slide

  9. What is HTML?

    View Slide

  10. HTML is…

    View Slide

  11. HTML is… content

    View Slide

  12. HTML is… content
    HTML is… description

    View Slide

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

    View Slide

  14. HTML:

    View Slide

  15. HTML: HyperText
    HTML:

    View Slide

  16. HTML: HyperText
    HTML: Markup

    View Slide

  17. HTML: HyperText
    HTML: Markup
    HTML: Language

    View Slide

  18. Why use HTML?

    View Slide

  19. Specify precisely what
    you mean

    View Slide

  20. Accessibility

    View Slide

  21. Easier editing in
    WordPress

    View Slide

  22. Customizing plugins
    and themes

    View Slide

  23. Stepping stone to
    learning to code

    View Slide

  24. How do we write HTML?

    View Slide

  25. Somewhere to code…

    View Slide

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

    View Slide

  27. View Slide

  28. View Slide

  29. Back to language
    school!

    View Slide

  30. Meet your new best
    friends:

    View Slide

  31. Meet your new best
    friends: >

    View Slide

  32. A basic HTML “tag”:

    View Slide

  33. A basic HTML “tag”:

    View Slide

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

    View Slide

  35. A basic HTML “tag”:
    Our words…

    View Slide

  36. Our words…

    View Slide

  37. A real-world example…

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. =

    View Slide

  44. =

    View Slide

  45. View Slide


  46. Yaks are the best
    strong>

    View Slide

  47. Some basic tags…

    View Slide

  48. Some basic tags…

    View Slide

  49. Some basic tags…


    View Slide

  50. Some basic tags…

    • , , , …

    View Slide

  51. Some basic tags…

    • , , , …

    View Slide

  52. Going beyond simple
    description

    View Slide

  53. Check out my site!

    View Slide

  54. Check
    out my site!

    View Slide

  55. Check
    out my site!

    View Slide

  56. A small post

    View Slide

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

    View Slide


  58. My great adventure
    I went to Vancouver.
    It was so cool!

    View Slide


  59. My great adventure
    I went to Vancouver.
    It was so cool!

    View Slide

  60. Where can we learn
    more about HTML?

    View Slide

  61. In-person

    View Slide

  62. In-person
    • Ladies Learning Code

    View Slide

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

    View Slide

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

    View Slide

  65. Online courses

    View Slide

  66. Online courses
    • Treehouse

    View Slide

  67. Online courses
    • Treehouse
    • Codecademy

    View Slide

  68. Online courses
    • Treehouse
    • Codecademy
    • Lynda

    View Slide

  69. Online resources

    View Slide

  70. Online resources
    • CSS-Tricks

    View Slide

  71. Online resources
    • CSS-Tricks
    • MDN

    View Slide

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

    View Slide

  73. Tools

    View Slide

  74. Tools
    • Code editors

    View Slide

  75. Tools
    • Code editors
    • Codepen

    View Slide

  76. Tools
    • Code editors
    • Codepen
    • Glitch

    View Slide

  77. WordPress specific

    View Slide

  78. WordPress specific
    • Codex

    View Slide

  79. WordPress specific
    • Codex
    • Facebook groups

    View Slide

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

    View Slide

  81. What’d we talk about?

    View Slide

  82. HTML is a language to
    describe content

    View Slide

  83. Knowing HTML helps us
    work on the web

    View Slide

  84. There are many
    resources to learn from

    View Slide

  85. View Slide

  86. Thanks!

    View Slide

  87. Thanks!
    [email protected]
    @lchski

    View Slide