Course Overview
Now with over 10 hours of React content.
Massive new React "expansion pack" covers: React basics, JSX, props, state, Vite, MaterialUI, hooks, useEffect, React design patterns, and more.
Hi! Welcome to the brand new version of The Web Developer Bootcamp, Udemy's most popular web development course. This course was completely overhauled to prepare students for the current job market, now with over 70 hours of total content! This is the only course you need to learn web development. There are a lot of options for online developer training, but this course is without a doubt the most comprehensive and effective on the market. Here's why:
This is the only Udemy course taught by a professional bootcamp instructor with a track record of success.
92% of my in-person bootcamp students go on to get full-time developer jobs. Most of them are complete beginners when I start working with them.
The previous 2 bootcamp programs that I taught cost $14,000 and $21,000. This course is just as comprehensive but with latest modern content for a fraction of the price.
Everything I cover is up-to-date and relevant to the current developer job market. This course does not cut any corners. I spent 8 months redoing this behemoth of a course!
We build 13+ projects, including a gigantic production application called YelpCamp. No other course walks you through the creation of such a substantial application.
The course is constantly updated with new content, projects, and modules. Think of it as a subscription to a never-ending supply of developer training.
You get to meet my cats and chickens!
When you're learning to program you often have to sacrifice learning the exciting and current technologies in favor of the "beginner friendly" classes. With this course, you get the best of both worlds. This is a course designed for the complete beginner, yet it covers some of the most exciting and relevant topics in the industry.
Throughout the brand new version of the course we cover tons of tools and technologies including:
HTML5
CSS3
Flexbox
Responsive Design
JavaScript (including modern syntax, ES6, ES2018, etc.)
Asynchronous JavaScript - Promises, async/await, etc.
AJAX and single page apps
Bootstrap 4 and 5
ReactJS
SemanticUI
Bulma CSS Framework
DOM Manipulation
Unix (Command Line) Commands
NodeJS
NPM
ExpressJS
Templating
REST
SQL vs. NoSQL databases
MongoDB
Database Associations
Schema Design
Mongoose
Authentication From Scratch
Cookies & Sessions
Authorization
Common Security Issues - SQL Injection, XSS, etc.
Developer Best Practices
Deploying Apps
Cloud Databases
Image Upload and Storage
Maps and Geocoding
This course is also unique in the way that it is structured and presented. Many online courses are just a long series of "watch as I code" videos. This course is different. I've incorporated everything I learned in my years of teaching to make this course not only more effective but more engaging. The course includes:
Lectures
Code-Alongs
Projects
Exercises
Research Assignments
Slides
Downloads
Readings
Too many pictures of my dog Rusty
If you have any questions, please don't hesitate to contact me. I got into this industry because I love working with people and helping students learn. Sign up today and see how fun, exciting, and rewarding web development can be!
FAQ
FAQ area empty
Course curriculum
-
What Matters In This Section
Xem trước -
Introduction to HTML
Xem trước -
Our Very First HTML Page
Xem trước -
TIP: Mozilla Developer Network
Xem trước -
Paragraph Elements
Xem trước -
Heading Elements
Xem trước -
Introduction to the Chrome Inspector
Xem trước -
HTML Boilerplate
Xem trước -
VSCode Tip: Auto-format
Xem trước -
List Elements
Xem trước -
Anchor Tags
Xem trước -
Images
Xem trước -
Comments
Xem trước
-
What Matters In This Section
Xem trước -
What Exactly Is HTML5?
Xem trước -
Block vs. Inline Elements - Divs and Spans
Xem trước -
An Odd Assortment of Elements: HR, BR, Sup, & Sub
Xem trước -
Entity Codes
Xem trước -
Intro to Semantic Markup
Xem trước -
Playing With Semantic Elements
Xem trước -
Screen Reader Demonstration
Xem trước -
VSCode Tip: Emmet
Xem trước
-
What Matters In This Section
Xem trước -
Unit Goals
Xem trước -
Introducing HTML Tables
Xem trước -
Tables: TR, TD, and TH Elements
Xem trước -
Tables: Thead, Tbody, and Tfoot Elements
Xem trước -
Tables: Colspan & Rowspan
Xem trước -
The Form Element
Xem trước -
Common Input Types
Xem trước -
The All-Important Label
Xem trước -
HTML Buttons
Xem trước -
The Name Attribute
Xem trước -
"Hijacking" Google & Reddit's Search
Xem trước -
Radio Buttons, Checkboxes, & Selects
Xem trước -
Range & Text Area
Xem trước -
HTML5 Form Validations
Xem trước -
Creating A Marathon Registration Form Intro
Xem trước -
Creating A Marathon Registration Form Solution
Xem trước
-
What Matters In This Section
Xem trước -
What is CSS?
Xem trước -
CSS is Huge, Don't Panic!
Xem trước -
Including Styles Correctly
Xem trước -
Color & Background-Color Properties
Xem trước -
Colors Systems: RGB & Named Colors
Xem trước -
Colors Systems: Hexadecimal
Xem trước -
A Reminder On Semicolons & CSS
Xem trước -
Common Text Properties
Xem trước -
Font Size Basics With Pixels
Xem trước -
The Font Family Property
Xem trước
-
What Matters In This Section
Xem trước -
Universal & Element Selectors
Xem trước -
The ID Selector
Xem trước -
The Class Selector
Xem trước -
The Descendant Selector
Xem trước -
The Adjacent & Direct-Descendant Selectors
Xem trước -
The Attribute Selector
Xem trước -
Pseudo Classes
Xem trước -
Pseudo Elements
Xem trước -
The CSS Cascade
Xem trước -
WTF is Specificity
Xem trước -
TIP: Chrome Dev Tools & CSS
Xem trước -
Inline Styles & Important
Xem trước -
CSS Inheritance
Xem trước
-
What Matters In This Section
Xem trước -
Opacity & The Alpha Channel
Xem trước -
The Position Property
Xem trước -
CSS Transitions (yay!)
Xem trước -
The Power of CSS Transforms
Xem trước -
Fancy Button Hover Effect CodeAlong
Xem trước -
The Truth About Background
Xem trước -
Google Fonts is Amazing
Xem trước -
Photo Blog CodeAlong Pt. 1
Xem trước -
Photo Blog CodeAlong Pt. 2
Xem trước
-
What Matters In This Section
Xem trước -
What on Earth Is Flexbox?
Xem trước -
Flex-Direction
Xem trước -
Justify-Content
Xem trước -
Flex-Wrap
Xem trước -
Align-Items
Xem trước -
Align-Content & Align-Self
Xem trước -
Flex-Basis, Grow, & Shrink
Xem trước -
Flex Shorthand
Xem trước -
Responsive Design & Media Queries Intro
Xem trước -
The Power of Media Queries
Xem trước -
Building a Responsive Nav
Xem trước
-
What Matters In This Section
Xem trước -
WTF Is Bootstrap
Xem trước -
Including Bootstrap & Containers
Xem trước -
Bootstrap Buttons
Xem trước -
Bootstrap Typography & Utilities
Xem trước -
Badges, Alerts, & Button Groups
Xem trước -
Intro to the Bootstrap Grid
Xem trước -
Responsive Bootstrap Grids
Xem trước -
Useful Grid Utilities
Xem trước -
Bootstrap & Forms
Xem trước -
Bootstrap Navbars
Xem trước -
Bootstrap Icons!
Xem trước -
Other Bootstrap Utilities
Xem trước -
A Mixed Bag of Other Bootstrap Stuff
Xem trước
-
What Matters In This Section
Xem trước -
Why JavaScript is Awesome
Xem trước -
Primitives & The Console
Xem trước -
JavaScript Numbers
Xem trước -
WTF is NaN
Xem trước -
Quick Numbers Quiz
Xem trước -
Variables & Let
Xem trước -
Updating Variables
Xem trước -
Increment Operator Explanation: i++ vs ++i
Xem trước -
Const & Var
Xem trước -
Booleans
Xem trước -
Variable Naming and Conventions
Xem trước
-
What Matters In This Section
Xem trước -
Decision Making With Code??
Xem trước -
Comparison Operators
Xem trước -
Equality: Triple Vs. Double Equals
Xem trước -
Console, Alert, & Prompt
Xem trước -
Running JavaScript From A Script!
Xem trước -
If Statements
Xem trước -
Else-If
Xem trước -
Else
Xem trước -
Nesting Conditionals
Xem trước -
Truth-y & False-y Values
Xem trước -
Logical AND
Xem trước -
Logical OR
Xem trước -
Logical NOT
Xem trước -
The Switch Statement Is...A Lot
Xem trước
-
What Matters In This Section
Xem trước -
Introducing Arrays
Xem trước -
Array Random Access
Xem trước -
Push & Pop
Xem trước -
Shift & Unshift
Xem trước -
Concat, indexOf, includes & reverse
Xem trước -
Slice & Splice
Xem trước -
Reference Types & Equality Testing
Xem trước -
Arrays + Const
Xem trước -
Multi-Dimensional Arrays
Xem trước
-
What Matters In This Section
Xem trước -
Intro to For Loops
Xem trước -
More For Loops Examples
Xem trước -
The Perils Of Infinite Loops :(
Xem trước -
Looping Over Arrays
Xem trước -
Nested Loops
Xem trước -
Another Loop: The While Loop
Xem trước -
The Break Keyword
Xem trước -
Writing a Guessing Game
Xem trước -
Guessing Game Explanation And Bug Fixes
Xem trước -
The Lovely For...Of Loop
Xem trước -
Iterating Over Objects
Xem trước -
Todo List Project Intro
Xem trước -
Todo List Project CodeAlong
Xem trước
-
What Matters In This Section
Xem trước -
Function Scope
Xem trước -
Block Scope
Xem trước -
Lexical Scope
Xem trước -
Function Expressions
Xem trước -
Higher Order Functions
Xem trước -
Returning Functions
Xem trước -
Defining Methods
Xem trước -
The Mysterious Keyword 'this'
Xem trước -
Using Try/Catch
Xem trước
-
What Matters In This Section
Xem trước -
What Is This Section Even About?!
Xem trước -
The forEach Method
Xem trước -
The map Method
Xem trước -
Intro to Arrow Functions
Xem trước -
Arrow Function Implicit Returns
Xem trước -
Arrow Functions Wrapup
Xem trước -
SetTimeout and setInterval
Xem trước -
The filter Method
Xem trước -
Some & Every Methods
Xem trước -
The Notorious Reduce Method
Xem trước -
Arrow Functions & 'this'
Xem trước
-
What Matters In This Section
Xem trước -
Introducing the DOM
Xem trước -
The Document Object
Xem trước -
GetElementById
Xem trước -
GetElementsByTagName & className
Xem trước -
QuerySelector & querySelectorAll
Xem trước -
InnerHTML, textContent, & innerText
Xem trước -
Attributes
Xem trước -
Changing Styles
Xem trước -
ClassList
Xem trước -
Traversing Parent/Child/Sibling
Xem trước -
Append & AppendChild
Xem trước -
RemoveChild & remove
Xem trước -
Pokemon Sprites Demo
Xem trước
-
What Matters In This Section
Xem trước -
Intro to Events
Xem trước -
Inline Events
Xem trước -
The Onclick Property
Xem trước -
AddEventListener
Xem trước -
Random Color Exercise
Xem trước -
Events & The Keyword This
Xem trước -
Keyboard Events & Event Objects
Xem trước -
NEW VERSION: Form Events & PreventDefault
Xem trước -
NEW VERSION: Practice With Form Events & PreventDefault
-
ORIGINAL VERSION: Form Events & PreventDefault
-
Input & Change Events
-
Event Bubbling
-
Event Delegation
-
What Matters In This Section
-
What is Templating?
-
Configuring Express For EJS
-
Setting The Views Directory
-
EJS Interpolation Syntax
-
Passing Data To Templates
-
Subreddit Template Demo
-
Conditionals in EJS
-
Loops In EJS
-
A More Complex Subreddit Demo
-
Serving Static Assets In Express
-
Bootstrap + Express
-
EJS & Partials
-
What Matters In This Section
-
Get Vs. Post Requests
-
Defining Express Post Routes
-
Parsing The Request Body
-
Intro to REST
-
RESTful Comments Overview
-
RESTful Comments Index
-
RESTful Comments New
-
Express Redirects
-
RESTful Comments Show
-
The UUID Package
-
RESTful Comments Update
-
Express Method Override
-
RESTful Comments Delete
-
What Matters In This Section
-
What is Mongoose
-
Connecting Mongoose to Mongo
-
Our First Mongoose Model
-
Insert Many
-
Finding With Mongoose
-
Updating With Mongoose
-
Deleting With Mongoose!
-
Mongoose Schema Validations
-
Additional Schema Constraints
-
Validating Mongoose Updates
-
Mongoose Validation Errors
-
Model Instance Methods
-
Adding Model Static Methods
-
Mongoose Virtuals
-
Defining Mongoose Middleware
-
What Matters In This Section
-
Authentication Vs. Authorization
-
How to (not) Store Passwords
-
Cryptographic Hashing Functions
-
Password Salts
-
Intro to Bcrypt
-
Auth Demo: Setup
-
Auth Demo: Registering
-
Auth Demo: Login
-
Auth Demo: Staying Logged In With Session
-
Auth Demo: Logout
-
Auth Demo: Require Login Middleware
-
Auth Demo: Refactoring To Model Methods
-
Intro To Image Upload Process
-
The Multer Middleware
-
Cloudinary Registration
-
Environment Variables with dotenv
-
Uploading To Cloudinary Basics
-
Storing Uploaded Image Links In Mongo
-
Displaying Images In A Carousel
-
Fixing Our Seeds
-
Adding Upload to Edit Page
-
Customizing File Input
-
A Word Of Warning!
-
Deleting Images Form
-
Deleting Images Backend
-
Adding a Thumbnail Virtual Property
Requirment
-
Have a computer with Internet
-
Be ready to learn an insane amount of awesome stuff
-
Prepare to build real web apps!
-
Brace yourself for stupid jokes about my dog Rusty
Outcomes
-
The ins and outs of HTML5, CSS3, and Modern JavaScript
-
Make REAL web applications using cutting-edge technologies
-
Create responsive, accessible, and beautiful layouts
-
Recognize and prevent common security exploits like SQL-Injection & XSS
-
Continue to learn and grow as a developer, long after the course ends
-
Create a blog application from scratch using Node, Express, and MongoDB.
-
Create a complicated yelp-like application from scratch
-
Deploy your applications and work with cloud databases
-
Create static HTML and CSS portfolio sites and landing pages
-
Think like a developer. Become an expert at Googling code questions!
-
Create complex HTML forms with validations
-
Implement full authentication from scratch!
-
Use CSS Frameworks including Bootstrap 5, Semantic UI, and Bulma
-
Implement responsive navbars on websites
-
Use JavaScript variables, conditionals, loops, functions, arrays, and objects
-
Write Javascript functions, and understand scope and higher order functions
-
Master the "weird" parts of JavaScript
-
Create full-stack web applications from scratch
-
Manipulate the DOM with vanilla JS
-
Write JavaScript based browser games
-
Use Postman to monitor and test APIs
-
Use NodeJS to write server-side JavaScript
-
Write complex web apps with multiple models and data associations
-
Write a REAL application using everything in the course
-
Use Express and MongoDB to create full-stack JS applications
-
Use common JS data structures like Arrays and Objects
-
Master the command line interface
-
Use NPM to install all sorts of useful packages
-
Understand the ins and outs of HTTP requests
-
Create your own Node modules
-
Make a beautiful, responsive photographer's portfolio page
-
Create a beautiful, responsive landing page for a startup
-
Implement user authentication
-
Create a beautiful animated todo list application
-
Create single page applications with AJAX
Instructor
Nguyễn Đình Cường
1.2
-
1 Student
-
330 Courses
-
1253 reviews
Xin chào các bạn, tôi là Nguyễn Đình Cường, một lập trình viên và giảng viên đam mê công nghệ với hơn 15 năm kinh nghiệm trong ngành công nghiệp phần mềm. Tôi tốt nghiệp từ Bưu Chính Viễn Thông và đã từng làm việc cho một số công ty công nghệ hàng đầu như FPT Software và VinGroup. Với chuyên môn chính là phát triển ứng dụng web, tôi đã làm việc với nhiều công nghệ như HTML, CSS, JavaScript, React cho front-end và Node.js, Express, MongoDB cho back-end. Không chỉ dừng lại ở việc viết mã, tôi còn yêu thích tìm hiểu sâu về thiết kế hệ thống và kiến trúc phần mềm. Tôi tin rằng quá trình học lập trình không chỉ đơn thuần là lý thuyết, mà còn là sự trải nghiệm thực tế và giải quyết vấn đề. Trong các khóa học của mình, tôi cố gắng cung cấp cho học viên những bài giảng thú vị và dễ hiểu, cùng với các bài tập thực hành giúp củng cố kiến thức. Tôi hy vọng rằng qua các khóa học của mình, bạn sẽ không chỉ học được cách viết mã, mà còn phát triển tư duy lập trình và kỹ năng giải quyết vấn đề. Hãy cùng nhau khám phá thế giới lập trình và biến ý tưởng của bạn thành hiện thực! Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại liên hệ với tôi. Tôi rất vui được hỗ trợ bạn trong hành trình học tập của mình!
View Details