Demystifying HTML: An introduction for beginners

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

    View Slide