Follow Along

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

or move through slides using your keyboard on your own at:
https://slides.com/johndavidhunt/theironyardcolakids

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/

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">

My Locker

Project

http://codepen.io/collection/XoLeJo/
In this project we are going to try and make a simple landing page for our own user profile. 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 for a background,
   or use this: https://unsplash.it/1200/?random 
    
2. Name + Title
   Type your name, and a title (such as 'Online Locker')
    
3. List of Favorite Websites
   Make a list of addresses to your favorite sites online.
    
4. Type todays date and claim page as your own with 'copyright'. (&copy;)
    

First Phase
http://codepen.io/theironyardcolakids/pen/OXjkPp

1. <H1>
   Move the title into an h1 tag: <h1>Online Locker</h1>
    
2. <H2>
   Put your name in an h2 tag: <h2>Mr Incredible</h2>
    
3. <img>
   be sure the image is working
    
4. <ul>
   list your sites in an 'un-ordered list' with 'list-items' and anchors/links to the site.
    
5. (Optionally) Add <header>, <main>, and <footer> 

Second Phase
http://codepen.io/theironyardcolakids/pen/EyvLjr

<!DOCTYPE html>
<html>
<head>
	<title>Iron Yard Class Demo</title>
</head>
<body>
	<header>
		<h1>Online Locker</h1>
		<h2>John Hunt</h2>
	</header>
	
	<main>
	    <img src="https://unsplash.it/1200/?random">
                <ul>
        	    <li><a href="https://css-tricks.com">https://css-tricks.com</a></li>
		    <li><a href="http://codepen.io">http://codepen.io</a></li>
		    <li><a href="http://shupe.net">http://shupe.net</a></li>
		    <li><a href="http://pbskids.org">http://pbskids.org</a></li>
    		    <li><a href="http://johndavidhunt.com">http://johndavidhunt.com</a></li>
    		    <li><a href="https://www.youtube.com/user/BYUTelevision">Studio C</a></li>
        	</ul>
	</main>

	<footer>
		July 7, 2016 Copyright JohnDavidHunt
	</footer>
	<!-- by JdH -->
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Iron Yard Class Demo</title>
</head>
<body>
    <h1>Online Locker</h1>
    <h2>John Hunt</h2>
	
    <img src="https://unsplash.it/1200/?random">
     
    <ul>
        <li><a href="https://css-tricks.com">https://css-tricks.com</a></li>
	<li><a href="http://codepen.io">http://codepen.io</a></li>
        <li><a href="http://shupe.net">http://shupe.net</a></li>
	<li><a href="http://pbskids.org">http://pbskids.org</a></li>
        <li><a href="http://johndavidhunt.com">http://johndavidhunt.com</a></li>
    	<li><a href="https://www.youtube.com/user/BYUTelevision">Studio C</a></li>
    </ul>
	
	July 7, 2016 Copyright JohnDavidHunt
	<!-- by JdH -->
</body>
</html>

1. Change the image so it is the background for the whole page
    
2. Test all of your links and be sure they are working. Organize them into separate lists as desired. Label each list, including the first, (such as 'Favorites')
    
3. Change the color of the font, and add either background color behind text, or a text-shadow (in CSS)
   
    

Third Phase
http://codepen.io/theironyardcolakids/pen/zBdjGZ

<!DOCTYPE html>
<html>
<head>
	<title>Iron Yard Class Demo</title>

	<style type="text/css">

		html { 
			/* centered random background image from unsplash.it */
			/* https://css-tricks.com/perfect-full-page-background-image */
			/* https://unsplash.it */
			background: url(https://unsplash.it/1200/?random) no-repeat center center fixed; 
		}
			
		body,main {
			/*adjust layout/width*/
			display:inline-block;
			padding: 12px;
			/*make text readable, hopefully*/
			background-color: rgba(235, 245, 255, 0.55);
			text-shadow: 0px 0px 32px rgba(255, 255, 255, 1);
			
		}
	</style>

</head>
<body>
	<header>
		<h1>Online Locker</h1>
		<h2>John Hunt</h2>
	</header>
	
	<main>
		<!-- <img src="https://unsplash.it/1200/?random"/> -->
        	<h3>Favorites</h3>
        	<h4>Fun Stuffs</h4>
        	<ul>
        		<li><a href="http://shupe.net">http://shupe.net</a></li>
			<li><a href="http://pbskids.org">http://pbskids.org</a></li>
			<li><a href="http://johndavidhunt.com">http://johndavidhunt.com</a></li>
			<li><a href="https://www.youtube.com/user/BYUTelevision">Studio C</a></li>
        	</ul>
		
                <h4>Work Stuffs</h4>
        	<ul>
        		<li><a href="https://css-tricks.com">https://css-tricks.com</a></li>
			<li><a href="http://codepen.io">http://codepen.io</a></li>
        	</ul>
	</main>

	<footer>
		July 7, 2016 Copyright JohnDavidHunt
	</footer>
	<!-- by JdH -->
</body>
</html>

Still going?

1. Make Date dynamic/change with JS
    
2. Link page to Profile Page (and complete Profile Page)

Fourth Phase
http://codepen.io/theironyardcolakids/pen/AXoavm

sample code on next page (down)

<!DOCTYPE html>
<html>
<head>
	<title>Iron Yard Class Demo</title>

	<style type="text/css">

		html { 
			/* centered random background image from unsplash.it */
			/* https://css-tricks.com/perfect-full-page-background-image */
			/* https://unsplash.it */
			background: url(https://unsplash.it/1200/?random) no-repeat center center fixed; 
			background-size: cover;
		}
			
		body,main {
			/*adjust layout/width*/
			display:inline-block;
			padding: 12px;
			/*make text readable, hopefully*/
			background-color: rgba(235, 245, 255, 0.55);
			text-shadow: 0px 0px 32px rgba(255, 255, 255, 1);
			
		}
	</style>

	<script type="text/javascript">
	// http://codepen.io/johndavidhunt/pen/grxZKa

		// use 'setinterval' a builtin javascript function
		// it runs code at the interval you specify 
		setInterval(

		  // a custom anonymous function
		  // this function includes the code we want to run every interval
		  function() {
		     // the main code to run
		     // this calls the document, 
		     // then findes the element by id
		     // then sets contents to the time
		    document.getElementById("timeBox").innerHTML=new Date()
		  }, 
		  
		  // Interval for code to run
		  // 1000 miliseconds = 1 second
		  1000
		);

	</script>

</head>
<body>
	<header>
		<h1>Online Locker</h1>
		<h2>John Hunt</h2>
	</header>
	
	<main>
		<!-- <img src="https://unsplash.it/1200/?random"/> -->
        	<h3>Favorites</h3>
        	<h4>Fun Stuffs</h4>
        	<ul>
        		<li><a href="http://shupe.net">http://shupe.net</a></li>
				<li><a href="http://pbskids.org">http://pbskids.org</a></li>
				<li><a href="http://johndavidhunt.com">http://johndavidhunt.com</a></li>
				<li><a href="https://www.youtube.com/user/BYUTelevision">Studio C</a></li>
        	</ul>
			<h4>Work Stuffs</h4>
        	<ul>
        		<li><a href="https://css-tricks.com">https://css-tricks.com</a></li>
				<li><a href="http://codepen.io">http://codepen.io</a></li>
        	</ul>
	</main>

	<footer>
		<p><a href="profile.html">My Profile Page</a></p> 
		<p> © Copyright JohnDavidHunt</p>
		<p id="timeBox"></p> 
	</footer>
	<!-- by JdH -->
</body>
</html>

About Me

Project

http://codepen.io/collection/nYWeda/
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 : 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
http://codepen.io/theironyardcolakids/pen/KrvRrR

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
http://codepen.io/theironyardcolakids/pen/JKyvbP

<!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
http://codepen.io/theironyardcolakids/pen/OXjkWg

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
http://codepen.io/theironyardcolakids/pen/rLzvwQ

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?

go back and do the 'Locker' project and link to it in this Profile project.

let me show you