PRESENTERS
MAGGIE MOSS
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...
IT'S NOT LIKE THIS.
CODING IN REAL LIFE...
Sorry.
SO, WHAT IS CODING?
Where does HTML come in?
START
WITH
CONTENT
THEN ADD CONTEXT
WHEN YOU BUILD A HOUSE...
CSS is appearance
TOO MUCH CSS
choose your flavour
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 (e.g. italicize it).
<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?
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" />
ALT-Ernate FACTS
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 ...
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?
soon, you will be
getting Access to
the html500 followup site!
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
dear attendees,
Thank you!
kind regards,
DON BURKS & MAGGIE MOSS
HTML500 - 2017 - Toronto
By Don Burks
HTML500 - 2017 - Toronto
Morning presentation
- 1,274