Slide 1 of 49HTML - The Basics
Leon Noel
Pokemon Master.
#100Devs
Slide 2 of 49Agenda
- 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
Slide 3 of 49
Questions
About class or life
Slide 4 of 49Career?
Learning to code is the current gold rush.
High Pay:
Happiest Career:
No degree
Can learn for free
Maybe slide in office?
Ticketmaster Office
Slide 5 of 49A Window Is Open
Slide 6 of 49Trough Of Sorrow
Slide 7 of 49Community
!discord (leonnoel.com/discord)
Slide 8 of 49
Manage Frustration
Consistency
Taking Care Of Yourself
Slide 9 of 49Don't let your dreams be dreams
Slide 10 of 49Course Setup
Slide 11 of 49Materials
Today's always on Discord
Slide 12 of 49Checking In
Like and Retweet the Tweet
!checkin
Slide 13 of 49Networking
3 Individuals Already In Tech
2 Coffee Chats
Slide 14 of 49Submitting Work
Always due a week later
First Google Forms and Then Github
Slide 15 of 49Coding Challenges
Slide 16 of 49Roller Coaster
Slide 17 of 49Syllabus
Slide 18 of 49
Community Rules
Let's Review
Violations, please use Mod Mail
Anonymous Report = !report
Slide 19 of 49BEFORE YOU TYPE ANYTHING
Slide 20 of 49Have you ever:
Y in chat please
Slide 21 of 49What if there was a way to learn stuff faster, more efficently, and forever!
Slide 22 of 49Learning How To Learn
ACTIVE RECALL
SPACED REPETITION
Slide 23 of 49Active Recall
Ali Abdaal: https://youtu.be/ukLnPbIffxE
Slide 24 of 49Forgetting Curve*
https://intelalearning.wordpress.com
Slide 25 of 49Resetting Forgetting Curve
https://www.pearsoned.com/three-simple-research-based-ways-to-ace-a-test
Slide 26 of 49Spaced Repetition
Ali Abdaal: https://youtu.be/Z-zNHHpXoMM
Slide 28 of 49Why Should You Make Your Own Cards?
Slide 29 of 49Why should you use anki every day?
Slide 30 of 49
Thank You
For putting in the cognitive effort
Slide 31 of 49What is the internet?
Slide 32 of 49HTML5?
W3C a brief history!
Slide 33 of 49
HTML5
Introduced New Features
- Video
- Audio
- Canvas
- Geolocation
- Websockets
Slide 34 of 49The Golden Rule
SEPERATION OF CONCERNS
- HTML = Content / Structure
- CSS = Style
- JS = Behavior / Interaction
Slide 35 of 49
HTML SYNTAX
(Spelling And Grammer Rules)
source: mdn
Slide 36 of 49LET'S CODE
#100Devs About Page
Slide 37 of 49
Time For Some
TAGS
not that kind...
Slide 38 of 49Heading Elements (tags)
<h1> MOST IMPORTANT </h1>
<h2> .............. </h2>
<h3> .............. </h3>
<h4> .............. </h4>
<h5> .............. </h5>
<h6> .............. </h6>
SIZE DOES NOT MATTER
Slide 39 of 49Other Text Elements
<p> Paragraph </p>
<span> Short text </span>
<pre> Preserves Whitespace </pre>
Slide 40 of 49Nerd Fights
<br>
<hr>
Slide 41 of 49
Assisted Device
Elements
<em> Stress Emphasis </em>
<strong> Strong Importance </strong>
Slide 42 of 49Ordered List
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
Slide 43 of 49Unordered List
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
Slide 44 of 49Containing Elements
<div> </div>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>
Slide 45 of 49Let's Look At Some
Websites
Slide 46 of 49Deprecated Elements
<blink>
<marquee>
Kinda...
<b> Bold Text </b>
<i> Italic Text </i>
Basically,
Slide 47 of 49HTML Structure
<!DOCTYPE html>
<html>
<head>
<!-- Stuff the browser needs -->
</head>
<body>
<!-- Everything the user sees -->
<h1>Hello, Twitch!</h1>
</body>
</html>
Slide 48 of 49Let's Code
Lab Time
Slide 49 of 49Homework
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
