Pfnp slides

PFNP - SESSION 2: THE FRONT END
WILL MYERS
Freelance Front-end Developer
WORKING FILES FOR THIS WEEK
http://bit.ly/1lJc7AM
SLIDES
http://www.slideshare.net/wilkom/pfnp-slides

ATOM PLUGINS
open Atom
go to Preferences (Atom > Preferences), this will launch a
Settings tab.
select Install from the Settings left-hand nav
search for 'atom-beautify' and install this
do the same for 'open-in-browser', 'white-cursor' and
'highlight-line'
restart Atom

SUBLIME PACKAGE CONTROL
https://packagecontrol.io/installation

AGENDA
Summary from last week
HTML Tags & CSS Selectors Review
The Box Model, Positioning, FlexBox
JavaScript and JQuery Review
Adding a simple Express Server to your webpage
Internet protocols - IP, TCP, HTTP
Online Global Community for Web Development

SUMMARY FROM LAST WEEK
introduction to the command line.
workshop to learn the basics of
JavaScript.
Install Node, NPM
Install http-servermodule globally
Create simple webpage with CSS styling and some
JavaScript functionality
( )
Run the http-servercommand to serve the current
working directory's files and sub-folders to the browser.
GA Fundamentals
Nodeschool javascripting
http://codepen.io/cbas/pen/QjRWZm

HTML SYNTAX
creates structured documents from page 'parts'
(headings, paragraphs, lists, links, footer etc)
is written in the form of HTML elements consisting of tags
elements either have opening and closing tags: <p></p>
or are 'empty', they have no closing tag: <img>

HTML SYNTAX
HTML tags can also have attributes which are properties
written inside the first (opening) tag:
<img src="smiley.gif" height="42"
width="42">

MAIN TAGS
<html></html>the root container tag for the whole
document (web page)
<head></head>the container tag for metadata and links
to external files (e.g .css files)
<body></body>contains all the visible structure and
content of the web page, nested inside

CONTENT TAGS
Heading Elements
<h1>Largest Heading</h1>
<h2>. . . </h2>
<h3>. . . </h3>
<h4>. . .</h4>
<h5>. . . </h5>
<h6>Smallest Heading</h6>

CONTENT TAGS
Text Elements
<p>This is a paragraph</p>
<code>This is some computer code</code>
<span>For styling words inside a container tag</span>

CONTENT TAGS
Unordered list <ul></ul>

CONTENT TAGS
Unordered list item
<li>First item</li>
<li>Next item</li>

CONTENT TAGS
links
<a href="Link">First item</a>

CONTENT TAGS
<div></div>
This is a very widely used generic container tag. It is a
rectangular element which can be styled with margins,
padding, borders, background-colors, width, height etc. Like
many other elements it has block-level display which means
it starts on a new line of the page.
<div>s can be nested in other <div>s

IMAGES
<img src="smiley.gif" height="42"
width="42">
The imgtag requires a srcattribute, which tells the
browser where to find the image.

IMAGES
How would you write the src?
There are different approaches to specifying an image
location

IMAGES
Inside webroot, a relative path could be used:
<IMG SRC="IMAGES/LOGO.PNG">

IMAGES
Relative Path
Given this folder structure the same image would be
<img src="../images/logo.png">
../means to go up a directory, and can be used
repeatedly: ../../would go up two directories.

IMAGES
Absolute Path
<img src="/images/logo.png">
Absolute URLs start with a /, which implies the root
directory of your web site.

IMAGES
Full URL
<img src="https://ga-core.s3.amazonaws.com/production/uploads/program/def

IMAGES
alt attribute
<img src="puppy.jpg" alt="My cute puppy">

HTML VS HTML5
HTML5 is HTML with a few additions The Doctype tells you if
the page is HTML5 ready.
<!DOCTYPE html>
HTML HISTORY

HTML5
brings many improvements and new features to web
pages
many features of HTML5 have been built to run on low-
powered devices such as smartphones and tablets
introduces the new <video>, <audio>and <canvas>
tags
introduces many new structural document tags, e.g.
<main>, <section>, <article>, <header>,
<footer>, <aside>, <nav>and <figure>- these
are like <div>but with a semantic styleable name.

CSS
is a styling (stylesheet) language used for describing the
presentation of an HTML document
it separates document content from document
presentation, including control of layout, colors, and
fonts
it makes the page much easier to edit and update, and
improves accessibility
multiple HTML pages can share the same formatting by
writing the CSS in a separate .css file and linking to it from
your HTML page

CSS
Where does CSS go?
Inline with the styleattribute
<h1 style="color: red;">Hello World</h1>
In the head
<head>
<style> </style>
</head>
h1 {color: red;}
In a separate file (best option)
<head>
<link rel="stylesheet" type="text/css" href="path/to/some.css">
</head>

CSS
Using a separate CSS file
It is best practice to put CSS in its own file and link to it from
the <head>.
<link rel="stylesheet" href="style.css">

CSS BREAK DOWN
p {
color: red;
font-weight: bold;
}

CSS BREAK DOWN
This whole thing is called a rule.
The pis called a selector, and it's followed by a set of
declarations in a declaration block.

CSS BREAK DOWN
The selector, pin this case, specifies what parts of the HTML
document should be styled by the declaration. This selector
will style all pelements on the page.

CSS BREAK DOWN
The declaration block here is:
{
color: red;
font-weight: bold;
}
Declarations go inside curly braces.
Every declaration is a property followed by a value,
separated by a colon, ending in a semicolon.

CASCADING STYLE SHEETS (CSS)
COLORS
Colors can be specified in CSS in a variety of ways:
keyword (e.g. redor blanchedalmond)
hex codes (e.g. #FF0000)
rgb(0,0,0)
rgba(255, 255, 255, 0.8)
hsl(0, 100%, 50%)
hsla(0, 100%, 50%, 0.8)
Today we'll use keywords :
http://www.w3schools.com/html/html_colornames.asp

CSS SELECTORS
if you want to directly style all elements of a certain type (e.g
all <p>tags) they you style p
p {color: red;}
if you want to apply styles to individual elements then use
'#' (hash/id) selectors. This selects one element on your
page with an unique id attribute
#my-id {color: green }
if you want to apply styles to groups of elements then use '.'
(dot/class) selectors. These select elements which have a
corresponding class attribute.
.my-class {color: blue }

CSS SELECTORS
There are many other selectors and each has a different
level of importance. This means it can either be overwritten
by, or can overwrite another style.
See: http://code.tutsplus.com/tutorials/the-30-css-
selectors-you-must-memorize--net-16048

CSS SELECTORS EXERCISE
In the blankfolder of the downloaded working files, do the
following:
Copy this code into lesson.css
#my-id { color: green; background-color: white; }
.my-class { color: blue; background-color: yellow; }
Copy this code into lesson.html
<p id="my-id">There should only be one of me.</p>
<p class="my-class">There can be many of me.</p>
<p class="my-class">There can be many of me.</p>
<p>This text has <span class="my-class">a styled bit</span> inside</p>

CSS STYLE PROPERTIES
There are many CSS styling properties. Some can be applied
to all types of tags, others only work on certain tags.
color: sets the color of text
background-color: sets the color of the background
rectangular area, including the padding
width: sets the width of the element in different units
height: sets the height of the element in different units
font-family: sets the text font
font-weight: sets the text font weight - e.g. boldor
can be a numeric value

These properties relate the to the box modeland
positioning
margin: sets the outer transparent rectangular border of
an element as part of the box model
border: sets the visible rectangular border style of the
element as part of the box model
padding: sets the inner transparent rectangular border
of an element as part of the box model
display: sets the layout of the element in the 'flow of
the page'

CSS BOX MODEL
The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders,
padding, and the actual content.
In terms of visibility, marginarea is transparent, padding
area inherits background-color, borderhas its own style
and color properties.
You can see a representation of the box model for an
element in Chrome dev tools (Cmd + Alt + I), in the
'Elements' tab.

margin, borderand paddinghave individual properties
for each side of the rectangle.
margin-top, margin-left, margin-bottom, margin-right
border-top, border-left, border-bottom, border-right
padding-top, padding-left, padding-bottom, padding-
right
These values can also be set with shorthand:
margin: top right bottom left; (clockwise)
margin: top-and-bottom left-and-right;

CSS STYLE PROPERTIES - BORDERS
Border has its own style and color properties:
border-width(number px)
border-style(string)
border-color(string or hex value)
It is commonly set as border: width style color;
border: 4px dashed red;

CSS STYLE PROPERTIES - BORDERS
Border style properties: none(low priority), hidden(high
priority), dotted, dashed, solid, double, groove,
ridge, inset, outset
Don't forget border-radius
border-radius:50%;makes a square into a circle

CSS AND <DIV>EXERCISE
Remembering that a <div>can be styled and nested inside
another <div>, try and do the following:
create a circle inside a square
create the Singaporean flag (without the stars)
Your code should look something like:
<div class="parent-class">
<div class="child-class"></div>
</div>
The demo is here, but have a go without looking first
http://codepen.io/wilkom/pen/OyrPzV
Work in the blankfolder of the downloaded working files

CSS POSITIONING
You can also position <div>s (or other HTML tags) with
exact values using the positionproperty and top, left,
bottom, right properties.
positionhas the following values:
static: default positioning in the document flow
absolute: positioned relative to its first non-static
ancestor element
fixed: positioned relative to the browser window
relative: positioned relative to it's normal default
position

CSS POSITIONING EXERCISE
Go to this link: http://codepen.io/wilkom/pen/xwmPeL
You can see the top and left properties set on the different
classes that are applied to the <div>s.

CSS OVERFLOW OF AN ELEMENT
What happens when we put some content into a container
and the content is bigger than the container? This can
happen particularly when you want to put some text inside
a container of a fixed size, but the text requires more space
than the container has available.
Open up the folder named overflow-textand open the
lesson.htmlfile in your browser

CSS OVERFLOW OF AN ELEMENT
For this we used the overflowproperty in the container. It
has the following values:
visible: (default) the content will âbreak outâand be
visible
hidden: any overflowing content will be hidden
scroll: the content is clipped and scroll bars will always
be available
auto: the content is clipped and scroll bars should be
available
initial: default value
inherit: inherits from parent container

CSS OVERFLOWING NESTED IMAGES
Open up the folder named nested-imageand open the
lesson.htmlfile in your browser
See if you can get the image to scale down be 'sitting inside'
the parent circle. Hint there is a class you can use in the
lesson.css.

CSS FLOW OF AN ELEMENT IN THE
PAGE LAYOUT
The display property affects how an element is positioned in
the 'flow' of the page.
displayhas the following values:
block: means the element 'moves down' the page
inline: means the element 'moves across' the page
inline-block: means the element is inline and the
inside of this element is block
flex: this is a big new thing that makes layouts easier

CSS FLEXBOX
Flexbox is a new way of laying out the flow of elements in a
web page.
It is a definite improvement in layout techniques for web
pages. A good link explaining Flexbox is here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It is now fairly well supported in browsers (going back to IE9
using prefixing), and so should be used in front-end web
development going forward.

CSS PAGE LAYOUT PRE-FLEXBOX
Open up the folder named web-page-float-layout
and open the lesson.htmlfile in your browser
Before Flexbox the most common way of doing a page
layout involved floats. The floatproperty in CSS was
originally intended for making content 'float alongside'
other content. It ended up also being used to float
containers alongside each other (e.g. sidebars in a web
page).

CSS FLOATS
You can 'float' elements to the left or right of a parent
container.
Floats are often used for page layouts - for example to
have a sidebar
You need to use the clearproperty in the style of the
element that comes after the container of the floated
elements. This stops the float continuing in the rest of the
page. By convention a style for clearing a float is
commonly called a clearfix.

CSS FLOAT LAYOUT STYLES
.sidebar{
float:left;
}
.clearfix{
clear:left;
}

CSS CLEARING FLOATS
You need to clear floatsfor different reasons - whether
you are still inside the container of your floated elements or
back up on the same level as the container.
In both cases a clearwill fix things, but because things are
different inside and outside the container there are also
other approaches to clear-fixing. Basically floated items in a
container will cause the container to collapse so this will
affect subsequent elements at the container level, as well as
elements in the container.
See http://www.sitepoint.com/clearing-floats-overview-
different-clearfix-methods/

CSS HTML5 TAGS LAYOUT
Open up the folder named web-page-h5and open the
lesson.htmlfile in your browser.
This page layout does not use floatsbut doesn't use
Flexbox either. It is a single column layout with a 'sticky
footer'.
It uses HTML5 semantic tags which can be styled directly.

CSS FLEXBOX LAYOUT
Flexbox's algorithm works on the basic principles of
elements flowing (vertically or horizontally), wrapping, and
expanding or shrinking according to different page sizes (e.g
for a laptop screen vs a tablet screen vs a mobile phone
screen).
Open up the following working files in the browser and play
around with resizing the window:
flexbox/holy-grail-layout/index.html
flexbox/flexible-column-layout-with-rows/index.html

CSS FLEXBOX VERTICAL CENTERING
Another old problem that Flexbox solves easily is vertically
centering text. Previous ways of doing this involved hackery
or limitations (e.g. content could only be on one line).
Go to this link to see examples of vertically centered text:
http://codepen.io/wilkom/pen/NGeyNg

CSS FONTS
In our web pages we can use the system fonts that come
with most operating systems, like Times, Arial and Helvetica.
But what if we want to use a really cool font, and embed it
so that anyone who visited our web page would see that
font. Enter the CSS3 font embedding syntax.
@font-face { font-family: MyFont; src: url('path/to/MyFont.ttf'); }
Now go and download some cool free fonts and put them in
your project folder: http://www.dafont.com/
Use the font-family: MyFont;property to apply that
font to a given tag

CSS3 TRANSITIONS
CSS3 which is the latest well supported version of CSS gives
you the ability to add transition animations to your HTML
elements. We use the transitionproperty.
We can add some transitions to specific properties so that
they change smoothly over time. One place we can do this is
when an a:hoverstyle is applied to an <a>anchor tag.
-webkit-transition: background-color 2s;
transition: background-color 2s;
https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

JAVASCRIPT AND THE DOM
JavaScript in the browser has an API (application program
interface) for accessing and editing the DOM (the document
object model) of an HTML document. The DOM is a
hierarchical tree representation of the structure of the HTML
in a web page.
JavaScript can target specific elements on an HTML page
and show, hide, style, edit and animate them. It can also
listen for events emitted by an HTML page (e.g mouse-clicks)
and invoke functions when an event occurs.

JAVASCRIPT AND THE DOM
JavaScript gets a reference to elements with (for example)
document.getElementById()
The JQuery library provides easier ways to do this, but is not
actually necessary.

JAVASCRIPT AND CSS
You can dynamically set CSS classes on elements with
JavaScript.
Open up the 'jsfb-styling-css-with-js' in the 'js-for-beginners'
folder and open lesson.htmlin your browser

JAVASCRIPT AND CSS
The same thing can be achieved with jQuery using less code,
but you have to import the jQuery library too!
Open up the 'jsfb-styling-css-with-jquery' in the 'js-for-
beginners' folder and open lesson.htmlin your browser

JQUERY
JQuery is a JavaScript library that does the following:
Access parts of the HTML page
Modify the appearance of the page
Edit the page
Respond to user interaction
Add animation
Retrieve data from a server using AJAX (Asynchronous
JavaScript and XML)
Simplify common JavaScript tasks

JQUERY
JQuery also provides the following useful features:
uses CSS selector syntax
supports extensions
abstracts away browser quirks
allows multiple actions to be defined in one line with
chaining

JQUERY SCROLLING
Firstly lets create some <a>anchor tags that link to other
parts of your same page. If you are linking to a spot on the
same page, the format of the link will be similar to:
<a href="#my-anchor">Jump to contact details</a> //note the # (hash)!
Now set the anchor where the first <a>will link to. The
anchor should be placed at the beginning of the line where
you want to start reading after you jump:
<p><a name="my-anchor"></a>Hey you can contact me at blah@blah.sg</p>
or you can target the id of a <div>
<div id="my-anchor">

JQUERY SCROLLING
Now make sure jQueryis linked in the <head>of your
page:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
Create a file called scrollLinks.jsand put it in the root
of your current folder. Then create another <script>link
in your <head>:
<script defer src="scrollLinks.js"></script>

JQUERY SCROLLING
Now copy and paste the following code into
scrollLinks.js
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
When you click on an <a>that links to another part of your
page, the page should scroll to that position.

NODEJS EXPRESS SERVER EXAMPLE
cdto the 'hello-express-programmers' folder in your
Terminal. We now need to install dependencies via the
command line
npm i express --save
npm install
Now run the server with
npm start

Pfnp slides

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Pfnp slides (20)

Recently uploaded (20)

Pfnp slides