Slide 1 of 43HTML - More Basics
Leon Noel
NEVER lost a thumb war.
#100Devs
Slide 2 of 43Agenda
- Questions?
- Review - Client Server Model
- Review - HTML Tags
- Code - Brownie Recipe
- Learn - New HTML Tags
- Learn - Progressive Enhancement
- Code - Newspaper Time
Slide 3 of 43
Questions
About last class or life
Slide 4 of 43Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 43Want Friends? Next Week
Slide 6 of 43Twitch & Discord Changes
Slide 7 of 43#ask-leon
Slide 8 of 43Submitting Work
Always due a week later
First Google Forms and Then Github
Slide 9 of 43Trough Of Sorrow
Slide 10 of 43Let Me Tell You A Secret
Slide 11 of 43Community
!discord (leonnoel.com/discord)
Slide 12 of 43
Manage Frustration
Consistency
Taking Care Of Yourself
Slide 13 of 43Make A Plan
Slide 14 of 43Tell Someone
Slide 15 of 43NOW TELL EVERYONE
Slide 16 of 43Active Recall
Ali Abdaal: https://youtu.be/ukLnPbIffxE
Slide 17 of 43Resetting Forgetting Curve
https://www.pearsoned.com/three-simple-research-based-ways-to-ace-a-test
Slide 18 of 43What is the internet?
Slide 19 of 43The Golden Rule
SEPERATION OF CONCERNS
- HTML = Content / Structure
- CSS = Style
- JS = Behavior / Interaction
Slide 20 of 43
HTML SYNTAX
(Spelling And Grammer Rules)
source: mdn
Slide 21 of 43LET'S CODE
#100Devs About Page
Slide 22 of 43Why follow the rules?
Slide 23 of 43
Time For Some
TAGS
not that kind...
Slide 24 of 43Heading Elements (tags)
<h1> MOST IMPORTANT </h1>
<h2> .............. </h2>
<h3> .............. </h3>
<h4> .............. </h4>
<h5> .............. </h5>
<h6> .............. </h6>
SIZE DOES NOT MATTER
Slide 25 of 43Other Text Elements
<p> Paragraph </p>
<span> Short text </span>
<pre> Preserves Whitespace </pre>
Slide 26 of 43Nerd Fights
<br>
<hr>
Slide 27 of 43
Assisted Device
Elements
<em> Stress Emphasis </em>
<strong> Strong Importance </strong>
Slide 28 of 43Ordered List
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
Slide 29 of 43Unordered List
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
Slide 30 of 43Containing Elements
<div> </div>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>
Slide 31 of 43Let's Look At Some
Websites
Slide 32 of 43Deprecated Elements
<blink>
<marquee>
Kinda...
<b> Bold Text </b>
<i> Italic Text </i>
Basically,
Slide 33 of 43Let's Code
Lab Time
Slide 34 of 43HTML Structure
<!DOCTYPE html>
<html>
<head>
<!-- Stuff the browser needs -->
</head>
<body>
<!-- Everything the user sees -->
<h1>Hello, Twitch!</h1>
</body>
</html>
Slide 35 of 43
Time For Some
New TAGS
not that kind...
Slide 36 of 43Navigation
<nav>
<ul>
<li><a href="news.html">News</a></li>
<li><a href="sports.html">Sports</a></li>
<li><a href="weather.html">Weather</a></li>
</ul>
</nav>
Slide 37 of 43How do we get data from users?
Slide 38 of 43Forms
<form action="confirmation.html" method="post">
<!-- Data collection elements go here -->
</form>
Slide 39 of 43Input Types
- Text
- Password
- Tel
- Email
- Button
MDN has full list
Slide 40 of 43Let's Code
A simple form
Slide 41 of 43Progressive Enhancement
According to the United States Department of Commerce, about 22 million Americans--roughly 35% of the nation's rural residents--lack access to broadband.
(2017)
Slide 42 of 43Let's Code
A real site
Slide 43 of 43Homework?
