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
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
03:31

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

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
11:04

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
+ HTML & CSS
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
05:21

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
07:56

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
12:02

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

Styling Our Simple Page
12:44

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
13:20

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
12:00

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
04:45

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
08:05

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

HTML Forms
15:25

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
16:15

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
08:35

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
10:09
+ 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.

Arrays
09:30

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

Challenge: Greetings
04:25

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.

Objects
08:31

Another challenge for the student.  Good luck!

Challenge: Company
07:08

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.

Equality
11:25

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

Loops
09:07

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

Math
11:42

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
06:38
Callbacks
17:25
+ The DOM
8 lectures 01:04:47
Section Boilerplate
00:15

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
08:27

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

Getting Elements
06:56

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

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

Query Selector
06:56

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

Events
11:34

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

HTML Manipulation
09:33

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

jQuery
12:02
+ Clockworks
8 lectures 54:06

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

Setting Up
04:16

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

HTML & CSS
10:20

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

Playing Sound With JS
04:45

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
12:13

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

We will also see the ...rest operator for the first time.

Button Functions
11:33

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

Freezing Inputs
02:29

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

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

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

Units: Viewport Units
07:50

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

Units: Relative Units
15:20

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

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
12:03

Keyframe animations offer a powerful way to create complex animations.

Animations: Keyframes
12:57

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

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
13:34

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
02:39

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
07:06

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
10:12
+ 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?
07:52

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
11:00

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

Wrapping
06:34

A challenge for the student! Good luck.

Life's A Beach Challenge
08:24

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
08:18

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

Growing & Shrinking
10:24

Another challenge for the student! Good luck :)

Holy Grail Challenge
10:35

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

Aligning Items
06:12

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

Order
05:50

The final flexbox challenge.  Good luck.

Flexbox Times Challenge
11:01
+ 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
04:58

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

Compiling Sass Files
08:25

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

Sass Syntax
13:30

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.

Variables
08:39

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

Variable Scope
06:21

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.

Functions
11:05

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

Mixins
04:53

This video presents a challenge for the student.

Mixin Challenge
04:37

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.

Extends
05:58

This video presents a challenge for the student.

Extends Challenge
05:52

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

Conditionals
07:26

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.

Loops
07:53

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

Partials
08:00
+ 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.

Setup
15:07
Project Code
00:07

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

CSS Prerequisites
13:12

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

Landing Page
09:21

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

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

Creating the Dimmed Background
12:56

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

Above the Fold Content
17:03

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
05:43

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

Styling the Sidebar Pt.1
11:51

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

Styling the Sidebar Pt. 2
15:00

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

Info Section
09:03

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
10:42

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

Location Section
08:23

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
13:41

Here we will finish the testimonial section of the project.

Testimonial Section Pt. 2
16:18

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
08:02

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

Footer Section
06:41
+ HTML5
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.

Forms
10:26

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.

Video
07:21

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

Data
05:23

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

HTML Validation
04:34

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

Favicons
05:12

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

The Dialog Element
09:01

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
12:30

The geolocation API lets you collect a users coordinates.

Geolocation API
06:25

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
14:32

This video presents a challenge for the student.

Web Storage API Challenge
15:45

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
22:53

Continues detailing how to use CRUD operations with IndexedDB.

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

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. 


Projects

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.