#100Devs HTML - Even More Basics (cohort 2)

Class 03 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

Skip to first slide
Slide 1 of 55

HTML - Even More Basics

Leon Noel

"The bottom line is: I'm a crook with a deal
If my record don't sell, I'ma rob and steal"

#100Devs

Slide 2 of 55

Agenda

Slide 3 of 55

Questions

About last class or life

Slide 4 of 55

Checking In

Like and Retweet the Tweet

!checkin

Slide 5 of 55

Submitting Work

Take a screenshot of your Coursera Completion

Upload to https://imgbb.com

Submit The Link Here: https://forms.gle/9FYrUMFKMk4MpEZG7

Slide 6 of 55

Be Careful In These Streets!

Slide 7 of 55

A little bit of trust

I'm working on earning it

Slide 8 of 55

Houses? Next Week!

Slide 9 of 55

Alumni Twitter Space

Next Week - Friday Jan. 28th 6:00pm ET

Slide 10 of 55

Want Friends? This Week

Slide 11 of 55

Twitch & Discord Changes

Slide 12 of 55

Make Sure You Join #100Devs

If your username is still gray, click today!

Slide 13 of 55

Please Use Search

Slide 14 of 55

Title Text

Slide 15 of 55

Please don't ask to ask

Slide 16 of 55

Please Read The Channel Headings

Slide 17 of 55

Please Pay Attention To Messages From The Mods

Slide 18 of 55

Please Use Threads!

In Help Channels, Not Replies! 

Slide 19 of 55

You Have The Power To Help

Jump in those threads please!

Slide 20 of 55

We Will Review Everything

🙏🏽🚫🙏🏽 Please avoid full code review requests! 🙏🏽🚫🙏🏽

Ask Questions if unsure!

Slide 21 of 55

Please Leave Voice Channels

When done chatting, so you don't get got!

Slide 22 of 55

Some New Channels

New Need Help

Homework Help

Catch Up Crew

Slide 23 of 55

Please Keep In Mind The Server Rules

Slide 24 of 55

Trough Of Sorrow

Slide 25 of 55

Homework Is Just

A First Pass

Slide 26 of 55

Manage Frustration

Consistency 

Taking Care Of Yourself

 

Slide 27 of 55

Did You Make A Plan?

Slide 28 of 55

Active Recall

Ali Abdaal: https://youtu.be/ukLnPbIffxE

Slide 29 of 55

Resetting Forgetting Curve

https://www.pearsoned.com/three-simple-research-based-ways-to-ace-a-test

Slide 30 of 55

What is the internet?

Slide 31 of 55

The Golden Rule

SEPERATION OF CONCERNS

Slide 32 of 55

HTML SYNTAX

(Spelling And Grammer Rules)

source: mdn

Slide 33 of 55

Why follow the rules?

Slide 34 of 55

Time For Some

TAGS

not that kind...

Slide 35 of 55

Heading Elements (tags)

<h1> MOST IMPORTANT </h1>
<h2> .............. </h2>
<h3> .............. </h3>
<h4> .............. </h4>
<h5> .............. </h5>
<h6> .............. </h6>

SIZE DOES NOT MATTER

Slide 36 of 55

Other Text Elements

<p> Paragraph </p>
<span> Short text </span>
<pre> Preserves Whitespace </pre>
Slide 37 of 55

Nerd Fights

<br>
<hr>
Slide 38 of 55

Assisted Device

Elements

<em> Stress Emphasis </em>
<strong> Strong Importance </strong>
Slide 39 of 55

Ordered List

<ol>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ol>
Slide 40 of 55

Unordered List

<ul>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>
Slide 41 of 55

Containing Elements

<div> </div>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>
Slide 42 of 55

Deprecated Elements

<blink>
<marquee>
  
Kinda...
<b> Bold Text </b>
<i> Italic Text </i>

Basically, 

Slide 43 of 55

Let's Review

Brownie Code

Slide 44 of 55

HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <!-- Stuff the browser needs -->
  </head>
  <body>
    <!-- Everything the user sees -->
    <h1>Hello, Twitch!</h1>
  </body>
</html>
Slide 45 of 55

Time For Some

New TAGS

not that kind...

Slide 46 of 55

Navigation

<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 47 of 55

How do we get data from users?

Slide 48 of 55

Forms

<form action="confirmation.html" method="post">
  <!-- Data collection elements go here -->
</form>
Slide 49 of 55

Input Types

MDN has full list

Slide 50 of 55

Let's Code

A simple form

Slide 51 of 55

Progressive 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 52 of 55

Let's Code

BBC Website

Slide 53 of 55

Let's Code

Khan Academy Website

Slide 54 of 55

Let's Code

TechCrunch Website

Slide 55 of 55

Homework?

Read: https://learn.shayhowe.com

Read: https://learnlayout.com