The Complete 2020 Web Developer Master Course
4.4 (657 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
30,161 students enrolled

The Complete 2020 Web Developer Master Course

Everything you need to know to become a Web Developer in 2020!
4.4 (657 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
30,161 students enrolled
Created by Jesse Caine
Last updated 5/2020
English [Auto-generated]
Current price: $116.99 Original price: $179.99 Discount: 35% off
2 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 63.5 hours on-demand video
  • 10 articles
  • 53 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • HTML, CSS, JavaScript, the pillar of front end web development.
  • HTML5 API's, such as IndexedDB & Web Storage.
  • Sass, a very powerful CSS preprocessor.
  • Bootstrap, the leading CSS framework for responsive web designs.
  • Express, a flexible back end framework for Node js.
  • MongoDB, the leading noSQL database.
  • RESTful API's, an architecture for handling requests to your site.
  • Angular, a front end JavaScript framework for handling single page applications.
  • How to create and deploy to the web, your own Social Media website with loads of functionality.
Course content
Expand all 339 lectures 63:44:20
+ Introduction
6 lectures 47:34

For the first lecture of the course, I just want to go over the things you need to follow along.  Of course, a browser, I'll be using Google Chrome.  And a code editor, I'll be using Atom.

Preview 03:06

We'll see how we can create files and directories inside of the Atom code editor.

Creating Files & Directories

Here I'll show you what settings you may want to tinker with when you first install Atom.  I'll also recommend installing a few atom packages.

Atom Settings & Packages

In this lecture I'll show you how to use a slew of Atom keyboard shortcuts.  There are a lot of them, and you may want to write them down somewhere.

Atom Keyboard Shortcuts

Here I'll breakdown what you can expect to learn in the course; regarding front-end technologies.  I'll also be previewing the projects that we'll be building along the way.

Preview 13:02

In this lecture we'll see what will be covered in the back-end aspect of the course.

Preview 06:52
12 lectures 02:06:37

This lecture introduces the concept of HTML tags, elements, and attributes.  You will use elements to create the HTML boilerplate, a foundation of all web sites.

HTML Boilerplate

We expand on the content from the last video by introducing more elements and using them to create a basic web page.  The page will have no styling.  We'll add styling to the page in a couple lectures from now, after covering basic CSS.

Creating A Simple Page

As an introduction to CSS we'll see how to select an element, and see how to change that selected elements color, background-color, font, & font-size.

Basic CSS

After learning some CSS, we can go back to our simple page and apply some styles to it!

Styling Our Simple Page

This lecture will shine a light on a very important concept in HTML; semantics.  HTML isn't just about putting content into your web site.  It's also used to convey meaning to search engines.

Semantic HTML

In this lecture we return to CSS and cover a few more ways of selecting elements, we also see how some selectors are more specific than others.

Selectors & Specificity

This is quiz is designed to determine how well you grasp the rules for calculating specificity.

Specificity Quiz
5 questions

A shorter lecture; here I will show you how to set a background image to your site.  I will also show how to have the image always cover your whole page, without repeating, on all screen sizes.

Background Images

Some HTML elements are block elements, some of them are inline elements.  What's the difference?  This lecture will explain it all in detail.  You will also see how to change a block element to an inline element, and vice-versa.

Block and Inline

Here we learn about the HTML form & input tags.  And a whole host of attributes that can be used with them.

HTML Forms

Even though it may not seem like it, basically everything in a web page is a box. 

The box model can be a bit confusing, but I promise, it isn't.  Once you have a grasp on the box model, designing web sites will be just that much easier.

The Box Model

A quiz to test how well you understand The Box Model.

Box Model Quiz
5 questions

In this lecture I will show you how to can use the <ul> & <li> elements to create a sweet navbar. 

Making A Navbar

It's pretty rare that you will be using tables in your every day web sites, but it's still good to now how to use them.

Did you know: Tables used to be used to control the entire layout of a site.  Developers would put everything in a site in one giant table.  And inside that table they would put other smaller tables to be individual sections of the site.  It was a dark and messy time.

HTML Tables
+ Intro to JavaScript
15 lectures 02:40:35

This lecture will cover one of the most fundamental concepts in any programming languages; variables.

In my opinion, the three fundamentals for all programming languages are.

  1. Variables (Covered in this lecture)

  2. If Statement, for controlling the flow of the program.

  3. Functions, for writing repeatable code.

Preview 14:10

It's important to be able to think like a computer, if you're going to be telling a computer what to do. 

Understanding expressions will give you an insight to how computers process values under the hood.

Preview 06:46

If statements allow you to run code only in certain circumstances.  Essentially controlling the flow of your program.

Preview 17:04

Here we'll learn about logical operators.  Logical operators give us more power when it comes to controlling the flow of the program using if statements.

Preview 09:59

Functions allow you to write code once, and run it as many times as you like.  I'll also show you how to use arguments in your functions that give you the ability to write really flexible code.

Preview 22:34

Arrays are sort of like storing multiple variables in a single container.  We'll also see a bunch on commonly used functions that can be called on your arrays.


This lecture provides a challenge for the student.  Good luck!

Challenge: Greetings

This lecture will cover object literals, or objects, for short.  You will also see the this keyword used for the first time.  Much more detail on that in a later section covering advanced JavaScript.


Another challenge for the student.  Good luck!

Challenge: Company

Here we'll see how JavaScript can coerce a value into a new type, to make an equality comparison return true.

We'll also see the difference between loosely equals and strictly equals. 

And finally we'll see that comparing objects for equality is much different than comparing to a primitive type.


In this lecture we'll repeat code as much as we want using for, and while loops.


This lecture is dedicated to handling math operations in JavaScript.  Basic stuff like addition, subtraction, multiplication, division, modulus, exponential, and order of operations.


The final challenge of this section. Good luck!

Did you know: Programming interviewers will sometimes ask potential employees to solve the Fizz Buzz challenge to determine whether or not the candidate knows how to write code.

Challenge: Fizz Buzz
+ The DOM
8 lectures 01:04:47
Section Boilerplate

In this lecture we will use JavaScript in a web site for the first time.  We will also use some built in JavaScript functions that weren't available in out environment from the last section.

JS In The Web

Here we'll learn how to store an HTML element in a JavaScript variable.

Getting Elements

Continuing from the last lecture, here we'll see how to store several elements in a JavaScript array.  Useful for looping through elements and updating many elements at the same time.

We will also be introduced to an array-like element, which is like an array, but not.  I'll show you how to turn an array-like into an actual array.

Arrays of Elements

The query selector offers an easier way to get elements from the DOM.

Query Selector

An event is used to run code when certain things happen to your elements.  IE: They are clicked on, an input changes, etc.


In this lecture you will see how to add classes and update the inner text of your HTML elements dynamically with JavaScript.

HTML Manipulation

jQuery is a library for JavaScript.  It basically let's you do more while writing less code.  It's awesome!

+ Clockworks
8 lectures 54:06

In this opening lecture we will set up the files for the project.

Setting Up

In this one we'll be creating the appearance of the app, using HTML & CSS.


In this short lecture, I'll show you how to play audio, using JavaScript.

Playing Sound With JS

Here we'll be setting up our event listeners to listen for inputs changes so we update our HTML timer element & timer data.

Detecting Changes

Here will run function when the buttons are pressed and also handle the enabling & disabling of buttons.

We will also see the operator for the first time.

Button Functions

Another short lecture, here we'll just make it so we can't change input values while the timer is on.

Freezing Inputs

By the end of this lecture, our timer app will be completely functional. 

Finishing Up
Note about the code.
+ Intermediate CSS
10 lectures 01:39:59

Viewport units are based of your screen size.  These units are by default responsive.

Units: Viewport Units

Relative units offer a better alternative than using pixels for font-sizes, padding, margin, almost everything, actually.

Units: Relative Units

This is the first of a series of three lectures where I cover CSS animations.  Here we will see how to make better hover effects for buttons or links.

Animations: Transitions

This lecture will introduce a new CSS property called, transform.  This property accepts several CSS functions as a value. 

This property is ideal to animate, as it doesn't affect the layout of your page.

Animations: Transforms

Keyframe animations offer a powerful way to create complex animations.

Animations: Keyframes

This lecture will take a look at the CSS position property, specifically what happens when you set it to the value of relative.  The first of many lectures focusing on the CSS position property.

Positioning: Relative

Continuing our look at CSS position, this lecture dives deep into absolute positioning.  Absolute positioning can be a bit confusing at first, I hope to be able to remove some of that confusion.

Positioning: Absolute

Here we'll see how to position elements to the viewport.  Meaning they will always stay in the same place, even while the user scrolls through the page.

Positioning: Fixed

Finishing off out journey on CSS positioning, we'll look at sticky positioning, which is sort of a combination of relative and fixed positioning.

I'll also introduce you to font-awesome, a free library of icons that you can use in your websites.

Positioning: Sticky

This lecture will show you how you can use media queries to change the layout of your page based off the screen size.  Really useful for making creating responsive web sites.

Responsive Design: Media Queries
+ Flexbox
10 lectures 01:26:10

In this section you'll be introduced to flexbox, a powerful technology for simplifying CSS layouts.

What is Flexbox?

In this lecture I emphasize how the flex properties do their work either along the main, or cross axis.  And these axes can be changed using the flex-direction property.

Axis & Direction

Here we'll see how to enable the wrapping of flex items when they can no longer fit on along the main axis.


A challenge for the student! Good luck.

Life's A Beach Challenge

In this lecture I'll show you how to change how the flex items are aligned, similar to justify-content, but for the cross axis.

Aligning Content

Let's see how to make flex items grow when there is still space available in the container.

Growing & Shrinking

Another challenge for the student! Good luck :)

Holy Grail Challenge

Aligning items is similar to the CSS vertical-align property, but for flex items, and better.

Aligning Items

See how you can change the order of the flex items, useful for when changing the layout with media query breakpoints.


The final flexbox challenge.  Good luck.

Flexbox Times Challenge
+ Sass
13 lectures 01:37:37

In this video we will install node & npm.  Then we'll use npm to install node-sass locally on our computers.  This will let us use sass whenever we want.

Installing Sass

Here I'll show you how to compile a Sass file(s) into a CSS file(s).

Compiling Sass Files

Here I'll show you some of the ways that Sass differs in syntax from CSS.

Sass Syntax

Variables are a super powerful feature of Sass that let's you write very DRY code.  I'll show you how to use variables and the different types of variables available in Sass.


In this lecture I'll explain the concept of variable shadowing.

Variable Scope

Functions in Sass are very similar as functions used in JavaScript.  You can use Sass functions to take some hassle away from doing some common calculations used in CSS.


Mixins are similar to functions, the only different is that that print code into your compiled CSS file, rather than returning a value.


This video presents a challenge for the student.

Mixin Challenge

Extends is a feature that allows you to build on top of other CSS rules.  Similar to extending a class in an object oriented programming language.


This video presents a challenge for the student.

Extends Challenge

Basically if statements for CSS.  You can use these for your functions or mixins.


Here I'll show you how to use loops in Sass.  Useful for looping through lists and printing out similar styles without needing for repetitive selectors or declarations.


After this video, you'll be able to compile many Sass files into 1 single CSS file.  Really useful for keeping your code organized.

+ Travel Forest
17 lectures 03:00:19

In this video we will prepare our project by setting up the Sass files and creating the boilerplate.

Project Code

In this lecture I will go over some other CSS concepts that I haven't yet covered.

CSS Prerequisites

In this lecture we will start creating out project by starting with the landing page.

Landing Page

The animations that happen when we click enter site can be a bit confusing at first.  In this lecture, with the help of Photoshop, I'll show you exactly what happens when the user clicks enter site.

Breaking Down The Enter Site Animations

In this lecture we will start creating the enter site animations by starting with the dimmed background sliding in.

Creating the Dimmed Background

Here will create the main content that is seen above the fold after the user enters the site.

Above the Fold Content

In this lecture we'll write write all the markup for the sidebar.  Including the parts that are hidden off screen by default.

Writing the Sidebar Markup

In this video we will start styling the sidebar and form.

Styling the Sidebar Pt.1

By the end of this lecture, we will be completely done with everything above the fold. Well done!

Styling the Sidebar Pt. 2

Here we will continue creating the project by creating the next section directly under the fold.

Info Section

The Current Users section is pretty basic.  But we will be adding some custom JavaScript to make the section be a bit more dynamic.

Current Users Section

In this lecture we will create the locations section of the project.

Location Section

The testimonial section is a little complex, so I decided to break it down into 2 separate lectures.  In this video we will get the background design created, then create the content in the next one.

Testimonial Section Pt. 1

Here we will finish the testimonial section of the project.

Testimonial Section Pt. 2

We are very close to finishing the project.  In this video we will create the Deal of the Week section.

Deal of the Week Section

In the final lecture for this project, we'll create the footer section.  Great!

Footer Section
12 lectures 02:05:52

In this lecture I will show you some of the new input types, as well as some older input types that I haven't yet had a chance to use.


In this video I will show you how to insert video into your pages and how to set video as the background for your pages.


In this video I will show you how to embed data into your HTML by using the data-* attribute.


In this short lecture I will show you to make sure your HTML code is up to the standards of HTML5.

HTML Validation

Although not new in HTML5, it is important for any Web Developer to understands how to insert favicons into their pages.


Here we will see how to use the Dialog element to create pop ups in our pages.

The Dialog Element

In this first lecture covering HTML5 API's I'll show you how to add custom form validation messages to your HTML forms.

Constrain Validation API

The geolocation API lets you collect a users coordinates.

Geolocation API

The HTML5 Web Storage API lets you store data in a users browsers and read the data every time they visit the site.

Web Storage API

This video presents a challenge for the student.

Web Storage API Challenge

IndexedDB is a database system that will store data on a users browser.  It's similar to Web Storage, but a lot more powerful & a lot more complex.

IndexedDB Pt. 1

Continues detailing how to use CRUD operations with IndexedDB.

IndexedDB Pt. 2
  • No prerequisites, this course is for developer of all levels from experienced to inexperienced.

The Complete 2020 Web Developer Master Course has everything you need to become a Web Developer in 2020.  Focusing on both Front and Back-end Development, with an emphasis on the MEAN Stack. During the course, there will be many challenges for the student to test what they've learned, and give them a chance to try to debug something or implement something on their own. 


During the course we will build 6 unique projects, each fixated by a specific technology and purpose.

  • Clockworks (JavaScript Project)

  • Travel Forest (CSS Project)

  • Get It Done (HTML5 API's Project)

  • Sleepy Mondays (Bootstrap Project)

  • Just Me (Express Project)

  • A Social Media (Angular Project)

What's covered in this course?

Of course, the basics, HTML, CSS and JavaScript.  But what else?

  • Express

  • MVC Architecture

  • Asynchronous JavaScript

  • RESTful Routing

  • Angular

  • Sass

  • Bootstrap

  • MongoDB

  • Flexbox

  • HTML5 API's

  • Google Maps API

And much more!

If you get stuck on any part of the course, reach out in the Q/A or leave me a message explaining your problem.  Sometimes a description of the problem and a code snippet will suffice to diagnose a problem.  But other times for the more elusive errors/bugs, I'll ask you to send me your full project code via email, where I will be able to investigate and find the problem for you.  I know what it's like to get stuck on something as a beginner, and this course can present some challenging material at times.  I want you to know that I will do whatever I can to help you with any problem you get!

Happy Learning!

Who this course is for:
  • Anyone interested in learning new things, especially web development!
  • Beginner designers who want to greatly increase their CSS skills
  • Beginner developers who are interested in learning advanced JavaScript.
  • Experienced developers from various backgrounds interested in learning the MEAN stack.