PRESENTER
DON BURKS
@don_burks
Head Instructor
Lighthouse Labs
https://donburks.com
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 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 ?
THEN ADD CONTEXT
HTML is the structure of your content.
It gives context to your content.
WHEN YOU BUILD A HOUSE...
CSS is appearance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3504991/Fresh-Violet-House-Interior-12.jpg)
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!">
HTML defines the elements on a webpage
CSS defines the design of those elements.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kvirani/images/1012119/house-icon.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266466/images/3487101/Canada_ID.jpeg)
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:
<li class="special">Text here</li>
What else can you do with css?
CSS3