New coders: Instantly apply concepts with JavaScript (FTP2)

June 28, 2022

In this video, we go through web programming for the absolute beginner and get our hands dirty with HTML, CSS, and JavaScript.

Quick Notes

  • Intro
    • If you're brand new to programming, make a website
      • You use websites every day
  • Concepts
    • HTML, CSS, JS are all linked together - you learn them all at the same time
    • Websites are trees
      • DOM: The logical tree representation of a website
    • HTML: The content - text, images, etc.
    • CSS: How it looks, styling
    • JavaScript: Behavior
  • Follow Along
    • Go to pagekeytech.com or any website
    • Right click, press "Inspect" to open developer tools
  • Top: HTML
    • Can change content in any of the elements (hack the school website trick)
  • Middle: CSS
    • Can see each rule and the styles applied by that rule
    • The dot in CSS selects elements with "class=NAME"
      • Example:
        .myClass
        selects elements such as
        <div class="myClass"></div>
  • Bottom: JavaScript console
    • console.log("Hello World")
    • Get reference to footer:
      • var footer = document.querySelector(".FooterClassName")

Timestamps

  • 0:00 Intro
  • 0:30 Concepts
  • 2:15 Follow Along: Open Dev Tools
  • 3:15 Hack the school website (HTML)
  • 3:42 Style Rules (CSS)
  • 4:35 Behavior (JavaScript)
  • 6:16 Outro