Khurram Virani
Head Instructor @ Lighthouse Labs. Vancouver, BC
PRESENTERS
KHURRAM VIRANI
@viranik
<= way cuter
JOSH BORTS
@joshborts
#PLZFOLLOWJOSH
@joshborts
Today's Schedule
Morning Lesson (1H)
Build Your Page!
Publish Your Page (3:00 PM)
... PROFIT
Career Fair (3:15 PM)
WE HAVE TWO SHORT LESSONS THIS MORNING
LESSON #1
OVERVIEW + HTML
LESSON #2
CSS
What is coding?
And what does it mean to be a coder?
CODING IN REAL LIFE VS MOVIES
Where does HTML come in?
How does it compare to CSS ?
TOO MUCH CSS
choose your flavour
How do we write code?
LEt's take a look at brackets
What does a Code Editor look like?
How are Webpages built?
boxes, little boxes on the hillside
How does HTML work?
<>
These are called angle brackets
Text inside of angle brackets is an HTML tag.
Everything else is just text.
Boxes are called Elements
<p>This is normal text surrounded by HTML tags .</p>
Note how the closing tag has a forward slash.
This forms a paragraph Element .
Example time
Let's pick apart SOME CODE
<h1>Josh Borts</h1> <p> <em>Bio:</em> Co-founder of Lighthouse Labs <br> <em>E-mail:</em> josh@lighthouselabs.ca </p>
<h1>
: Defines a "heading 1' with large text.
<p>
: Creates a paragraph of text.
<em>: Emphasizes text (e.g. italicize it).
<br>
: Triggers a new line.
There are many types of HTML elements, including:
<SECTION>, <HEADER>, <STRONG>, <FOOTER>
EACH ELEMENT HAS ITS OWN SPECIFIC ROLE
OK
We've learned about tags and elements.
We've learned about tags and elements.
What's next?
NESTING
Nesting
Place an HTML element inside another HTML element.
Previously, our <em> tags were inside our <p> tag.
Shapes how the resulting web page is structured.
Attributes
Attributes give elements superpowers
additional information.
Attributes
Attributes are placed inside an element's opening tag.
They are placed after the tag's name.
They are structured as follows: attribute="value"
ATTRIBUTE EXAMPLE
Here's a normal header element:
<header>I'm a sentence.</header>
Here's a header element with a title attribute:
<header title="My Cool Header">I'm a sentence.</header>
SRC
Attribute
The
src
attribute is how we get
CAT PICTURES
Used within the <img> element
<img
src="
http://images.com/cute_kitten_charlie.jpg">
LESSON #2
css
HTML defines the elements on a webpage
CSS defines the design of those elements.
Structure: 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.
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
CSS consists of rules. CSS rules are simple:
header {
color: green;
}
Just like with HTML attributes, we simply assign values to properties.
DIVING DEEPER INTO THE CSS
header { <---- Opening curly bracket.
text-align: center; <---- We use ":" instead of "=".
color: green; <---- We don't put the value inside quotes.
} <---- Closing curly bracket.
em { <---- We're targeting all emphasized text on the page.
font-size:
20; <---- Then we're telling CSS how to style the font-size property.
color: blue;
}
We place groups of CSS rules one after another.
show me josh!!
identifying elements
Problem: Targeting a specific element
Use an HTML attribute that assigns it a unique name.
The attribute that does this is called id.
Should be unique to the page.
<p id="welcome">Welcome to my webpage.</p>
In CSS we can now target that element using #
#welcome {
font-size:
20;
color: blue;
}
classification of Common elements
Problem: targeting all cat images!
Use another HTML attribute that assigns it a common name.
The attribute that does this is called class.
<img src="kitten.jpg" class="cat">
<img src="tony_the_tiger.jpg" class="cat">
In
CSS
we can now target that element using
. (a period)
.cat {
border: red;
}
One
MORE
TIME,
PLEASE.
What else can you do with css?
tons more
stylistic control
Gradients
Linear
Radial
Repeating Linear
Repeating Radial
Animations
Fine.
But what about interactivity?
Javascript to the rescue!
deadly when
used in combination
with html5 & css3
Example:
without js we wouldn't have ...
OR
OR
the future of html & css
it's not just for the web
anymore!
Desktop Apps!
Brackets
Apache Cordova / Adobe PhoneGap
Everyone
should
learn
to
code
What it takes
1. Curiosity
2. Drive
3. Persistence
4. Enjoyment
What's Next?
where do i go from here?
The #HTML500 Booklet
FREE(ISH) ONLINE TOOLS
The best way to learn this:
tinker
&
Build stuff
WHAT'S NEXT?
YOU HAVE TWO OPTIONS TODAY!
YOU CAN BUILD A:
RESUME PAGE
OR!
COMPANY PAGE
IT'S NORMAL TO ENCOUNTER BUGS.
Debugging is a natural part of writing code.
Ask your teachers for help! That's why they're here :)
Also: Developers look stuff up ALL the time. #thxgoogle
GET READY TO PAIR UP
We encourage Pair Programming.
BTW...
AFTER YOU're DONE publish your page
http://publisher.thehtml500.com/
ATTN: future coders!
Thank you
NOW GET CODING!
khurram virani & JOSH BORTS
@viranik & @joshborts
#PLZFOLLOWJOSH
HTML500 - 2015 - Toronto
By Khurram Virani
HTML500 - 2015 - Toronto
Morning presentation
- 2,268
