New coders: Instantly apply concepts with JavaScript (FTP2)
June 28, 2022
Project: ftp
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
- If you're brand new to programming, make a website
- 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:
selects elements such as.myClass<div class="myClass"></div>
- Example:
- 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
Project: ftp