The Iron Yard - Tampa Kids HTML Course

Introduction

• My name is Katherine Trammell
  • Who am I?
  • What do I do?
• Meet the Teaching Assistant(s)
• What the final project will look like (http://ktrammell95.github.io/tiy-kids/)

Topics we will cover during this course

• What is HTML?
• What is CSS?
• How to create an HTML and CSS documents using Atom
• How to see your work using Chrome or another web browser
• What are HTML tags/ elements?
• Building a webpage from scratch
• How to style a website using CSS
• What tools are out there to help you learn?

Week 1

• What is HTML?

  • HTML is HyperText Markup Language
  • Markup is what HTML tags do to the text inside them.
  • Tags are what separate normal text from HTML code.
  • Tags themselves don’t appear when you view your age through a browser, but their effects do.

• What is CSS?

  • CSS stands for Cascading Style Sheet
  • A style sheet language used for describing the look and formatting of a document written in a markup language

• Learn how Legos and coding are alike

• Introduction to CodePen.io (http://codepen.io/)

• Learn about basic tags to get us started

• Example of how to design a webpage

• Homework

  • Decide what topic you would like to build your page about
    • Your family
    • Your pet
    • Your favorite sport/ activity
    • Your favorite food
    • Make it about something you enjoy!
  • Think about colors you might like to use
    • Need inspiration try:
      • W3C Color Picker, http://www.w3schools.com/tags/ref_colorpicker.asp
      • Colourlovers, http://www.colourlovers.com/

Week 2

• Quick review of Week 1
• Reference site (http://ktrammell95.github.io/tiykids-reference/)
• Getting started on our website
• Lorem Ipsum
• Intro to IDs and Classes

Week 3

• Quick review of Week 2

Week 4

• Quick review of Week 3

Week 5

• Quick review of Week 4
• Finishing up our page

Tools You Can use

• Tags, Styling and more

  • W3C, http://www.w3schools.com/
  • Reference site, http://ktrammell95.github.io/tiykids-reference/

• Online coding without Atom or another program

  • CodePen.io, http://codepen.io/
  • JSbin, http://jsbin.com/

• Shortening links

  • Tiny URL, http://tinyurl.com/

• Picking Colors

  • W3C Color Picker, http://www.w3schools.com/tags/ref_colorpicker.asp
  • Colourlovers, http://www.colourlovers.com/
  • Color picker: http://www.colorpicker.com/

• Getting fake text to use while you work on your page

  • Lorem Ipsum, http://www.lipsum.com/
  • Cat Ipsum, http://www.catipsum.com/
  • Bacon Ipsum, http://baconipsum.com/
  • Veggie Ipsum, http://veggieipsum.com/
  • Baseball Ipsum, http://baseballipsum.apphb.com/
  • Pirate Ipsum, http://pirateipsum.me/
  • Space Ipsum, http://spaceipsum.com/

• Getting fancy with Styling / CSS Generators

  • Box-shadows/ Border-Radius/ Gradients and more, http://www.cssmatic.com/
  • Border Radius/ Box Shadow/ Text Shadow/ RGBA/ and more, http://css3generator.com/
  • Gradients, http://www.colorzilla.com/gradient-editor/
  • CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site, http://enjoycss.com/
  • Button generator, http://css3buttongenerator.com/

• Online Learning

  • Free Code Camp, http://freecodecamp.com/
  • Pluralsight Basic HTML for Kids, http://www.pluralsight.com/courses/teaching-kids-basic-html