Foundations of Front-End Web Development

Learn the skills to quickly start a career in Front-End Development today!
3.9 (60 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.
1,010 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 129
  • Length 20.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2014 English

Course 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!

What are the 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

What am I going to 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!
  • 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).

What 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)

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Before starting! please read me.
Article
02:31

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.

01:36

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.

01:43

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

01:58

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

01:51

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

01:49

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

04:17

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

03:44

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.

Section 2: HTML Foundations
03:55

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

02:57

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

02:42

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.

05:33

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

5 questions

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.

04:49

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

08:26

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

07:00

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:

12:52

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

12:43

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

01:37

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

Inline and Block level Elements
4 questions
Section 3: Semantic HTML
11:57

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:

09:44

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)

14:34

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

11:07

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)

03:09

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

External Resources

05:58

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)

06:53

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.

04:31

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

16:18

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.

Semantic tags
4 questions
Section 4: CSS
02:28

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

12:07

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)

02:13

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.

05:48

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

07:54

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

02:35

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

06:16

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

08:10

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)

11:48

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

16:21

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

12:24

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

01:14

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

08:21

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

18:40

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

11:44

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

02:05

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

09:12

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

07:56

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

09:58

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/

14:28

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

22 pages

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:

07:27

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

JSBIN used for this lecture:

08:28

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:

Quick recap on floating and clearing
7 pages
Section 5: HTML and CSS Workshop: From a PSD to HTML/CSS!
15:11

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

18:58

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

17:19

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

11:06

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)
10:29

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

18:46

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)

18:58

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)

04:30

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)

Section 6: Javascript quickstart
02:46

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.

11:48

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

06:49

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

04:20

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

19:41

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

External Resources

03:11

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

03:10

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

17:20

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

00:51

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

JSBIN Session for this lecture: JSBIN session

External Resources

13:55

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

19:54

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

08:08

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

10:58

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

14:21

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

13:30

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

10:36

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

JSBIN session for this lecture: JSBIN session

07:53

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

09:42

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

19:59

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:

09:06

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:

12:57

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

01:36

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

External Resources

Section 7: The browser environment: the DOM
09:29

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

10:18

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

03:44

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

External Resources

16:47

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

13:04

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

JSBIN session for this lecture: JSBIN session

External Resources

03:26

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

Section 8: jQuery quickstart
05:34

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

External Resources

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Davide Molin, 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.

Ready to start learning?
Take This Course