Follow Along

https://slides.com/johndavidhunt/theironyardcolakids/live

Extra Resources

http://johndavidhunt.com/theironyardcolakids/tiyhtmlkids.pdf
 http://codepen.io/
 http://codepen.io/theironyardcolakids/
https://www.w3.org/
https://developer.mozilla.org/en-US/docs/Web
http://caniuse.com/
https://css-tricks.com/
http://learn.shayhowe.com/html-css/
http://thecodeplayer.com/
https://www.codeschool.com/
https://www.codecademy.com/
https://code.org/
https://www.theironyard.com
https://www.theironyard.com/locations/columbia.html
https://twitter.com/TheIronYard
http://www.meetup.com/The-Iron-Yard-Columbia/

History of the Internets

• http://www.20thingsilearned.com/en-US/
   
• http://www.storyoftheweb.org.uk/
   
• https://edu.hstry.co/timeline/1-the-history-of-the-web

More Technical Stuffs

Lots of moving pieces to the www on the internet

Layers and Technology

• FTP (File Transfer Protocol):
  ftp://speedtest.tele2.net/
   
• HTTP/HTTPS (HyperText Transfer Protocol Secure): https://aboutssl.org/how-ssl-certificate-work
   
• TLD (Top Level Domain):
  http://www.namecheap.com/

• Web Browser
  • Chrome, Safari, Firefox, IE
     
• Web Hosting
  • digitalocean.com
     
• Text/Code Editor
  • Sublime Text :
    http://www.sublimetext.com/
  • Caret :
    On chrome Store
     
• Files, Folders, etc

Hellow World

Hellow World!

IMG not OMG

https://unsplash.it/1000/

<img src="https://unsplash.it/1000/">

Vid

<iframe width="560" height="315" src="https://www.youtube.com/embed/Jv-QitdhQwQ" frameborder="0" allowfullscreen></iframe>

Codepen.io

http://codepen.io/theironyardcolakids/

theironyardcolakids

http is 2 cool!

HTML

HyperText Markup Language

Adding Content such as text and pictures

HTML Elements

• Image

  • <img src="https://unsplash.it/1000/">

• Video

  • <iframe width="560" height="315" src="https://www.youtube.com/embed/Jv-QitdhQwQ" frameborder="0" allowfullscreen></iframe>
    
    

• Text Content

  • ​<p>This is a paragraph</p>

  • <h1>My Heading</h1>

  • <h2>My subHeading</h2>

HTML Elements/Containers

• Div

  • <div>This would be a division of content</div>

• Span

  • <p>In my text I may want to mark just a <span>short span of words</span></p>
    

• More [HTML5] 

  • ​<header>This is a header area</header>

  • <main>Main content area perhaps</main>

  • <footer>copyright footer etc</footer>

  • <aside>tangent!</aside>

Misc

• UL - unordered list

  • <ul>
      <li>I'm first</li>
      <li>but we're not ordered</li>
      <li>he's got a point...</li>
    </ul>​
    

• OL - ordered list

  • <ol>
      <li>I'm first</li>
      <li>OK fine</li>
      <li>he's got a point...</li>
    </ul>​
    

• Links
  • ​<a href="http://google.com">GO TO GOOGLE</a>

CSS

Cascading Style Sheets

Styling Content, such as color

image from: wordpress.org

Misc Styling Properties

• color
  • color: red;
• background
• background-color
  • background-color: black;
• border
  • border: 3px solid green;
• height
  • height: 300px;
• width
  • width: 50%;

Styling Font

• font-family
  • font-family: cursive;
• font-size
  • font-size: 12px;

Google Fonts

https://fonts.google.com/ 

<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">

font-family: 'Baloo', cursive;

Box Model

Let's get funky.

1. Open your browser (Chrome) 
2. Right Click on a page and hit 'Inspect'
3. Look for the "box model" that looks like this 

Display and Layout

• Display
  • display: none;
  • display: block;
  • display: inline-block;
  • display: inline;
  • display: flex;
• Position
  • position: static;
  • position: relative;
  • position: absolute;
  • position: fixed;
• Top, Right, Bottom, Left

In document

<style type="text/css">
   body {
     background: green;
   }
</style>

Linked

<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">

About Me

Project

Let's jump right in. Here is a few steps that I'd like you to try and work through. Open a document in the editor and being making a webpage.

1. Image
   ​Let's grab an image of you (if you can find one)
     or this: https://api.adorable.io/avatars/285/email@example.com.png
    
2. Name
   Type your name
    
3. About
   Write a bit about yourself (it could be the two things that you shared earlier)
    
4. Link
   Make a link: <a href="http://example.com">My site</a>

First Phase

1. <H1>
   Move your name into an h1 tag: <h1>My Name</h1>
    
2. <p>
   put the bit about yourself into <p> tags
    
3. <img>
   be sure the image is working
    
4. <ul>
   list your hobbies in an <ul> below your <p>
    
5. background
   change background color (see next slide)

Second Phase

<!DOCTYPE html>
<html>

<head>
	
	<title>Iron Yard Class Demo</title>

	<style type="text/css">
		body {
			background: green;
		}
	</style>
	
</head>

<body>
	<header>
		<h1>Iron Yard Class Demo</h1>
	</header>
	
	<main>
		<p>My whole body should be green. From my header to my footer</p>
                
        	<ul>
	        	<li>soccer</li>
		        <li>family</li>
        	</ul>
	</main>

	<footer>
		<p>copyleft © JdH 2116;</p>
	</footer>

	<!-- by JdH -->
</body>

</html>

1. Center the image of you
    
2. Add border around one of the elements (you pick)
    
3. Change the font (size etc)

Third Phase

sample code on next page (down)

<!DOCTYPE html>
<html>
<head>
	<title>Iron Yard Class Demo</title>
	<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
	<style type="text/css">
		* {margin: 3em;}

		img {
		    display: block;
		    margin: 0 auto;
		}
		main {
			border: 4px solid black;
		    display: block;
			margin: 0 auto;
			width: 50%;
			padding: 12px;
		}
		h1, h2 {
			font-family: 'Baloo', cursive;
		}
	</style>
</head>
<body>
	<header>
		<h1>John Hunt</h1>
		<img src="https://api.adorable.io/avatars/285/johndavidhunt@gmail.com.png" alt="JohnHunt">
	</header>
	<main>
		<p>Yo this is me</p>
		<p>Yep, I'm John David Hunt</p>
	</main>
</body>
</html>

1. add more links in the middle of the paragraphs to link to topics you mention
    
2. add a footer (copyright etc)
    
3. embed a video

Fourth Phase

sample code on next page (down)

<!DOCTYPE html>
<html>
<head>
	<title>Iron Yard Class Demo</title>
	<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
	<style type="text/css">
		img,header,main,footer,h1 {margin: 3em;}

		img {
		    display: block;
		    margin: 0 auto;
		}
		main {
			border: 4px solid black;
		    display: block;
			margin: 0 auto;
			width: 80%;
			padding: 12px;
		}
		h1, h2 {
			font-family: 'Baloo', cursive;
		}
	</style>
</head>
<body>
	<header>
		<h1>John Hunt</h1>
		<img src="https://api.adorable.io/avatars/285/johndavidhunt@gmail.com.png" alt="JohnHunt">
	</header>
	<main>
		<p>Yo this is <a href="https://about.me/johndavidhunt">me</a></p>
		<p>Yep, I'm <a href="http://johndavidhunt.com">John David Hunt</a></p>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/Jv-QitdhQwQ" frameborder="0" allowfullscreen></iframe>
	</main>
	<footer>
		copyright © JdH 2016;
	</footer>
</body>
</html>

Still going?

Still going?

let me show you