Beginner Full Stack Web Development: HTML, CSS, React & Node
4.7 (166 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,687 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Beginner Full Stack Web Development: HTML, CSS, React & Node to your Wishlist.

Add to Wishlist

Beginner Full Stack Web Development: HTML, CSS, React & Node

Learn web development with HTML, CSS, Bootstrap 4, ES6 React and Node
4.7 (166 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,687 students enrolled
Created by Mark Price
Last updated 5/2017
English
Learn Fest Sale
Current price: $10 Original price: $200 Discount: 95% off
21 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 22 hours on-demand video
  • 13 Articles
  • 23 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build websites with HTML & CSS
  • Build backend servers & APIs with Node and Express
  • Work with NoSQL databases like MongoDB
  • Build full-stack web apps with Facebook's React Framework
  • Build mobile-friendly websites with Bootstrap 4 & CSS
View Curriculum
Requirements
  • You should have a PC or Mac and know how to turn it on!
  • Have an Internet connection
Description

Welcome to the Ultimate Web Developer Bootcamp. This is your one-stop-shop to learn front-end AND back-end development.

We'll take you from absolute beginner to competent full-stack web developer in a matter of weeks.

WHO SHOULD TAKE THIS COURSE?

  • Anyone who is curious about programming
  • Entrepreneurs
  • Those looking for a career change
  • Serious coders & hobbyists
  • Students & teenagers
  • Anyone who wants to learn web development

WHAT YOU WILL LEARN

  • HTML5
  • CSS3
  • Javascript
  • Bootstrap 4
  • DOM Manipulation
  • NPM
  • Node
  • MongoDB
  • REST
  • Express
  • ES6
  • React


Devslopes has taught over 100,000 students how to code. Using our exciting, hands-on teaching style you are sure to master the principles AND have fun at the same time.

We also have a free chat community with over 50,000 students where you can interact and get help from others.

See you on the inside!

- Mark Price

Who is the target audience?
  • This course is for beginners - no prior experience is required
  • This course is for entrepreneurs & hobbyists
  • This course is for those looking for a career change
  • This course is for anyone who wants to learn front-end and backend development
  • This course is for students
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 117 Lectures Collapse All 117 Lectures 22:09:48
+
Getting Started With HTML
9 Lectures 01:05:07

In this video we you'll get an overview of everything you're going to learn to become a full-stack web developer. Learn front end to backend web development with HTML, CSS, Bootstrap 4, es6, Node, Express, Mongo & React.

Preview 07:58

Where to get free live help
00:15

In this video we're going to show you how to install Brackets, a simple Integrated Development Environment (IDE) used for developing. This makes working with HTML, CSS, Javascript and other frameworks a breeze.

Preview 05:36

In this lesson you're going to build your very first Hello World website with HTML! You'll create your first .html file and preview it.

HTML: Building Your First Website
12:47

An introduction to the basic and foundational HTML tags

Intro to HTML, HEAD, BODY, and HEADER
10:32

An introduction to more advanced HTML tags

HTML: Lists, Paragraphs, and Text Styling
07:59

In this lesson you'll learn how to use HTML tables to display data. 

Simple rule when using tables - Use tables for tabular data, use other elements for presentation (designing layouts using css) like div, section, aside, nav etc . which provides meaning to the content they hold rather than using table for everything.

HTML: Displaying Data With Tables
07:38

In this lesson you'll learn how to use HTML <img> tags for displaying images and <form> tags to group form data.

HTML: Images & Forms
12:21

Exercise: Fan Site
00:01
+
Introduction to CSS
11 Lectures 01:27:38

In this lesson we'll discuss what CSS is and how it has evolved over the years.

What is CSS?
03:22

In this lesson we'll discuss 3 different ways to set up CSS in your projects. A few CSS styles will be used that we haven't covered yet. No worries, we will cover how these style properties later in this section.

How to use Inline, Internal and External CSS
08:57

In this lesson we'll cover element, class and id selectors and how they're used to style HTML. 

I'll be using TONS of different CSS styling rules we haven't covered. DON'T WORRY about that. We'll cover all of these styling rules later on in the lessons. Just pay attention to how to use the element, class and id selectors.

CSS: Element, ID & Class Selectors
10:36

In this lesson we'll cover the basics of using colors in CSS

CSS: Colors
14:18

In this lesson we'll cover the basics of using backgrounds and borders in CSS

CSS: Backgrounds & Borders
10:33

Quiz - CSS Basics
5 questions

Exercise: CSS Colors & Backgrounds
00:01

In this lesson we'll demonstrate how to use the browser inspector tools for Chrome, Firefox and Safari. These tools will give you an "under the hood" look at how your HTML and CSS are working together. This is a crucial tool that you will use everyday in web development.

Using browser inspector tools
13:31

In this lesson we'll discuss how HTML parent and child element relationships work. This means having an element with additional elements nested within it. This is important to know so you can understand which CSS rules will apply to certain elements.

CSS: Combinators
05:31

In this lesson we'll cover how you can group selectors and apply the same CSS declaration to multiple elements.

CSS: Grouping
05:32

My favorite word haha. In this lesson we'll discuss how different HTML elements hold a different "point value". Different HTML selectors will take priority over other selectors. This is important to learn so you can understand how browsers decide which CSS rules to apply to your HTML.  

CSS: Specificity
15:16

Specificity Domination
3 questions

Exercise: Extending your CSS skills
00:01
+
Intermediate CSS
6 Lectures 01:01:07

In this lesson you'll learn how to work with different CSS methods for styling text

CSS: Text Styling & Formatting
20:14

In this lesson you'll learn where to find a variety of fonts you can use in your HTML/CSS project. Just remember, using too many different fonts will make your website look "busy" and bring down the quality.

CSS: Google Fonts
08:15

In this lesson you'll learn a variety of ways you can work with images using CSS.

CSS: Images
09:49

In this lesson you will learn the difference between CSS margin and padding and how and when to use them on HTML elements.

CSS: Padding & Margin
09:42

Using CSS you will create your own row and column classes to use in your HTML. Using Rows and Columns are the most powerful way to structure and place content on your website.

CSS: Rows & Columns
13:06

Quiz: Intermediate CSS
5 questions

Exercise: Your first website using CSS!
00:01
+
Advanced CSS: Building and styling website
9 Lectures 03:20:52

Get excited to build your first website using pure HTML and CSS!

Preview 01:15

In this lesson you're going to learn how to build a navbar for a desktop view using raw HTML and CSS. You'll get a taste how powerful CSS is and how you can completely change HTML with it.

CSS: Building the Navbar
22:48

In this video you're going to learn how to make your navbar mobile compatible using CSS. You'll learn how to get all your nav links to hide on collapse of the viewport.

CSS: Making the Navbar Mobile Responsive - Part 1
11:00

In this lesson you're going to learn how to get your nav links to appear in a dropdown menu using CSS. We'll be using a tiny bit of Javascript to do this - Don't worry if you don't understand Javascript yet, you'll learn more about Javascript in later video's. Just follow along and have fun!

CSS: Making the Navbar Mobile Responsive - Part 2
23:44

In this lesson we're going to build a section of our website using form groups and styling them with CSS.

CSS: Creating the Form Group
30:47

In this video you're going to learn how to use responsive iframes in your HTML which are used to embed video into your websites. We'll also add some addition tweaks to this using CSS.

CSS: Working with iframes
22:17

In this video you're going to take your CSS skills to a new level and use box shadows to create really cool effects on images. You can use these box shadows on almost anything! Just don't go crazy with them on your own websites ;)

CSS: Working with images and box shadows
42:35

In this video you're going to learn how to place text and images next to each other in your HTML. We'll also use CSS to help control the layout of it. This is going to be helpful to learn as you'll use this skill when you build your own websites.

CSS: Working with text and image spacing
28:25

Drum roll please....Using HTML and CSS lets build the last part of our website, the footer!

CSS: Building the footer
18:01
+
Learning to Code With Javascript
19 Lectures 03:21:06

In this video you'll get an introduction to Javascript, what it is and how it's used.

Time to Javascript
08:50

In this video we're going to show you some great references to help you with Javascript.

Javascript Reference
04:21

In this video we'll learn how to properly use comments and link javascript files in our projects.

Javascript: Comments & How to Link Scripts
07:44

In this video we are going to learn how to use Variables and Strings in Javascript

Preview 12:57

In this video we are going to learn how to use Numbers in Javascript

Javascript: Numbers
08:03

In this video we are going to learn how to use Comparison Operators in Javascript

Javascript: Comparison Operators
15:40

In this video we are going to learn how to use Logical Operators in Javascript

Javascript: Logical Operators
15:19

In this video we are going to learn how to use Arrays in Javascript

Javascript: Arrays
16:16

In this video we are going to learn how to use Loops in Javascript

Javascript: Loops
14:22

In this video we are going to learn how to use Loops and Arrays in Javascript

Exercise: Loops & Arrays
00:01

In this video we are going to learn how to use Functions in Javascript

Javascript: Functions
22:19

Exercise: Javascript Ops
00:01

In this video we are going to learn how to use Objects in Javascript

Javascript: Objects
27:05

In this video we are going to learn how to use Bind in Javascript

Javascript: Bind
08:30

In this video we are going to set up an HTML form. We will later interact with this form using Javascript.

Percentage Calculator - Setting Up the Form
07:56

In this video we will cover how to grab HTML elements with Javascript.

Percentage Calculator - Grabbing Elements With Javascript
10:38

In this video we are going to learn how to respond to an event using Javascript when a button is clicked.

Percentage Calculator - Using Event Listeners
12:54

In this video we are going to learn how to use Javascript to perform math algorithms so our calculator can solve "x is what % of y"

Percentage Calculator - Algorithm & Prevent Default
08:09

Exercise: Percentage Calculators
00:01
+
Version Control With Git
8 Lectures 01:20:12

macOS Terminal Basics
14:23

Git Basics
16:20

Setting up Github on macOS
05:34

Github vs Bitbucket
03:06

Local & Remote Repositories
17:32

Working Through Git Merge Conflicts
11:17

Exercise: Pushing to Github
00:01
+
Introduction to Bootstrap 4
6 Lectures 41:30

Bootstrap 4 is the most popular HTML, CSS, and JS framework in the world. It makes laying out websites a breeze!

What is Bootstrap 4?
03:12

In this video you're going to learn how to download Bootstrap 4

Downloading Bootstrap 4
03:04

In this video you're going to learn how to setup and use Bootstrap 4 in your project.

Bootstrap 4: Project Setup
07:15

Bootstrap 4 has so many pre-built HTML components which also include pre-defined styled classes! It's nice when someone does the work for you  

Bootstrap 4: Overview of Bootstraps Components
05:57

In this video we dive through some of Bootstrap 4's pre-built classes so we can get a basic understanding how these classes are set up. This way, if we need to override any Bootstrap 4 classes we'll have a better understanding how to.

Bootstrap 4: Understanding Bootstraps Classes
03:15

Bootstrap 4: Using the Grid System
18:47
+
Bootstrap 4: Creating a Login Portal
4 Lectures 01:03:14

In this video we are going to use a Bootstrap 4 card component for our Login Portal. We'll make some additional adjustments to it with CSS.

Bootstrap 4 Cards: Creating the Sign-in Portal Box
19:36

In this video we are going to use a Bootstrap 4 form group in our HTML for our input fields. We'll use some additional CSS to style them.

Bootstrap 4 Forms: Adding the input fields
16:38

Bootstrap 4 comes with some great button classes. In this video we're going to create the Sign In button and add some labels to our HTML.

Bootstrap 4 Buttons: Adding the Sign In button and Labels
18:31

The greatest part of Bootstrap 4! Bootstrap 4 has different column classes you can add which change the column width behavior on different sized viewports. 

Bootstrap 4 Grids - Finishing Mobile Compatibility
08:29
+
Bootstrap 4: Skate or Die Website
9 Lectures 02:12:33

In this video we are going to preview the awesome skate website we're going to build using Bootstrap 4 and CSS.

Preview 01:16

In this video we are going to use a Bootstrap 4 navbar component in our HTML for the first building block of our  website! You'll see how cool this is and how it works right out of the box on desktop and mobile. Wow I love Bootstrap 4 

Bootstrap 4: Working with Navbars
10:32

A carousel? Are we going to the fair? Heck no! We're going to use a Bootstrap 4 carousel component to display an image slide in our HTML.

Bootstrap 4: Using Carousels
23:15

In this video we are going to learn how to nest Bootstrap 4 rows and columns so we can more precisely place content in HTML. 

Bootstrap 4: Nesting rows and columns
20:55

In this video we are going to learn how to use a Bootstrap 4 Modal component. This is like a popup that can display on your HTML page. We'll create our first Modal and add some content to it.

Bootstrap 4: Modals
16:11

In this video we are going to use some Bootstrap 4 image and button classes to style......well....our images and buttons!

Bootstrap 4: Adding images and buttons
18:58

Did ya know....you can size your Bootstrap 4 modals!! Yup!

Bootstrap 4: Sizing Modals
18:19

In this video we're going to build the footer of our website using Bootstrap 4. Why do they call it a footer? Well....your feet are placed at the bottom of your body.... So it only makes sense that the footer is placed at the bottom of an HTML body, RIGHT?

Bootstrap 4: Building the Footer
07:34

In this video we're going to show you how to add some awesome icons to your Bootstrap 4 website! Skate or Die 

Bootstrap 4: Working with Font Awesome Favicons
15:33
+
Intro to Node, Mongo, & REST APIs
20 Lectures 03:22:52

In this video we are going to learn what exactly is a web request and how they're made. In this section we will use a combination of Node, Mongo & REST API's to make our own requests. 

Preview 17:12

In this video we are going to learn how to install Node on our Mac

Installing Node on macOS
07:49

In this video we are going to learn what JSON is and how it can encapsulate data to be sent over the web.

All About JSON
10:40

In this video we are going to learn the basics of Node

Basics of Node
09:23

In this video we are going to learn about Node modules and what they are.

Node Modules
05:39

Exercise: Mastering Node Modules
00:01

In this video you are going to learn how to create you first API using Node and Express. 

Building Your First API
16:58

In this video you are going to learn how to use an awesome tool called "Postman" which will help you in your own development when testing different kinds of requests over an API.

Postman, GET & POST Requests
19:23

In this video you are going to learn how to make put and delete requests using Node and Express

URL Parameters & Delete Requests
18:16

Exercise: Creating a Node Calculator
00:01

In this video you are going to learn how to install Mongo on your Mac.

Installing MongoDB on macOS
05:41

In this video you are going to learn how to make insertions using the Mongo Shell.

Working With the Mongo Shell
12:18

In this video you are going to learn how to search for data in your Mongo database.

Searching for Documents
08:04

In this video you are going to learn how to delete data from your Mongo database.

Deletions & Documentation
04:24

In this video we going to create our own Mongo database and communicate with it using Node and Express.

Swag Shop API: Project Creation
10:09

In this video we are going to learn how to make Models to define the data we're going to put in our Mongo database using Node and Express.

Swag Shop API: Creating the Models
14:41

In this video we are going to learn how to post products to our Mongo database using post requests with Node and express

Swag Shop API: Posting Products
12:55

In this video we are going to learn how to make get requests using Node and express to grab a list of products from our Mongo database.

Swag Shop API: Fetching Products
09:56

Exercise: Extending the API
00:01

In this video we are going to learn how to update our wishlist on our Mongo database and display those updated items back to the user using Node and Express.

Swag Shop API: Populating Data
19:21
1 More Section
About the Instructor
Mark Price
4.5 Average rating
21,887 Reviews
111,320 Students
15 Courses
Unity 3D Android iOS 10 Swift 3 & React Teacher

I am a veteran mobile developer having built over 57 mobile apps for iOS and Android, and I've also build multiple Unity 3D games, including Call of Duty Ghosts mobile. 

I also spend most of my days now as a professional engineering instructor - changing the lives of students throughout the world - helping them make amazing salaries as engineers.

My passion is helping people reveal hidden talents and guide them into the world of startups and programming. I currently am teaching iOS 10, Apple TV & tvOS, React & Flux web development, Objective-C, Swift 3, Android, Javascript, Node, and Java. I also teach Unity 3D game development.