
Today's Schedule
... PROFIT
LESSON #1
OVERVIEW + HTML
WE HAVE TWO "SHORT" LESSONS THIS MORNING
LESSON #1
OVERVIEW + HTML
LESSON #2
CSS
CODING IN THE MOVIES...

What is coding?
CODING IN REAL LIFE...

Sorry.
IT'S NOT LIKE THIS.

Where does HTML come in?
SO, WHAT IS CODING?
THEN ADD CONTEXT
START
WITH
CONTENT
CSS is appearance

WHEN YOU BUILD A HOUSE...

choose your flavour

TOO MUCH CSS
<p>This is normal text surrounded by an HTML tag .</p>
A closing tag has a forward slash.
This whole thing is an HTML element.
How does HTML work?
<>
These are called angle brackets
Text inside of angle brackets is an HTML tag.
Everything else is just text.
There are many types of HTML elements, including:
<SECTION>, <HEADER>, <STRONG>, <FOOTER>
EACH ELEMENT HAS ITS OWN SPECIFIC ROLE
Let's LOOK AT SOME CODE
<h1>Don Burks</h1> <section> <p><em>Bio:</em> Head Instructor of Lighthouse Labs</p>
<p><em>E-mail:</em> don@lighthouselabs.ca</p> </section>
<h1> : Defines a heading on the page.
<section> : Creates a section of related content.
<em>: Emphasizes text (e.g. italicize it).
<p> : Creates a paragraph of text.
Nesting
We've learned about tags and elements.
How do we write code?

Attributes
LEt's take a look at ATOM
ATTRIBUTE EXAMPLE
Here's a normal header element:
Attributes
ALT-Ernate FACTS
SRC
Attribute
The
src
attribute is how we get
CAT PICTURES
Used within the < img > element
<img
src="
http://images.com/cute_kitteh.jpg" />

let's change gears

LESSON #2
css
HTML defines the elements on a webpage
CSS defines the design of those elements.
Structure: Remember our house's scaffolding?
Defining block of content that should go within another block, etc.
Design: Our house's paint and decor.
How those blocks should actually look:
what colour they are, how big they are, etc.
browsers already have css
CSS is a two-step process
1. It targets an element on a page.
2. It applies styles ("properties") to it.
Common CSS properties include:
color, font-size, text-align
NOW LET'S CREATE THE CSS
DIVING DEEPER INTO THE CSS
What does an ID do?
how do you Add an id?
okay, what about in css?
When we start a selector with a pound-sign,
we tell CSS to target elements with a given id:
ID vs class attribute
how do we visualize classes?

class attribute
What else can you do with css?
CSS3
stylistic control
Animations
Fine, MAGGIE.
But what about interactivity?
Javascript to the rescue!

deadly when
used in combination
with html5 & css3

without js we wouldn't have ...

/cdn0.vox-cdn.com/uploads/chorus_asset/file/6678919/10478570_10152214521608870_2744465531652776073_n.0.png)

What ELSE CAN
YOU DO WITH
html & css?
not just for the web
anymore!
Desktop Apps!

Mobile Apps!






"WHy should
We learn to
code?"
What it takes
What's Next?
where do i go AFTER TODAY?
FREE(ISH) ONLINE TOOLS




The best way to learn is:
tinker
&
Build stuff
WHAT'S NEXT?
IT'S NORMAL TO ENCOUNTER BUGS.
RUBBER DUCK DEBUGGING

BTW
AFTER YOU're DONE YOU
can publish your page
GET READY TO PAIR UP
Ryerson ADaPT
By Iskender Piyale-Sheard
Ryerson ADaPT
Morning presentation
- 1,156