Foundations of Front-End Web Development

In this lecture we'll see how a webserver works and how a few files on a computer can be turned into a web site

In this lecture, you'll learn what HTML is and what's its use in modern web application development.

In this lecture, we'll take a look at how a HTML page is structured and how it's evaluated by the browser when loaded and parsed.

In this lecture we'll learn what an HTML tag is and what are its purpose and structure

In this lecture we'll apply what we've seen so far and we'll learn how to write our first HTML file!

In this lecture, we'll learn how to use the free online service JSBIN to experiment with HTML in real time, within the browser!

In this lecture, we'll learn about the structure of an HTML page and we'll take a first look at the first two main section, HEAD and BODY.

External Resources for this lecture:

• The HTML Element
• The HEAD Element
• The BODY Element

In this lecture, we'll learn about the page title tag, the header tag and the paragraph tag.

JSBIN session for this lecture: JSBIN session

External Resources for this lecture

• The HEAD Element
• The BODY Element
• The META Element
• The TITLE Element
• Headings Elements
• UTF-8
• The "Element" Element
• The "P" (paragraph) Element

In this lecture we'll learn what DIV and SPAN are and what they are used for. Through them we'll learn the difference between a block level element and an inline element.

JSBIN session for this lecture: JSBIN session

In this lecture we'll recap what we've seen so far and we'll expand on the browser Document Object Model.

In this lecture we'll take a look at some more semantic tags available in the current version of HTML: Section, Article, Header and Footer.

in the downloadable resources you'll find the compressed html file used for this lecture (index.html.zip)

External Resources:

• Section tag
• Article tag
• Header tag
• Footer tag

In this lecture we'll take a look at one of the most popular HTML markup language Tag of all time: the Anchor tag.

In the downloadable resources you'll find the compressed files used in this lecture (anchor-tag.zip)

In this lecture we'll learn how to use form tags, that allow us to collect information from the user and send it to the server.

In the downloadable resources you'll find the compressed html file used for this lecture (form.html.zip)

External Resources

• Form tag
• Fieldset tag
• Input tag
• Label tag
• Select tag
• Option tag

In this lecture we'll continue exploring how HTML forms work and how form data get transferred from the browser to the server when clicking on the submit button.

In the downloadable resources you'll find the compressed html file used for this lecture (form.html.zip)

In this lecture we'll take a look at the HTML list tag.

External Resources

• Unordered list UL
• Orderd list OL

In this lecture we'll take a look at how to present tabular information in our page using the table HTML tag.

In the downloadable resources you'll find the compressed html file used for this lecture (tables.html.zip)

In this lesson we'll see how to add cool images to our web page!

Remember to uncompress the images.zip file to your experiments folder, where we have all our html files.

In this lecture we'll learn how two additional HTML5 tags, Nav and Aside, can be used to add more meaning to our markup when creating navigation bars and tangential content (like sidebars) in our page.

In the downloadable resources you'll find the compressed html file used for this lecture (navaside.html.zip)

External Resources

• The Nav tag
• The Aside tag
• Aside Revisited

In this lecture we'll put together what we've seen so far and we'll create a small minisite with a homepage and a contact us page.

In this lecture we'll learn what CSS is and how it's used to apply styles and color to a markup document

In this lecture we'll take a look at how a set of CSS rules (also called stylesheet) can be applied to a webpage.

In the downloadable resources you'll find the compressed project files used for this lecture (css-1.zip)

In this lecture will take a quick look at the major categories of CSS properties we'll deal with and what units of measure are used to express their values.

In this lecture will introduce the ID and CLASS markup attributes, detailing their purpose and how they differ between each others

JSBIN Session: JSBIN session

In this lecture we'll take a look at how ID and CLASS attributes can be targeted and used by CSS selectors.

JSBIN Session: JSBIN Session

In this lecture we'll take a look at what element sectors are and how we can use them to style our markup.

JSBIN session: JSBIN Session

In this lecture we'll take a look at the attribute selector and we'll see how it can be used for CSS styling.

JSBIN Session: JSBIN Session

External Resources

• MDN - Attribute Selector
• The Attribute Selector

In this lecture we'll see what the shortcomings are with the CSS selectors that we've seen so far and why we need more specialised selectors to overcome these limitations.

In the downloadable resources you'll find the compressed html file used in this lecture (relationships-part1.html.zip)

In this video we'll take a look at relationship selectors; CSS has a way to select elements based on their relationships.

In the downloadable material you'll find the compressed html file used for this lecture (relationships.html.zip).

Icons made by Freepik from www.flaticon.com is licensed under CC BY 3.0

In this lecture we're going to take a look at pseudo class selectors, used to specify a special state for the element to be selected.

External Resources

• MDN - Pseudo Classes
• CanIUse.com

JSBIN for experimenting with pseudo classes: JSBIN Session

In this lecture we'll take a look at the CSS position property, that determine the way an element get positioned in the webpage.

JSBIN session for positioning elements: JSBIN session

JSBIN session for positioning example: JSBIN session

In this lecture we'll learn and understand how the browser determines which rule to apply when more than one rules match the same element.

External Resources

• Specificity

In this lecture we'll learn that CSS rules are not influenced by HTML elements proximity when computing specificity values

In this lecture we'll see how rules can be overridden, no matter how specific they are.

Overriding rules this way is something you won't do usually (and you should really avoid doing that if possible, since it makes maintenance of your CSS really difficult) but it's an useful tool to have in your toolbelt for those emergency situations when no other options are available.

JSBIN for this lecture: JSBIN session

In this lecture we'll have a look at the CSS properties that affect the way text gets rendered in your web page.

JSBIN for this lecture: JSBIN session

In this lecture we'll take a look at how color properties can be used in CSS to affect the color of the various elements of our User Interface.

JSBIN as starting point for the lecture: JSBIN Session

JSBIN at the end of the lecture: JSBIN Session

External Resources

• MDN - Color values
• MDN - Background color
• MDN - Background attachment

In this lecture we'll discuss how properties are inherited by descendants of an element.

In particular we'll see how text-related properties are generally inherited, while box-related ones not.

Properties than can be inherited are: color, font, letter-spacing, line-height, list-style, text-align text-indent, text-transform, visibility, white-space and word-spacing

Properties that cannot be inherited are background, border, display, float and clear, height and width, margin, min- and max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align and z-index.

JSBIN for this lesson: JSBIN session

External Resources

• MDN - CSS Reference
• MDN - CSS Color
• MDN - CSS Background

In this lecture we'll take a look at some of the properties available that define shape and boundaries of an element.

In the downloadable materials you'll find the compressed html file used for this lecture (boundaries.html.zip)

External Resources

• MDN - CSS border
• MDN - CSS margin
• MDN - CSS padding

In this lecture we'll talk about the way elements size are computed by the browser, using a default box model (called content-box) and how to change it to a more convenient type (border-box) to better control the size of our HTML elements on the page.

In the downloadable materials you'll find the compressed html file used for this lecture (boxmodel.html.zip)

External Resources

• Quirksmode - Box Sizing

In this lecture we'll take a look at how inline elements and block level elements work with dimension properties.

JSBIN session for inline element: JSBIN session

JSBIN session for block element: JSBIN session

JSBIN session for align: JSBIN session

Attributions: icon "new" has been provided by http://www.webdesignerdepot.com/

In this lecture we'll recap briefly what we've seen so far about the CSS position property and how it affects elements.

JSBIN example on fixed positioning:

• JSBIN example with fixed positioning

In this lecture we'll take a look at floating elements and how they relate to the document flow.

JSBIN used for this lecture:

• JSBIN session

In this lecture we'll take a look at how we can solve the containment issue when dealing with floated elements (see lecture on floating elements for a detailed explanation of this issue).

JSBIN Sessions used for this lecture:

• JSBIN session with H1 clearing
• JSBIN session with element clearing
• JSBIN session with overflow clearing
• JSBIN session with clearfix hack

In this lecture we'll start creating the basic folder structure and files for our project and we'll see how to add custom fonts to our index.html file.

In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-1.zip)

External Resources

• Wikipedia -Web safe fonts

In this worskhop lecture we'll focus our attention on the header of the page.

In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-2.zip)

External Resources

• Grid use in web design
• Eric Meyer CSS reset
• Eric Meyer on the rationale for a CSS reset

In this workshop lecture we'll continue and finish working on our page header.

In the downloadable resources you'll find the compressed project files used for this lecture (cssws-code-3.zip)

External Resources

• Clearfix code used in the lecture
• Converting pixels to points

In this workshop lecture we'll focus on the footer of our web page.

In the downloadable materials you'll find:

• the pattern.png file used for the footer top background
• the compressed project files used for this lecture (cssws-code-4.zip)

In this workshop lecture we'll focus on the main visual for the page, our "hero" image.

In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-5.zip)

External Resources

• Lorempixel: generator of random images!

In this workshop lecture we'll focus on the marketing claims area and their column layout.

In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-6.zip)

In this workshop lecture we'll focus our attention on the portfolio section, finishing up our general work on the web page.

In the downloadable materials you'll find the compressed project files used for this lecture (csws-code-7.zip)

There's a small fix we need to add to the portfolio section that didn't make its way into the video and the code. This fix will solve an issue with the last portfolio image horizontally overflowing outside of the section.

In this workshop lecture we'll add a few final touches to our complete homepage, making it more SEO friendly and cross browser compatible.

In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-8.zip)

In this introductory lecture we'll take a look at what Javascript is and what it's used for in a typical rich interactive application.

In this lecture we'll start writing some Javascript!

In the downloadable materials you'll find the compressed project files used for this lecture (js-code-1.zip)

External Resources

• MDN - script tag

In this lecture we'll learn what Javascript variables are and how they can be used to store information used by our running code.

External Resources

• Variable naming rules

In this lecture we'll learn how to 'create' new variables through a variable declaration and the difference between an undefined value and a null value.

External Resources

• Declaration: Read up to step 11.

In this lecture we'll take a look at the basic variable data types we've access to in Javascript.

External Resources

• MDN - Logical operators
• MDN - Primitive datatype values
• MDN - String escape characters

In this lecture we'll learn how variables types in Javascript are dynamic in nature, compared to other programming languages.

In this lecture we'll take a look at "functions", the reusable unit of code in Javascript.

We follow up from the last lecture and try to put in practice what we just learned about functions..

JSBIN session for this lecture: JSBIN session

External Resources

• Javascript comments

In this lecture we'll take a look at the difference between a Javascript library and an API.

External Resources

• Wikipedia - Library
• Wikipedia - Application Programming Interface

In this short lecture we'll take a quick look at the return statement.

JSBIN Session for this lecture: JSBIN session

External Resources

• MDN - return (read only summary,syntax,description)

In this lecture we'll take a look at variable scope, that defines what your code can "see" when it's executing.

JSBIN session for this lecture: JSBIN session

In this lecture we'll talk about what javascript objects are and how we can create.

JSBIN session for this lecture: JSBIN session

External Resources

• MDN - Working with objects

In this lecture we'll take a closer look at objects and we'll see how they influence functions when called through an object.

JSBIN session for this lecture: JSBIN session

External Resources

• W3School - Objects

In this lecture we'll learn how assignments in Javascript work by value or by reference, depending on the nature of the operand on the right side of the assignment. We'll see how assignment work when applied to primitive values, objects and functions

JSBIN session for this lecture: JSBIN session

In this lecture we'll learn another way to create an object, beside the object literal technique we've learnt so far.

JSBIN session for this lecture: JSBIN session

In this lecture we'll take a look at the "prototype" property, that we've access to within a function.

JSBIN session for this lecture: JSBIN session

In this lecture we'll expand on the function prototype and experiment with it with practical applications.

JSBIN session for this lecture: JSBIN session

In this video we'll talk about strings again, but with a new perspective on them and we'll uncover additional truths about them.

JSBIN session for this lecture: JSBIN session

External Resources

• MDN - Strings

In this video we'll take a look at Callbacks, a way of using functions to be "called back" later.

JSBIN session for the first part of the lecture: JSBIN session

JSBIN session used from 2'52" in the lecture: JSBIN session

In this lecture we'll take a look at Arrays and how we can inspect their content.

JSBIN session for this lecture: JSBIN session

External Resources:

• MDN - Array

In this video we'll take a look at conditional statements. A conditional statement is just a way to check for a condition and act on it.

JSBIN session for this lecture: JSBIN session

External Resources:

• MDN - Comparison operators
• MDN - Console

In this lecture we'll learn how to iterate over the properties of an Array using another method, called "explicit iteration"

JSBIN session for this lecture: JSBIN session

In this lecture we'll have a super quick look at the Objects and functions that the javascript runtime provides us when working in a browser environment.

Externa Resources

• MDN - DOM
• MDN - DOM : Introduction
• MDN - Web API
• MDN - API : Document
• MDN - document.querySelector
• MDN - API : HTMLImageElement
• MDN - API : HTMLElement
• MDN - API : Element

In this lecture we'll experiment with the DOM, creating new HTML element using the rich set of Objects and functions available in the DOM.

JSBIN session for this lecture: JSBIN session

External Resources

• MDN - API : Document
• MDN - API: document.createElement
• MDN - API : Text
• MDN - API : Node
• MDN - API : Node.appendChild

In this video we'll talk about DOM events and how to be notified when something happens in the web page.

External Resources

• Wikipedia - DOM Events

In this lecture we'll try to put in practice what we've just seen about the DOM and DOM events with a practical exercise.

JSBIN session for this lecture: JSBIN session

External References

• MDN - API : NodeList

In this lecture we'll continue and finish our exercise in handling DOM events.

JSBIN session for this lecture: JSBIN session

External Resources

• MDN - Web API
• MDN - API : EventTarget
• MDN - API : HTMLAnchorElement
• MDN - API : HTMLElement
• MDN - API : HTMLElement
• MDN - API : Node
• MDN - API : EventTarget
• Wikipedia - DOM Events
• MDN - API : MouseEvent

With our DOM exercise complete, we'll take a look at the code again to see if we can further improve it.

JSBIN session for this lecture: JSBIN session

In this lecture, we'll take a look at jQuery, probably the most popular Javascript library in the Web ecosystem.

External Resources

• jQuery homepage
• CDNJS - jQuery

In this lecture we'll take a look at how jQuery can simplify listening and reacting to browser events.

JSBIN session for this and the next lecture: JSBIN session

External Resources

• API : on
• API : mouseover
• API : mouseout
• API: jQuery (or $)
• W3School - chaining in jQuery

In this lecture we'll complete our exercise, using jQuery to simplify DOM manipulation.

JSBIN session for the previous and this lecture: JSBIN session

External Resources

• API : addClass
• API : removeClass
• API : class attribute
• API: jQuery (or $)
• W3School - chaining in jQuery

A quick recap on what we've seen so far with jQuery.

In this lecture we'll take a look at what HTTP, REST and JSON have in common.

External Resources

• Wikipedia - REST
• Another definition of REST
• Wikipedia - JSON
• JSON Standard (ECMA-404) home

In this lecture we'll introduce Ajax and we'll see how jQuery simplifies something that would otherwise require a fair amount of work.

External Resources

• W3School - onreadystatechange event
• jQuery API - Ajax

In this lecture we'll see what the Same Origin Policy is and how to deal with it in our experiments with Ajax.

External Resources

• Wikipedia - Same Origin Policy

In this short video update we discuss how to make our Ajax code run in Chrome since the latest updates in Chrome security policy, that prevents us from running Ajax code in scripts loaded directly from the filesystem (this happens all the time we open an html file in our computer directly with our browser, using the special URL format "file:///<path in our computer>").

Very recently Chrome stopped supporting Ajax code in files loaded this way and the workaround we illustrated in lesson 95 doesn't work anymore.

To get around this limitation, we have 2 options:

1) Use Firefox, that is more permissive and allows local files to issue Ajax calls

2) Continue to use Chrome but through a proper Web Server, a program that will run on our machine with the purpose of serving our html files to the browser connected to it via our local network.

In the video I'll show you how to implement the second option, but keep in mind that option 1 is still available if you don't feel comfortable in dealing with the installation of python and in running a local web server.

See also https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally for a more thorough discussion of the problem with Chrome security policy and the illustrated solution.

In this lecture we'll put to practice what we've seen so far about jQuery and Ajax, building a data-driven menu system.

We'll start by picking up the code a few videos ago for our horizontal menu with overlaid panels. We'll change this code in order to make the menu and its info panel completely dynamic, inspired by engadget.com

In the downloadable materials tab you'll find the compressed project files used for this lecture (jquery-ws-1.zip)

Let's continue working on our interactive menu using Ajax and jQuery

In the downloadable materials tab you'll find the compressed project files used for this lecture (jquery-ws-2.zip)

Let's complete our workshop, bringing our project to completion!

In the downloadable materials tab you'll find the compressed project files used for this lecture (jquery-ws-3.zip)

In this video we'll take a look at one of the most popular front end frameworks on the market, Backbone.js.

External Resources

• Wikipedia - Backbone.js
• Wikipedia - MVC
• Wikipedia - Underscore.js

In this lecture we'll take a look at Backbone Models.

Backbone models are used to represent the data your application is working with, along with the logic that surrounds that data and that allows you to retrieve and store that information on a server.

JSBIN session for this lecture: JSBIN session

External Resources

• Backbone - Model

In this lesson we'll cement what we've just seen about Backbone Models with a quick recap.

JSBIN session for this lecture: JSBIN session

In this video we'll take a look at Backbone.Collections. A Backbone.Collection is a wrapper around a collection of Backbone.Models;

JSBIN session for this lecture: JSBIN session

External Resources

• Backbone Collection

In this lecture we'll take a look at Backbone Views, that allow us to provide a visual representation for our models.

JSBIN session for this lecture: JSBIN session

External Resources

• Wikipedia - Separation of concerns
• Backbone View
• Backbone Events

In this lecture we'll see how a view can also react on events generated by the User Interface (the web page).

JSBIN session as a starting point for this lecture: JSBIN session

JSBIN session for this lecture: JSBIN session

In this lecture we'll take a look at the Backbone.Router.

in the downloadable resources you'll find the compressed project files used for this lecture: (bb-code-router.zip)

In this lecture we'll take a look at our next Backbone project, the Foogle play store.

The Idea is to implement a simple Rich Single page web application using all the technologies we've seen so far.

Our application we'll be loosely modelled around the Google play book store.

In the downloadable resources you'll find the API json files required (api.zip)
In the downloadable resources you'll find also the complete compressed project files for this lecture (bb-ws-1.zip)

In this lecture we'll start creating the markup for the header for out Single Page Web Application.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-2.zip)

In this lecture we continue working on the markup of our application, dealing with the sidebar with the category navigation.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-3.zip)

In this lecture we continue working on the markup of our application, dealing with the content area for the list of books within a category.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-4.zip)

In this lecture we continue working on the markup of our application, dealing with the content area for the detail of a single book.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-5.zip)

In this lecture we'll switch to the Javascript side, starting coding the Router first.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-6.zip)

In this lecture we'll focus on coding the Books list area.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-7.zip)

In this lecture we'll continue working on the Books list area.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-8.zip)

In this lecture we'll finishing up working with the Books list area.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-9.zip)

In this lecture we'll focus our efforts on the Book detail panel.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-10.zip)

In this lecture we'll see how to deal with unexpected bugs in our code and how to troubleshoot and fix them.

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-11.zip)

In this lecture we'll see how we can further improve the code of our Foogle play web application by using Underscore templating.

JSBIN session for the lecture: JSBIN session

In the downloadable resources you'll find the compressed project files for this lecture (bb-ws-12.zip)