Foundations of Front-End Web Development
4.4 (353 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
10,063 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Foundations of Front-End Web Development to your Wishlist.

Add to Wishlist

Foundations of Front-End Web Development

Learn the skills to quickly start a career in Front-End Development today!
4.4 (353 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
10,063 students enrolled
Created by Davide Molin
Last updated 4/2017
English
English [Auto-generated]
Price: Free
Includes:
  • 20 hours on-demand video
  • 1 Article
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • By the end of the course, you'll have all the tools and practical knowledge necessary to build visually rich Single page Web applications, try your luck with job interviews and kickstart your career as a Front End Developer!
  • After completion you'll have touched upon the comprehensive curriculum of a Junior Front End Developer. Try your luck, applying for jobs, getting feedbacks and improving on the solid foundations built during this course!
  • With the solid foundations acquired in this course, it will be much way easier to approach web articles and resources on Front End Development, armed with the necessary background and lingo to make the most out of them, learn effectively and quickly.
  • With the basics knowledge out of the way, the world is your oyster! Expand on the foundational knowledge acquired and specialize in further niches (AngularJs, EmberJs, Gaming, Full Stack Development).
View Curriculum
Requirements
  • This course assumes no previous knowledge on any topic. Every topic will be approached from scratch.
  • At the end of the course the student will have all the basic foundations for approaching the job market as a Junior Front End Developer. Moreover, the foundational knowledge acquired will make much easier to learn additional topics and build on top of what have been learnt so far
Description

- What is this course all about?

Front End Development is a trending job, engaging, well paid and full of challenges and wonders.

This course will teach you the skills to kickstart a career in Front End Development, assuming no previous knowledge of any of the topics presented.

NOTE: a basic knowledge of how to use your computer and run programs is assumed.

This course is all about helping you changing your career path (or creating a new one) and acquire the necessary skills to jump into the job market as soon as possible.

Are you tired of courses teaching you skills that you cannot easily convert into a salary ? If so, this is the course for you.

Front End Development is an area of Web Development that includes all of the skills required to create the visual and interactive part of a Website. It's a complex mix of skills and technologies and one of the most fast growing and well paid IT sectors of the moment.

A Front End Developer is the link between the graphic designer, responsible for creating the visual design of a Web Application and the Backend Developer responsible for creating the computational logic behind the application. The Front End Developer brings the application to life creating rich, compelling experiences and allowing the user to interact with the data behind the application.

This comprehensive course is aimed at students with no previous experience with Web Development or programming at all;

- What will I learn taking this course?

We'll touch on all the foundational topics that form the toolbelt of a professional Front End Developer:

  • Semantic HTML
  • CSS
  • Responsive Web Development
  • Javascript, Ajax and a dash of jQuery
  • Backbone.js!
  • The art of Unit Testing (brownie points during an Interview!)

We'll learn by doing, building projects and adding functionalities over time, as our knowledge expands.

- What will I get from this course?

By the end of the course, you'll have all the tools and practical knowledge necessary to build visually rich Single page Web applications, try your luck with job interviews and kickstart your career as a Front End Developer!

Who is the target audience?
  • This course should be taken by anyone interested in learning the ropes for becoming a Front End Developer, one of the best trending and exciting areas of Web Development at the moment
  • This course should Not be taken by people interested in Server Side Development (PHP, Java, Databases..). This course focuses on all the technologies related to the Web browser environment (HTML/CSS/Javascript/Frameworks/Testing)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
129 Lectures
20:43:40
+
Introduction
9 Lectures 19:49
Before starting! please read me.
00:20

Hi and welcome to the course!

In this lecture I'll give you an introduction to the topics that we'll go through during our learning journey,

By the end of this lesson, you'll have a clear idea of the many tools and technologies you'll come to master by the end of the course.

Welcome and overview of the technologies we'll deal with
02:31

In this lecture I'll introduce the browser that we'll be using during all of our course for development, Google chrome and I'll explain why it's my program of choice for Front End Web Development.

Chrome, the browser we'll use during this course
01:36

In this lecture I'll introduce the editor that we'll be using during this course, Sublime Text.

A free copy of the editor (for personal use and evaluation purposes) can be downloaded from the following link:

http://www.sublimetext.com/3

Development tools: the Editor
01:43

In this lesson we'll see how to install Sublime Text 3 on a Mac OSX System

Installing Sublime Text 3 (Mac)
01:58

In this lesson we'll see how to install Sublime Text 3 on a MS Windows System

Installing Sublime Text 3 (Windows)
01:51

In this lesson we'll see how to install Sublime Text 3 on a Linux System (Ubuntu)

Installing Sublime Text 3 (Linux)
01:49

In this lesson we'll see how to run Sublime Text 3 from the command line in a Mac OSX System,

Advanced Topic: Running Sublime from the command line (Mac OSX)
04:17

In this lecture we'll learn how to expand the functionalities of Sublime Text 3 using Package Control, that will give us access to a huge number of third party plugins.

Advanced Topic: Sublime: Adding support for external plugins
03:44
+
HTML Foundations
10 Lectures 01:02:34

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

Prologue: how a webserver works
03:55

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

What is HTML
02:57

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.

Structure of a HTML page
02:42

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

Structure of a HTML tag
05:33

This quiz will help you verify your understanding of what HTML is for, how an HTML page is structured and how tags can be used in a HTML document.

HTML and Tags: got it ?
5 questions

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

Let's start coding! our first html file!!
04:49

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

Let's move it to the cloud with jsBin!
08:26

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 page, the Head and the Body
07:00

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

Page Title, Headers and paragraphs
12:52

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

Div and Span, block and inline elements
12:43

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

Quick recap and an introduction to the DOM
01:37

Inline and Block level Elements
4 questions
+
Semantic HTML
9 Lectures 01:24:11

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:

More semantic tags: section, article, header and footer
11:57

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)

Navigating relationships with the anchor tag
09:44

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 tags
14:34

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)

Form tags - continued
11:07

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

External Resources

Presenting a list of elements: the list tags
03:09

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)

Working with tabular data
05:58

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.

Displaying Images
06:53

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

More semantic with Nav and Aside
04:31

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.

HTML Workshop: mini website
16:18

Semantic tags
4 questions
+
CSS
24 Lectures 03:07:37

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

What is CSS
02:28

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)

Inline, internal or external styles
12:07

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.

CSS properties and measures
02:13

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

The ID and Class attributes
05:48

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

Id and class selectors
07:54

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

The element selector
02:35

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

The attribute selector
06:16

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)

Why do we need more selectors ?
08:10

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

Relationship selectors
11:48

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

JSBIN for experimenting with pseudo classes: JSBIN Session

Pseudo-class selectors
16:21

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

The specificity rule
12:24

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

Tree proximity ignorance
01:14

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

An !important exception to the rule
08:21

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

Text and Font properties
18:40

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

Color properties
11:44

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

A note on inheritance
02:05

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

Element boundaries: borders, margins, padding and corners
09:12

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

The CSS Box Model
07:56

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/

How inline and block level elements deal with dimensions
09:58

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

CSS Box positioning
14:28

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:

Quick recap on box positioning
22 pages

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

JSBIN used for this lecture:

Floating elements
07:27

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:

Clearing floats
08:28

Quick recap on floating and clearing
7 pages
+
HTML and CSS Workshop: From a PSD to HTML/CSS!
8 Lectures 01:55:17

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

Start and custom Fonts
15:11

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

Header
18:58

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

Header (part 2)
17:19

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)
Footer
11:06

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

Main visual
10:29

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)

Claims
18:46

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)

Portfolio
18:58

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)

A few final touches
04:30
+
Javascript quickstart
22 Lectures 03:42:31

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.

A programming language for the Web
02:46

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

Our first running code
11:48

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

Variables: a place to put things in
06:49

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

Variable declaration and value
04:20

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

External Resources

Basic data types and operators
19:41

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

The type of a variable
03:11

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

Functions
03:10

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

Functions in practice
17:20

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

JSBIN Session for this lecture: JSBIN session

External Resources

The Return statement
00:51

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

Variable scope
13:55

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

Let's talk about Objects
19:54

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

The Object context
08:08

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

Assignments by value or reference
10:58

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

Another way to create an Object (or to skin a cat)
14:21

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

The function Prototype
13:30

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

JSBIN session for this lecture: JSBIN session

The function Prototype workshop
10:36

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

Strings.. revisited
07:53

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

Function Callbacks
09:42

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:

Arrays and implicit iteration
19:59

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:

Conditional statements
09:06

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

Explicit iteration with the for loop
12:57

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

External Resources

Library and API
01:36
+
The browser environment: the DOM
6 Lectures 56:48

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

Javascript and the DOM
09:29

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

Let's create some HTML using Javascript!
10:18

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

External Resources

DOM Events
03:44

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

DOM Event handling exercise (part 1)
16:47

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

JSBIN session for this lecture: JSBIN session

External Resources

DOM Event handling exercise (part 2)
13:04

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

There's room for improvement
03:26
+
jQuery quickstart
11 Lectures 01:41:52

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

External Resources

jQuery primer
05:34

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

Using jQuery - browser events
10:24

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

Using jQuery - the DOM
13:26

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

Quick recap
03:59

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

External Resources

HTTP REST JSON
02:23

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

Ajax primer
05:59

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

Same Origin Policy
03:50

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.

Update 2016: Recent changes in Chrome Security Policy
08:03

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)

Ajax workshop (part 1)
14:59

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)

Ajax workshop (part 2)
17:58

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)

Ajax workshop (part 3)
15:17
+
Advanced Javascript: Backbone.js
7 Lectures 01:23:44

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

External Resources

Introducing Backbone.js
03:18

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
17:24

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

Quick recap on Backbone.Model
03:44

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
09:48

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

Backbone.View
18:12

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

Backbone.View and UI events
12:05

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)

Backbone.Router
19:13
+
BackboneJS Workshop: Foogle play store
12 Lectures 03:01:07

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)

Project briefing
05:11

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)

Markup and style - the header
19:13

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)

Markup and style - the sidebar
10:07

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)

Markup and style - books list
14:11

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)

Markup and style - book detail
18:51

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)

Coding the router
15:38

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)

Coding the books list (part 1)
17:59

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)

Coding the books list (part 2)
15:35

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)

Coding the books list (part 3)
18:10

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)

Coding the book detail
15:02

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)

Book detail - Debugging edge case scenarios (zip)
14:37

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)

Underscore templating
16:33
3 More Sections
About the Instructor
Davide Molin
4.4 Average rating
344 Reviews
10,063 Students
1 Course
Owner at CodingShack Ltd.

Davide has been passionate about Art, Technology, computers and all tech stuff since he was a kid.

He self-learned programming in C and landed his first job in the nineties, then C++, Object Oriented Programming and then Java and Web Application development in 1999. In 2005 he fell in love with Javascript and Ajax and in 2009 he switched completely to Front End Development full time.

He's been working as a full time developer since 1995, working for companies like Electronic Arts, Mind Candy, Beamly, SAP and global consultancies in different Countries.

He's a firm believer that everything can be learned, if committing enough time and passion into it.

He often enjoys reminding people that you can become a successful developer even without a background in maths (he doesn't have one, nor a degree, having studied Advertising).

He firmly believes that passion and practice are key factors in becoming a successful Web Developer.

He's currently the owner of CodingShack Ltd in London, UK, offering Front End Development consultancy services in London and online training.

When he's not working, playing or dozing in front of his Mac, you can find him enjoying the company of his lovely wife, reading SciFi novels, playing with his favorite Flight Simulator (X-Plane!) and reading/practicing TaiChi/QiGong.