The Complete 2020 Web Developer Master Course

Everything you need to know to become a Web Developer in 2020!

4.30 (963 reviews)
Udemy
platform
English
language
Web Development
category
instructor
30,437
students
66 hours
content
Nov 2020
last update
$59.99
regular price

What you will 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.

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!

Content

Introduction

Atom Code Editor
Creating Files & Directories
Atom Settings & Packages
Atom Keyboard Shortcuts
Course Outline: Frontend
Course Outline: Backend

HTML & CSS

HTML Boilerplate
Creating A Simple Page
Basic CSS
Styling Our Simple Page
Semantic HTML
Selectors & Specificity
Specificity Quiz
Background Images
Block and Inline
HTML Forms
The Box Model
Box Model Quiz
Making A Navbar
HTML Tables

Intro to JavaScript

Logging
Variables
Expressions
If Statements
Logical Operators
Functions
Arrays
Challenge: Greetings
Objects
Challenge: Company
Equality
Loops
Math
Challenge: Fizz Buzz
Callbacks

The DOM

Section Boilerplate
JS In The Web
Getting Elements
Arrays of Elements
Query Selector
Events
HTML Manipulation
jQuery

Clockworks

Setting Up
HTML & CSS
Playing Sound With JS
Detecting Changes
Button Functions
Freezing Inputs
Finishing Up
Note about the code.

Intermediate CSS

Units: Viewport Units
Units: Relative Units
Animations: Transitions
Animations: Transforms
Animations: Keyframes
Positioning: Relative
Positioning: Absolute
Positioning: Fixed
Positioning: Sticky
Responsive Design: Media Queries

Flexbox

What is Flexbox?
Axis & Direction
Wrapping
Life's A Beach Challenge
Aligning Content
Growing & Shrinking
Holy Grail Challenge
Aligning Items
Order
Flexbox Times Challenge

Sass

Installing Sass
Compiling Sass Files
Sass Syntax
Variables
Variable Scope
Functions
Mixins
Mixin Challenge
Extends
Extends Challenge
Conditionals
Loops
Partials

Travel Forest

Setup
Project Code
CSS Prerequisites
Landing Page
Breaking Down The Enter Site Animations
Creating the Dimmed Background
Above the Fold Content
Writing the Sidebar Markup
Styling the Sidebar Pt.1
Styling the Sidebar Pt. 2
Info Section
Current Users Section
Location Section
Testimonial Section Pt. 1
Testimonial Section Pt. 2
Deal of the Week Section
Footer Section

HTML5

Forms
Video
Data
HTML Validation
Favicons
The Dialog Element
Constrain Validation API
Geolocation API
Web Storage API
Web Storage API Challenge
IndexedDB Pt. 1
IndexedDB Pt. 2

Get It Done

Setup
Project Code
Writing the default styles
Creating 'The Thing'
Creating the Menu Controller
Creating the Menu Background
Creating the Menu Content
Finishing the Menu Section
Creating the Headers
Creating the Input
Creating the List
Creating the Modal
Formatting Dates with JS
Setting Up Web Storage
Setting Up IndexedDB
Adding Tasks
Reading Tasks
Deleting Tasks
Updating the Theme
Adding the Reset Feature

Bootstrap

Getting Started
Buttons
Text & Typography
Navbars
Sizing & Spacing
Cards
Grid
Responsive Classes
Flexbox
Carousel
Exploring Bootstrap
Bootstrap Themes

Sleepy Mondays

Setup
Project Code
Landing Pt. 1
Landing Pt. 2
Our Team Section
Info Section
Portfolio Section
Pricing Section
FAQ Markup
FAQ Section
Google Maps
Footer
Wow JS
Adding Wow.js To Our Project

Advanced JavaScript

Quirky AND/OR's
Lexical Scope & Closures
Code Blocks
Spread
Destructuring
Array Functional Methods
OOP
Keyword 'this'
Prototypes
Inheritance
ES2015 OOP Syntax
Arrow Functions
Error Handling
Generators
Promises
JavaScript Recap Quiz

Express

Intro to the MEAN Stack
Installing Express
Request & Responses
Creating and Running Express Apps
Exploring Express
Routes
JSON
Post Requests
URL Parameters
EJS Template Engine
MVC Architecture
Express Assignment

Just Me

Preparing the Project
Project Code
Creating the Partials
Breaking Down the Home Page
Writing the Row Template
Creating A Row of Posts
Creating Many Rows of Posts
Viewing Blog Posts
Storing the HTML inside of Post Data
Comment Challenge + Recursion
Comment Solutions
404 Page
About & Contact
Creating the Right Sidebar Partial
Creating the Right Sidebar Dynamically
Filtering By Categories
Filtering By Tags
Cleaning Up

MongoDB

Installing MongoDB
The Mongo Shell
Mongoose
Schema's Part 1
Schema's Part 2
Creating Heroes
Creating the Hall of Heroes
Deleting Heroes
Updating Heroes
Seeding Default Data
Git Crash Course
Heroku
Creating Squads
Reading & Deleting Squads
Displaying A Heroes Squad
Generating Overalls
Displaying A Squads Heroes
Pushing to Heroku

RESTful API's

Ajax
HTTP Verbs
RESTful Architecture
HTTP Status Codes
Creating Our API Part 1
Creating Our API Part 2
Creating the Forms
Using Our API Part 1
Using Our API Part 2
Using Our API Part 3
Default Country Data
Fixing ID's
Preventing Live Changes
Pushing Our API to the Internet

Angular

What is Angular
TypeScript Crash Course
Creating Angular Apps
Module Breakdown
Component Breakdown
Templating
Creating Components
Data Binding
Pipes
Directives
Preparing for the Routing Module
Angular Routing
Calling API's
Building

A Social Media - Authentication

Previewing the Project
Hashes & Salts
Generating Hashes & Salts
Registering Users
Logging In
Preparing the Project
Creating the Components
Project Resources
Setting up the Routes
Creating the Login & Register Pages
Creating the API Service
Logging In & Registering Part 1
Logging In & Registering Part 2
Better Error Messages
Intro to JWT's
Returning JWT's from the Server
Storing Tokens in Local Storage
Fixing Logging In Alerts
Sending Tokens with Our Requests

A Social Media - Adding Friends

Creating the Sidebar & Topbar
Site Navigation
Hard Coding the Other Components
Creating More Schemas
Searching For Users Part 1
Searching For Users Part 2
Adding Users Name to the Topbar
Fixing an Error
Sending Friend Requests
Alert Messages
Creating A User Data Service
Creating A Friend Request Controller
Displaying Friend Requests
Accepting Friend Requests
Adding Titles to Pages
Fixing the Hamburger Icon
Updating the Topbar in Realtime
Making Friend Request UX Changes
Fixing the Searching Problem

A Social Media - Posts & Profiles

Setting Post Themes
Creating Posts
Creating A Get Users Controller
Fixing a Registration Problem
Reading Posts
Displaying Posts
Applying Themes to Posts
Finishing Posts
Liking Posts
Commenting On Posts
Posting Comments in Realtime
Creating Fake Users
Creating Fake Posts
Setting Profile Images
Animating Posts
Fixing An Image Problem
Your Profile: Part 1
Your Profile: Part 2
Other Profiles
Accepting Friends Requests on Profiles
Adding Friends From Profiles
Profile Privacy
Fixing A Subscription Problem

A Social Media - Messages & Relationships

The Send Message Modal
How Messages Work
Sending Messages
Refactoring the Topbar
Message Notifications
Message Previews Pt. 1
Message Previews Pt. 2
Reading Messages Pt. 1
Reading Messages Pt. 2
The Chat Box
Sending Messages with the Chat Box
Deleting Messages
Refactoring the User Service
Cleaning The Routes
Creating Besties Pt. 1
Creating Besties Pt. 2
Limited Amount of Besties
Fixing UX Problems
Fixing More UX Problems
Showing Besties in Sidebar
Feed Section For Besties
Finishing The Special Feed Section
New Friend Alerts
Alert Messages
Comment & Like Alerts
Limiting Alerts
Preparing to Build
Putting It On The Internet
Full Project Code

Screenshots

The Complete 2020 Web Developer Master Course - Screenshot_01The Complete 2020 Web Developer Master Course - Screenshot_02The Complete 2020 Web Developer Master Course - Screenshot_03The Complete 2020 Web Developer Master Course - Screenshot_04

Reviews

Miguel
December 8, 2021
The course scope is just HUGE, and it may be discouraging to complete all of its lessons. The final project is a bit of a pain, it could be presented as "TODO" exercises instead of "following the author". Besides, it would be better IMHO if "project features" came with a new "Angular feature" learning. Anyways the course, although intimidating, is a very good starting point for becoming a Full-stack web developer with sooo many resources (some of them very tricky) to learn of. Keep the good work!
Cyrus
April 14, 2021
This is the best and most comprehensive full stack developer application in 2021, if you aren't learning from Jesse you're probably doing it the wrong way.
Ikhsan
January 28, 2021
Very good course. The explanation is amazing even for complete beginner. It is V=very easy to understand
Juan
November 4, 2020
I can't believe this course is so complete! I really like it, I hope Jesse read this, THANK YOU SO MUCH!
Michael
October 21, 2020
This is the course that made me a full-stack web developer. Taught me everything I needed, and solidified my understanding of the full-stack ecosystem. I'd highly recommend this course for anyone who wants to become a full-stack web developer.
Davide
June 24, 2020
This guy is kinda confusing. Often he makes mistakes, which is absolutely understandable, the problem is that he confuses the user. Sometimes he forgets if he explained something or not so he skip notions making confusion
Travis
April 15, 2020
Thank Jessie for making such a wonderful course. It helps me refresh the fundamentals of becoming a Full Stack Developer
Laura
April 4, 2020
J'utilise déjà ATOM pour des projets personnels, donc je connais déjà ces extensions, même si je ne les utilisent pas toutes et que j'en utilise d'autres. Bien expliquer.
Matthieu
April 1, 2020
Bon j'ai vu 3 vidéos, mais pour le moment c'est cool, il nous montre la mise en place de son env de dev afin que l'on puissent avoir le même.
Akshansh
March 29, 2020
Yes, this course is a good match for what I expected. I got to know about so many things related to web development
Blake
March 21, 2020
consise and well spoken I don't get the alt+F5 option on my Mac as it pops up a keyboard shortcut settings box from system prefs.
Chicha
March 18, 2020
this course have lot of section and hard to complete i think you could break-it to small courses but the content is professional
Jayesh
March 17, 2020
I think this course really helps to refresh any concepts you already knew but most importantly even if you had no idea about the topics taught here it's the perfect place to start. I think angular is taught in the easiest way possible despite it being somewhat more complex than both ReactJS and VueJS.Most importantly I think this course has really great instructor who'll always try to help you.
Vishal
March 15, 2020
the way this course is designed for keeping in mind for beginner is great ,course in divided into sections is good , Thank you
Charles
March 12, 2020
Yes. I have always been a back-end/middleware developer. Never good at making pretty or professional looking front ends. This course is helping to correct that in a big way.

Coupons

DateDiscountStatus
3/11/2020100% OFF
expired

Charts

Price

The Complete 2020 Web Developer Master Course - Price chart

Rating

The Complete 2020 Web Developer Master Course - Ratings chart

Enrollment distribution

The Complete 2020 Web Developer Master Course - Distribution chart
2689414
udemy ID
12/4/2019
course created date
3/11/2020
course indexed date
Lee Jia Cheng
course submited by