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 full-size slide

  2. What’s the plan?

    View full-size slide

  3. 1. What is HTML?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. (Picture of me)

    View full-size slide

  8. Lucas Cherkewski

    View full-size slide

  9. What is HTML?

    View full-size slide

  10. HTML is… content

    View full-size slide

  11. HTML is… content
    HTML is… description

    View full-size slide

  12. HTML is… content
    HTML is… description
    HTML is… structure

    View full-size slide

  13. HTML: HyperText
    HTML:

    View full-size slide

  14. HTML: HyperText
    HTML: Markup

    View full-size slide

  15. HTML: HyperText
    HTML: Markup
    HTML: Language

    View full-size slide

  16. Why use HTML?

    View full-size slide

  17. Specify precisely what
    you mean

    View full-size slide

  18. Accessibility

    View full-size slide

  19. Easier editing in
    WordPress

    View full-size slide

  20. Customizing plugins
    and themes

    View full-size slide

  21. Stepping stone to
    learning to code

    View full-size slide

  22. How do we write HTML?

    View full-size slide

  23. Somewhere to code…

    View full-size slide

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

    View full-size slide

  25. Back to language
    school!

    View full-size slide

  26. Meet your new best
    friends:

    View full-size slide

  27. Meet your new best
    friends: >

    View full-size slide

  28. A basic HTML “tag”:

    View full-size slide

  29. A basic HTML “tag”:

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Our words…

    View full-size slide

  33. A real-world example…

    View full-size slide


  34. Yaks are the best
    strong>

    View full-size slide

  35. Some basic tags…

    View full-size slide

  36. Some basic tags…

    View full-size slide

  37. Some basic tags…


    View full-size slide

  38. Some basic tags…

    • , , , …

    View full-size slide

  39. Some basic tags…

    • , , , …

    View full-size slide

  40. Going beyond simple
    description

    View full-size slide

  41. Check out my site!

    View full-size slide

  42. Check
    out my site!

    View full-size slide

  43. Check
    out my site!

    View full-size slide

  44. A small post

    View full-size slide

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

  48. Where can we learn
    more about HTML?

    View full-size slide

  49. In-person
    • Ladies Learning Code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Online courses

    View full-size slide

  53. Online courses
    • Treehouse

    View full-size slide

  54. Online courses
    • Treehouse
    • Codecademy

    View full-size slide

  55. Online courses
    • Treehouse
    • Codecademy
    • Lynda

    View full-size slide

  56. Online resources

    View full-size slide

  57. Online resources
    • CSS-Tricks

    View full-size slide

  58. Online resources
    • CSS-Tricks
    • MDN

    View full-size slide

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

    View full-size slide

  60. Tools
    • Code editors

    View full-size slide

  61. Tools
    • Code editors
    • Codepen

    View full-size slide

  62. Tools
    • Code editors
    • Codepen
    • Glitch

    View full-size slide

  63. WordPress specific

    View full-size slide

  64. WordPress specific
    • Codex

    View full-size slide

  65. WordPress specific
    • Codex
    • Facebook groups

    View full-size slide

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

    View full-size slide

  67. What’d we talk about?

    View full-size slide

  68. HTML is a language to
    describe content

    View full-size slide

  69. Knowing HTML helps us
    work on the web

    View full-size slide

  70. There are many
    resources to learn from

    View full-size slide