Slide 1
Slide 1 text
Summer 2015
Intro to Intro to HTML, CSS and Javascript
Slide 2
Slide 2 text
“The journey of a thousand
miles begins with one step.”
- Lao Tzu, Tao Te Ching | Chinese Philosopher 6th century BC
A journey of a thousand li [Chinese mile] starts beneath one's feet
Slide 3
Slide 3 text
HTML, CSS & Javascript
A high level overview
Slide 4
Slide 4 text
HTML CSS Javascript
HyperText Markup Language Cascading Style Sheets Client-side programing language
A quick overview
HTML is the structure and
backbone of your webpage
CSS allows you to control the
design and layout
Javascript provides
interaction & functionality
Slide 5
Slide 5 text
HTML CSS
JS
A traditional breakdown
Slide 6
Slide 6 text
HTML
HyperText Markup Language
Slide 7
Slide 7 text
HTML Basics
Structure & Tags
Tags are the primary way to control HTML.
The almost always start with an opening tag:
and end with a closing tag:
Structure Tags
Slide 8
Slide 8 text
Always use a Doctype
A document type
declaration, or DOCTYPE,
is an instruction that
associates a particular
SGML or XML document
(for example, a webpage)
with a document type
definition (DTD)
With HTML5 this almost
doesn’t matter anymore.
Just use
Slide 9
Slide 9 text
HTML wrapper
There are always two parts
to an HTML file: the head
and the body.
Slide 10
Slide 10 text
What goes in the head?
The head is the control
center for your page.
It contains information
about your page like the
page title, your page
description, and what
external files (CSS & JS)
you are going to require.
Slide 11
Slide 11 text
What should your page display?
The body tag contains all
the information that you
want your browser to
display.
Place all of your images,
text links here.
Slide 12
Slide 12 text
Don’t forget!
Don’t forget to close your
tag
Slide 13
Slide 13 text
Just a few important ones to start
HTML5 Tags
,
,
,
,
,
Structure Tags Content Tags
Table Tags Form Tags
Slide 14
Slide 14 text
Just a few important ones to start
Example HTML Page
Slide 15
Slide 15 text
Add images to your pages
Images
The image tag uses the src attribute to set the url of the image. You can also add
specific width and heights to your images, but we’ll leave that to CSS.
Slide 16
Slide 16 text
Create links to other pages
Links
The href tag allows you to link. A normal link looks something like this:
Visit my link!
You can also wrap links around other tags, like images:
You can also control if images open in the same window (default) or a new window
by using the target attribute
Visit my link!
You can also control if images open in the same window (default) or a new window
by using the target attribute
Visit my link!
Slide 17
Slide 17 text
Control the chaos with
Ordered and Unordered Lists
- Cheese
- Sour Cream
- Cheese
- Sour Cream
Slide 18
Slide 18 text
Control the chaos with
Multi-level Lists
- Dad's interests
- football
- knitting
- Mom's interests
- hating football
- skydiving
Slide 19
Slide 19 text
Things you can do
HTML Misc. options
HTML still allows you to set several basic options when working with
different tags. While it’s always preferred to set things like this using CSS,
these options are still available.
For instance: On content tags like
etc. you can set the font size, font color and font family. On structure tags, you can set the width, height and background color and other style attributes.
Slide 20
Slide 20 text
Giving your site a backbone
Structure tags
Tables Build it yourself
You can substitute
for your
preference: , ,
, .
Use the tag that is most approbate
for the content it contains.
Slide 21
Slide 21 text
CSS
Cascading Style Sheets
Slide 22
Slide 22 text
Introduction to [vanilla]
Cascading Style Sheets
Style sheets allow you to control how your webpage looks.
CSS can be augmented by preprocessors like Sass, less and PostCSS.
But this is a lesson for another day.
Recently, CSS has started being referred to as vanilla CSS because of it’s
straightforward and minimal functionality.
Slide 23
Slide 23 text
Link to an external style sheet
Stylesheet.css
To use a stylesheet you must add a link into the
of your html document:
Slide 24
Slide 24 text
How does this work?
The basics of CSS
p {
font-size:12px;
}
Selector
Property
Value
Slide 25
Slide 25 text
Let’s talk logistics
A primer on CSS
Why CSS? Your own style
• CSS exists to keep your front-end markup
(html) clean.
• In the “old days” we wrote everything inline
• You can write both inline CSS and Styles in the
(But you shouldn’t)
• CSS evolves just like any other language
• CSS3 means CSS version 3
• More changes are coming to CSS!
• Ask yourself: Should I write it on one line? Should my
brackets be on one line? Should I include a space?
• Be consistent! Write each of your decorations the same
way so it’s easy to read.
• Make comments above sections to keep track of your
code
• Most companies will ask you to write CSS in some sort
of ‘spec’. Be flexible.
Slide 26
Slide 26 text
CSS Selectors
The details of CSS (1 of 5)
HTML Selectors ID and Class names
HTML selectors are naturally
occurring tags such as:
,
,
IDs and Class names are give to HTML selectors
to give them specificity such as
or
h1 {
text-color: #000;
}
p {
font-size:16px;
}
h1.my_heading {
text-color: #000;
}
div#my_div_name {
height: 30px;
}
.my_heading {
text-color: #000;
}
#my_div_name {
height: 30px;
}
or
Slide 27
Slide 27 text
CSS Reset and Normalize
The details of CSS (2 of 5)
By default every browser has some level of styles built in
that we want to override. You can do this one of two ways:
The Eric Meyer Reset
http://meyerweb.com/eric/tools/css/reset/
or
normalize.css
https://necolas.github.io/normalize.css/
These files ‘reset’ the built in browser CSS allowing you to
write clean CSS from the beginning.
Failure to not use one of these files will lead you down the
path of insanity.
Slide 28
Slide 28 text
Margin, Padding, Box sizing
The details of CSS (3 of 5)
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
Box Sizing:
Height
Width
Margin
(Gray)
Padding
(Green)
div {
height: 50px;
width: 50px;
}
div {
padding: 5px;
width: 5px;
}
Slide 29
Slide 29 text
Margin, Padding, Box sizing
The details of CSS (3.5 of 5)
Borrowed with love from http://www.codecademy.com/
Slide 30
Slide 30 text
Positioning - Part 1 of 8
The details of CSS (4 of 5)
Display Type
div {
display: block;
}
display: block display: inline display: inline-block
Slide 31
Slide 31 text
Positioning - Part 2 of 8
The details of CSS (4 of 5)
Margin
div {
margin: 10px 10px 10px 10px;
}
10px
10px
10px
10px
div {
margin: Top Right Bottom Left;
}
Slide 32
Slide 32 text
Positioning - Part 3 of 8
The details of CSS (4 of 5)
Padding
div {
padding: 10px 10px 10px 10px;
}
10px
10px
10px
10px
div {
padding: Top Right Bottom Left;
}
Slide 33
Slide 33 text
Positioning - Part 4 of 8
The details of CSS (4 of 5)
Floats
div {
float:left;
}
div {
float:right;
}
div {clear:both;}
Slide 34
Slide 34 text
Positioning - Part 5 of 8
The details of CSS (4 of 5)
Position: static, relative, absolute and fixed
div {
display:block;
width: 100px;
height: 50px;
}
Position: static (default)
Slide 35
Slide 35 text
Positioning - Part 6 of 8
The details of CSS (4 of 5)
Position: static, relative, absolute and fixed
div {
display:block;
position:relative;
width: 100px;
height: 50px;
top:20px;
}
Position: relative
20px
50px
Slide 36
Slide 36 text
Positioning - Part 7 of 8
The details of CSS (4 of 5)
Position: static, relative, absolute and fixed
div {
display:block;
position:absolute;
width: 100px;
height: 50px;
top:20px;
}
Position: absolute
20px
50px
Slide 37
Slide 37 text
Positioning - Part 8 of 8
The details of CSS (4 of 5)
Position: static, relative, absolute and fixed
div {
display:block;
position:fixed;
width: 100px;
height: 50px;
top:20px;
}
Position: fixed
20px
50px
Slide 38
Slide 38 text
Working with fonts
The details of CSS (5 of 5)
@font-face is your friend
Font Service
Fonts are hosted for you and
served up as an external resource.
Some font services include
• Google fonts
• Typekit
• typography.com
• Font deck
• myfonts.com
Host them yourself locally
You can call .ttf .otf and other font files
locally but this can be against the font
license. Check first.
Always use a fallback
You never know what could happen, it’s best
to always specify a fallback font, even if it is
just serif or san-serif.
Slide 39
Slide 39 text
Javascript
Client-side programing language
Slide 40
Slide 40 text
Getting started with Javascript
What’s this jQuery thing?
99% of users have javascript enabled
Progressive enhancement is a very real thing
but lets buy some beers and talk about it.
“…I heard using jQuery was bad”
For now, use javascript and use jQuery.
Also note: Just like CSS3, Javascript continues
to evolve.
Slide 41
Slide 41 text
Link to jQuery and your javascript file
jQuery + scripts.js
To use a javascript and jquery you must add a link into the
of your html document just before the close of your tag.
Slide 42
Slide 42 text
Document load vs. ready
Getting comfortable with jQuery
Document Ready
Window Load
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
Slide 43
Slide 43 text
Console.log()
Getting comfortable with jQuery
Using console
$(document).ready(function() {
console.log(‘this is a console message’);
});
Slide 44
Slide 44 text
Fades
Getting comfortable with jQuery
Fade Out
$(document).ready(function() {
$(‘.class’).fadeOut();
});
Fade In
$(document).ready(function() {
$(‘.class’).fadeIn();
});
Slide 45
Slide 45 text
Click action
Getting comfortable with jQuery
Alert on Click
$(document).ready(function() {
$('.menu_toggle').click(function(e) {
alert(‘hello world’);
})
});
Slide 46
Slide 46 text
Q&A + Break time!
Slide 47
Slide 47 text
Codepen.io
Example #001 - [mccombs/pen/EjwrzM]
Slide 48
Slide 48 text
Codepen.io
Example #002 - [mccombs/pen/XbeOvO]