HTML - The Basics
Leon Noel
Pokemon Master.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
#100Devs
Agenda
-
Software engineering as a career?
-
Learn - Course Setup
-
Learn - How to Learn
-
Learn - Client Server Model
-
Code - #100Devs About Page
-
Learn - What is HTML?
-
Learn - Structure
-
Learn - Syntax
-
Code - Lab Time
Questions
About class or life
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7634660/how-dare.gif)
Career?
Learning to code is the current gold rush.
High Pay:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626245/ticketmaster-slide.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626252/Screen_Shot_2020-08-10_at_11.36.36_AM.png)
Happiest Career:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626259/Screen_Shot_2020-08-10_at_11.38.54_AM.png)
No degree
Can learn for free
Maybe slide in office?
Ticketmaster Office
A Window Is Open
![](https://media4.giphy.com/media/l0EtN1eJEPizWmxc4/giphy.gif)
Trough Of Sorrow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7694391/trough-of-sorrow.png)
Community
![](https://media4.giphy.com/media/WiyczarN2XMm4/giphy.gif)
!discord (leonnoel.com/discord)
Manage Frustration
Consistency
Taking Care Of Yourself
![](https://media1.giphy.com/media/1gdtvpQWIGyZH3EzNI/giphy.gif)
Don't let your dreams be dreams
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626304/just-do-it.gif)
Course Setup
![](https://media3.giphy.com/media/08uYk10qifroCV5x4D/giphy.gif)
Materials
![](https://media1.giphy.com/media/l4EpjM8HU3kjqxOXS/giphy.gif)
Today's always on Discord
Checking In
![](https://media2.giphy.com/media/BmmfETghGOPrW/giphy.gif)
Like and Retweet the Tweet
!checkin
Networking
![](https://media4.giphy.com/media/PnI2Lj854uGN68fPo5/giphy.gif)
3 Individuals Already In Tech
2 Coffee Chats
Submitting Work
![](https://media3.giphy.com/media/26uf7rl7j6RVibDz2/giphy.gif)
Always due a week later
First Google Forms and Then Github
Coding Challenges
![](https://media1.giphy.com/media/YQAuKJ7wf68qBHPw6Y/giphy.gif)
Roller Coaster
![](https://media1.giphy.com/media/SrmLZIT3S8oFO/giphy.gif)
![](https://media2.giphy.com/media/3a9aRPThXvHuU/giphy.gif)
Syllabus
![](https://media3.giphy.com/media/Atc9QCyWLGHgLZhHDp/giphy.gif)
Community Rules
Let's Review
Violations, please use Mod Mail
Anonymous Report = !report
BEFORE YOU TYPE ANYTHING
![](https://media0.giphy.com/media/i3432AkQBcnzAGRaKX/giphy.gif)
Have you ever:
![](https://media1.giphy.com/media/oOi39zkW2JYI0B358Q/giphy.gif)
Y in chat please
What if there was a way to learn stuff faster, more efficently, and forever!
![](https://media3.giphy.com/media/3ohs7U7ORFjSyWFiUg/giphy.gif)
Learning How To Learn
ACTIVE RECALL
SPACED REPETITION
Active Recall
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7870866/active-recall.png)
Ali Abdaal: https://youtu.be/ukLnPbIffxE
Forgetting Curve*
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7870867/ebbinghaus.jpg)
https://intelalearning.wordpress.com
Resetting Forgetting Curve
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7870865/Ebbinghaus-forgetting-curve-and-review-cycle.png)
https://www.pearsoned.com/three-simple-research-based-ways-to-ace-a-test
Spaced Repetition
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7870868/spaced.png)
Ali Abdaal: https://youtu.be/Z-zNHHpXoMM
Anki
![](https://media0.giphy.com/media/fxZPrsux3vlFY6UQs6/giphy.gif)
Why Should You Make Your Own Cards?
![](https://media2.giphy.com/media/3cXmze4Y8igXdnkc3U/giphy.gif)
Why should you use anki every day?
![](https://media2.giphy.com/media/3cXmze4Y8igXdnkc3U/giphy.gif)
Thank You
For putting in the cognitive effort
What is the internet?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626681/1200px-Client-server-model.svg.png)
HTML5?
W3C a brief history!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626689/berners-lee.jpg)
HTML5
Introduced New Features
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7627037/html5.png)
-
Video
-
Audio
-
Canvas
-
Geolocation
-
Websockets
The Golden Rule
SEPERATION OF CONCERNS
-
HTML = Content / Structure
-
CSS = Style
-
JS = Behavior / Interaction
HTML SYNTAX
(Spelling And Grammer Rules)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7627062/html-element.png)
source: mdn
LET'S CODE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
#100Devs About Page
Time For Some
TAGS
not that kind...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7627083/tag.gif)
Heading Elements (tags)
<h1> MOST IMPORTANT </h1>
<h2> .............. </h2>
<h3> .............. </h3>
<h4> .............. </h4>
<h5> .............. </h5>
<h6> .............. </h6>
SIZE DOES NOT MATTER
Other Text Elements
<p> Paragraph </p>
<span> Short text </span>
<pre> Preserves Whitespace </pre>
Nerd Fights
<br>
<hr>
Assisted Device
Elements
<em> Stress Emphasis </em>
<strong> Strong Importance </strong>
Ordered List
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
Unordered List
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
Containing Elements
<div> </div>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>
Let's Look At Some
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Websites
Deprecated Elements
<blink>
<marquee>
Kinda...
<b> Bold Text </b>
<i> Italic Text </i>
Basically,
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7627163/myspace.jpg)
HTML Structure
<!DOCTYPE html>
<html>
<head>
<!-- Stuff the browser needs -->
</head>
<body>
<!-- Everything the user sees -->
<h1>Hello, Twitch!</h1>
</body>
</html>
Let's Code
Lab Time
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Homework
Watch: https://youtu.be/ukLnPbIffxE
Watch: https://youtu.be/Z-zNHHpXoMM
Complete: https://www.coursera.org/learn/learning-how-to-learn
DON'T PAY AND NO ESSAYS
![](https://media.giphy.com/media/3oEjI5pYnV0zNvKzXa/source.gif)
#100Devs HTML - The Basics (cohort 02)
By Leon Noel
#100Devs HTML - The Basics (cohort 02)
Class 01 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord
- 20,005