theironyardcolakids
 

image by @giodif for
ConvergeSE.com/2012

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/

Long Time Ago...

History of the Internets

 

More Technical Stuffs


Lots of moving pieces to the www on the internet

Layers and Technology

 

 

Getting Ahead of ourselves

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

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

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

Webpage

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?

Websites

let me show you

JohnDavidHunt

@johndavidhunt

johndavidhunt.com

mailto:johndavidhunt@gmail.com

theironyardcolakids - BACKUP

By John David Hunt

Made with Slides.com

theironyardcolakids - BACKUP

  • 827

More from John David Hunt