PRESENTERS

JUSTINE MATSALLA

@justinem

<= way cooler

DON BURKS

@don_burks

Today's Schedule

Morning Lesson (~1.5H)

Build Your Page!

Publish Your Page (4:00 PM)

... PROFIT

WE HAVE TWO "SHORT" LESSONS THIS MORNING

LESSON #1

OVERVIEW + HTML

LESSON #2

CSS

LESSON #1

OVERVIEW + HTML

What is coding?

And what does it mean to be a coder?

CODING IN THE MOVIES...

IT'S NOT LIKE THIS.

CODING IN REAL LIFE...

* - Actual things do not fly out of the screen.
Sorry.

SO, WHAT IS CODING?

The art of solving a problem

with steps

so simple that even

a computer can do them.

Where does HTML come in?

How does it compare to CSS ?

START

WITH

CONTENT

THEN ADD CONTEXT

HTML is the structure of your content.

It gives context to your content.

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.

<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

OK
We've learned about tags and elements.

What's next?

NESTING

Nesting

Placing an HTML element inside another HTML element.

Previously, we saw <em> tags inside our <p> tag.

Nesting shapes how the resulting web page is structured.

This gives context to our content.

How do we write code?

Why don't we just code in Microsoft Word?

LEt's take a look at ATOM

What does HTML look like inside a code editor?

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_kitteh.jpg" />

ALT-Ernate FACTS

If we add the alt attribute to our images,

Then we are providing an alternative

For when they cannot be displayed.

<img src=" http://images.com/cute_kitteh.jpg" alt="kitten!">

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

When we loaded our content earlier through

Atom, we saw the browser

making our content appear differently,

based on the tags we used.

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 an element created with <em> tags.

font-size: 20px; <---- Then we're telling CSS how to style the font-size property.

color: blue; <---- This changes the text colour.

}

We place groups of CSS rules between curly brackets.

To assign CSS properties to a specific HTML element, we must have a way of referencing that specific element.

Done by using an HTML attribute that assigns it a unique name. The attribute that does this is called "ID".

What does an ID do?

how do you Add an id?

Let's add an ID to our sample HTML

code in Atom.

okay, what about in css?

When we start a selector with a pound-sign,

we tell CSS to target elements with a given id:

#bio {

font-size: 20px;

color: blue;

}

ID vs class attribute

Use class instead of id when

you have more than one element

that shares those properties

An id should be unique to the page

Only use it on one-of-a-kind elements

A class should be used more frequently

how do we visualize classes?

class attribute

Instead of # symbol, we use a . (period) symbol

.special {

color: tomato;

}

This will target the following element:

What else can you do with css?

CSS3

stylistic control

Gradients

Linear

Radial

Repeating Linear

Repeating Radial

Animations

Fine, JUSTINE.

But what about interactivity?

Javascript to the rescue!

deadly when
used in combination
with html5 & css3

Example:

without js we wouldn't have ...

What ELSE CAN
WE DO WITH
Web Technologies?

not just for the web

anymore!

Desktop Apps!

Atom

Mobile Apps!

React Native

Adobe Cordova/PhoneGap

Apache Cordova / Adobe PhoneGap

React Native

"WHy should
We learn to
code?"

What it takes

1. Curiosity

2. Drive

3. Persistence

4. Enjoyment

What's Next?
where do YOU go AFTER TODAY?

soon, you will be

sent the

html150 followup

Materials!

FREE(ISH) ONLINE TOOLS

The best way to learn is:

tinker

&

Build stuff

WHAT'S NEXT?

TODAY YOU ARE BUILDING:

PROFILE PAGE

IT'S NORMAL TO ENCOUNTER BUGS.

Debugging is a natural part of writing code.

Ask your mentors for help! That's why they're here :)

Also: Developers look stuff up ALL the time. #thxgoogle

RUBBER DUCK DEBUGGING

BTW

AFTER YOU're DONE YOU

can publish your page

Call a mentor over

when you are ready!

GET READY TO PAIR UP

We encourage Pair Programming.

dear attendees,

Thank you!

kind regards,

DON BURKS & JUSTINE MATSALLA

HTML150 - 2017 - Calgary

By Don Burks

HTML150 - 2017 - Calgary

Morning presentation

PRESENTERS

Today's Schedule

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...

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

Let's LOOK AT SOME CODE

<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

Nesting

How do we write code?

LEt's take a look at ATOM

Attributes

Attributes

ATTRIBUTE EXAMPLE

SRC Attribute

ALT-Ernate FACTS

let's change gears

LESSON #2

css

browsers already have css

NOW LET'S CREATE THE CSS

What does an ID do?

how do you Add an id?

okay, what about in css?

ID vs class attribute

how do we visualize classes?

class attribute

What else can you do with css?

CSS3

stylistic control

Animations

Fine, JUSTINE.

But what about interactivity?

Javascript to the rescue!

deadly whenused in combinationwith html5 & css3

without js we wouldn't have ...

What ELSE CANWE DO WITH Web Technologies?

not just for the web

anymore!

Desktop Apps!

Mobile Apps!

"WHy should We learn tocode?"

What it takes

What's Next?where do YOU go AFTER TODAY?

soon, you will be

sent the

html150 followup

Materials!

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

There are many types of HTML elements, including:

<SECTION>, <HEADER>, <STRONG>, <FOOTER>

EACH ELEMENT HAS ITS OWN SPECIFIC ROLE

deadly when
used in combination
with html5 & css3

What ELSE CAN
WE DO WITH
Web Technologies?

"WHy should
We learn to
code?"

What's Next?
where do YOU go AFTER TODAY?