4.5 out of 5
4.5
5136 reviews on Udemy

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

Learn web development with HTML, CSS, Bootstrap 4, ES6 React and Node
Instructor:
Mark Price
92,926 students enrolled
English [Auto-generated] More
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

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

Intro to Web Development

1
Intro to Web Development

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.

2
What is web development?
3
Where should I start as a beginner?
4
HTML: Building Your First Website

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.

5
What you can do as a web developer
6
Frontend vs Backend development
7
Installing an IDE

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.

Getting Started With HTML

1
Intro to HTML, HEAD, BODY, and HEADER

An introduction to the basic and foundational HTML tags

2
HTML: Lists, Paragraphs, and Text Styling

An introduction to more advanced HTML tags

3
HTML: Displaying Data With Tables

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.

4
HTML: Images & Forms

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

5
Exercise: Fan Site

Introduction to CSS

1
What is CSS?

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

2
How to use Inline, Internal and External CSS

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.

3
CSS: Element, ID & Class Selectors

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.

4
CSS: Colors

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

5
CSS: Backgrounds & Borders

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

6
Quiz - CSS Basics
7
Exercise: CSS Colors & Backgrounds
8
Using browser inspector tools

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.

9
CSS: Combinators

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.

10
CSS: Grouping

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

11
CSS: Specificity

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.  

12
Specificity Domination
13
Exercise: Extending your CSS skills

Intermediate CSS

1
CSS: Text Styling & Formatting

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

2
CSS: Google Fonts

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.

3
CSS: Images

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

4
CSS: Padding & Margin

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

5
CSS: Rows & Columns

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.

6
Quiz: Intermediate CSS
7
Exercise: Your first website using CSS!

Advanced CSS: Building and styling website

1
CSS: Intro to building your first Website!

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

2
CSS: Building the Navbar

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.

3
CSS: Making the Navbar Mobile Responsive - Part 1

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.

4
CSS: Making the Navbar Mobile Responsive - Part 2

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!

5
CSS: Creating the Form Group

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

6
CSS: Working with iframes

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.

7
CSS: Working with images and box shadows

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 ;)

8
CSS: Working with text and image spacing

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.

9
CSS: Building the footer

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

Computers & Code

1
How Computers Work
2
Understanding Binary
3
How code works
4
Heap vs Stack
5
Understanding hexadecimal
6
Variables & storage capacity
7
Quiz: Computers & Code

Learning to Code With Javascript

1
Time to Javascript

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

2
Javascript Reference

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

3
Javascript: Comments & How to Link Scripts

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

4
Javascript: Variables & Strings

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

5
Javascript: Numbers

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

6
Javascript: Comparison Operators

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

7
Javascript: Logical Operators

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

8
Javascript: Arrays

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

9
Javascript: Loops

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

10
Exercise: Loops & Arrays

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

11
Javascript: Functions

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

12
Exercise: Javascript Ops
13
Javascript: Objects

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

14
Javascript: Bind

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

15
Percentage Calculator - Setting Up the Form

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

16
Percentage Calculator - Grabbing Elements With Javascript

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

17
Percentage Calculator - Using Event Listeners

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

18
Percentage Calculator - Algorithm & Prevent Default

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"

19
Exercise: Percentage Calculators

Version Control With Git

1
How Version Control Works
2
macOS Terminal Basics
3
Git Basics
4
Setting up Github on macOS
5
Github vs Bitbucket
6
Local & Remote Repositories
7
Working Through Git Merge Conflicts
8
Exercise: Pushing to Github

Introduction to Bootstrap 4

1
What is Bootstrap 4?

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

2
Downloading Bootstrap 4

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

3
Bootstrap 4: Project Setup

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

4
Bootstrap 4: Overview of Bootstraps Components

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  

5
Bootstrap 4: Understanding Bootstraps Classes

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.

6
Bootstrap 4: Using the Grid System

Bootstrap 4: Creating a Login Portal

1
Bootstrap 4 Cards: Creating the Sign-in Portal Box

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.

2
Bootstrap 4 Forms: Adding the input fields

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.

3
Bootstrap 4 Buttons: Adding the Sign In button and Labels

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.

4
Bootstrap 4 Grids - Finishing Mobile Compatibility

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: Skate or Die Website

1
Bootstrap 4: Skate or Die Intro

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

2
Bootstrap 4: Working with Navbars

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 

3
Bootstrap 4: Using Carousels

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.

4
Bootstrap 4: Nesting rows and columns

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. 

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.5
4.5 out of 5
5136 Ratings

Detailed Rating

Stars 5
2988
Stars 4
1580
Stars 3
438
Stars 2
83
Stars 1
47
b85c62f1dcf67dd537fbe80f767bf992
30-Day Money-Back Guarantee

Includes

30 hours on-demand video
13 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Demos
Support Buy $0