New coders: Instantly apply concepts with JavaScript (FTP2)

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