![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3579121/HTML500-Slide-2017.001.jpeg)
PRESENTERS
SARAH VENESS
Today's Schedule
... PROFIT
WE HAVE TWO "SHORT" LESSONS THIS MORNING
LESSON #1
OVERVIEW + HTML
LESSON #2
CSS
LESSON #1
OVERVIEW + HTML
What is coding?
CODING IN THE MOVIES...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3465051/pasted-from-clipboard.png)
IT'S NOT LIKE THIS.
![](https://68.media.tumblr.com/22e446baedd3f2b7212f6ca843ed1a17/tumblr_nzf1oixiU71r6v8t0o1_500.gif)
CODING IN REAL LIFE...
![](http://media.tumblr.com/dea71bbea991ffa214738f91e9e3d389/tumblr_inline_mlgjxy2KjX1qz4rgp.gif)
Sorry.
SO, WHAT IS CODING?
Where does HTML come in?
START
WITH
CONTENT
THEN ADD CONTEXT
WHEN YOU BUILD A HOUSE...
![](https://www.icreatables.com/images/framingimgs/framing-walls/frame-interior-walls-top.jpg)
CSS is appearance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3504991/Fresh-Violet-House-Interior-12.jpg)
TOO MUCH CSS
choose your flavour
![](https://raw.githubusercontent.com/alrra/browser-logos/master/src/main-desktop-browser-logos.png)
How does HTML work?
<>
These are called angle brackets
Text inside of angle brackets is an HTML tag.
Everything else is just text.
<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.
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.
<p> : Creates a paragraph of text.
There are many types of HTML elements, including:
<SECTION>, <HEADER>, <STRONG>, <FOOTER>
EACH ELEMENT HAS ITS OWN SPECIFIC ROLE
We've learned about tags and elements.
Nesting
How do we write code?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/1012100/deargodmakeitwork.gif)
LEt's take a look at ATOM
Attributes
Attributes
ATTRIBUTE EXAMPLE
Here's a normal header element:
SRC
Attribute
The
src
attribute is how we get
CAT PICTURES
Used within the < img > element
<img
src="
http://images.com/cute_kitteh.jpg" />
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/1012248/Cute_kitten.p.jpg)
ALT-Ernate FACTS
let's change gears
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3505008/pasted-from-clipboard.png)
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?
![](https://s-media-cache-ak0.pinimg.com/originals/49/13/e4/4913e43916b331b3ac47d4214a4d82b2.jpg)
class attribute
What else can you do with css?
CSS3
stylistic control
Animations
Fine, SARAH.
But what about interactivity?
Javascript to the rescue!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236665/JavaScript-logo.png)
deadly when
used in combination
with html5 & css3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236668/98fea3f6ad8eff5be7a41a8264f1d0cb.jpg)
without js we wouldn't have ...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236670/fb-like2.png)
![](https://cdn0.vox-cdn.com/thumbor/cr8fhGxG6mifMOMAEPyS2M_Az_I=/800x0/filters:no_upscale()/cdn0.vox-cdn.com/uploads/chorus_asset/file/6678919/10478570_10152214521608870_2744465531652776073_n.0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236677/gmaps.png)
What ELSE CAN
YOU DO WITH
html & css?
not just for the web
anymore!
Desktop Apps!
![](http://cannabisinvestorsummit.com/wp-content/uploads/2015/05/slack.png)
Mobile Apps!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/1012197/Screen_Shot_2015-01-23_at_2.57.07_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236947/cordova_bot.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3487186/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3487189/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3487190/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3487193/pasted-from-clipboard.png)
"WHy should
We learn to
code?"
What it takes
What's Next?
where do i go AFTER TODAY?
soon, you will be
getting Access to
the html500 followup site!
FREE(ISH) ONLINE TOOLS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236680/codecademy-logo-white.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236681/codeschool_logo_NO_BG.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236682/CodeOrgLogo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/236683/th-logo-white.png)
The best way to learn is:
tinker
&
Build stuff
WHAT'S NEXT?
RUBBER DUCK DEBUGGING
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3505672/pasted-from-clipboard.png)
IT'S NORMAL TO ENCOUNTER BUGS.
BTW
AFTER YOU're DONE YOU
can publish your page
GET READY TO PAIR UP
dear attendees,
Thank you!
kind regards,
DON BURKS & SARAH VENESS
HTML500 - 2017 - Vancouver
By Don Burks
HTML500 - 2017 - Vancouver
Morning presentation
- 935