Library

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

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

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

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!

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
Basic knowledge
  • You should have a PC or Mac and know how to turn it on!
  • Have an Internet connection
What you will 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
Curriculum
Number of Lecture: 171
Total Duration: 29:54:15
Intro to Web Development
  • What is web development?  
  • Where should I start as a beginner?  
  • 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.

  • What you can do as a web developer  
  • Frontend vs Backend development  
  • 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
  • Intro to HTML, HEAD, BODY, and HEADER  

    An introduction to the basic and foundational HTML tags

  • HTML: Lists, Paragraphs, and Text Styling  

    An introduction to more advanced HTML tags

  • 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

  • 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.

  • Exercise: Fan Site  
Introduction to CSS
  • What is CSS?  

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

  • 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.

  • 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.

  • CSS: Colors  

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

  • CSS: Backgrounds & Borders  

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

  • Quiz - CSS Basics  
  • Exercise: CSS Colors & Backgrounds  
  • 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.

  • 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.

  • CSS: Grouping  

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

  • 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. 

  • Specificity Domination  
  • Exercise: Extending your CSS skills  
Intermediate CSS
  • CSS: Text Styling & Formatting  

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

  • 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.

  • CSS: Images  

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

  • 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.

  • 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.

  • Quiz: Intermediate CSS  
  • Exercise: Your first website using CSS!  
Advanced CSS: Building and styling website
  • CSS: Intro to building your first Website!  

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

  • 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.

  • 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.

  • 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!

  • 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.

  • 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.

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

  • 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.

  • CSS: Building the footer  

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

Computers & Code
  • How Computers Work  
  • Understanding Binary  
  • How code works  
  • Heap vs Stack  
  • Understanding hexadecimal  
  • Variables & storage capacity  
  • Quiz: Computers & Code  
Learning to Code With Javascript
  • Time to Javascript  

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

  • Javascript Reference  

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

  • Javascript: Comments & How to Link Scripts  

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

  • Javascript: Variables & Strings  

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

  • Javascript: Numbers  

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

  • Javascript: Comparison Operators  

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

  • Javascript: Logical Operators  

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

  • Javascript: Arrays  

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

  • Javascript: Loops  

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

  • Exercise: Loops & Arrays  

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

  • Javascript: Functions  

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

  • Exercise: Javascript Ops  
  • Javascript: Objects  

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

  • Javascript: Bind  

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

  • 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.

  • Percentage Calculator - Grabbing Elements With Javascript  

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

  • 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.

  • 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"

  • Exercise: Percentage Calculators  
Version Control With Git
  • How Version Control Works  
  • macOS Terminal Basics  
  • Git Basics  
  • Setting up Github on macOS  
  • Github vs Bitbucket  
  • Local & Remote Repositories  
  • Working Through Git Merge Conflicts  
  • Exercise: Pushing to Github  
Introduction to Bootstrap 4
  • 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!

  • Downloading Bootstrap 4  

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

  • Bootstrap 4: Project Setup  

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

  • 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  

  • 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.

  • Bootstrap 4: Using the Grid System  
Bootstrap 4: Creating a Login Portal
  • 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.

  • 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.

  • 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.

  • 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
  • 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.

  • 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 

  • 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.

  • 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. 

  • Bootstrap 4: Modals  

    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: Adding images and buttons  

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

  • Bootstrap 4: Sizing Modals  

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

  • Bootstrap 4: Building the Footer  

    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: Working with Font Awesome Favicons  

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

Intro to Flexbox
  • What is flexbox?  
  • Flexbox fundamentals  
  • Intro to flexbox landing page  
  • Building the navbar: Part 1  
  • Building the navbar: Part 2  
  • Designing the navbar for mobile  
  • Making the dropdown menu functional  
  • Creating the landing page header  
  • Building the Services section  
  • Creating the first Media Object  
  • Flexbox ordering  
  • Adding the Quote button  
  • Designing the portfolio object  
  • Making the portfolio object mobile compatible  
  • Making Media Objects mobile compatible  
  • Creating the contact form  
  • Making the contact form mobile compatible  
  • Quiz: Flexbox Basics  
Beginner Sass
  • Intro to Sass  

    In this lesson we we get a quick idea how cool Sass is and what you should know before diving into this section. 

  • What is Sass?  

    Syntactically Awesome StyleSheet (SASS). The only word you really need to know in this abbreviation is AWESOME. In this lesson we will take a deeper dive into why Sass is one of the best CSS preprocessors.

  • How to install Sass and compile it to CSS  

    In this lesson we learn how to install Sass via the Terminal using a magic gem...Then we'll walk through a basic project and compile our Sass into CSS so the browser can read it.

  • Your FIRST Sass Website!  

    In this lesson we use some very basic Sass to build our FIRST website! Just follow along and we'll take a deeper dive into Sass in the upcoming videos.

  • Different tools to compile Sass  

    In this lesson we'll learn 3 ways we can compile our Sass into CSS

  • How to structure your Sass  

    In this lesson we'll learn some simple guidelines to structure the hierarchy folder and file structure of our project to keep it clean and organized.

  • Sass Partials: Maintainable Styles Rules  

    In this lesson we'll learn how to use partials in Sass. Partials help us keep our Sass scalable and more manageable. Sass ignores these Sass partials when compiled into CSS and won't create additional, un-neededCSS files. We'll learn more about why this is important.

  • Sass Variables and Imports: Create a clean Scalable Stylesheet  

    In this lesson we'll learn how to create Variables in Sass to store all kinds of values. Variables are a core Sass feature and very useful. We'll also learn how to get our Sass Partials to import into a single Sass file which will act as an index for every Partial we're using.

  • Sass Mixins: Save time & recycle styles  

    In this lesson we'll learn how to create a Sass Mixin and how we can recycle a single style rule and customize it for any element!

  • Sass Extends: Share style properties between other selectors  

    In this lesson we'll learn how to create an Extend and add set style rules to any other selectors

  • Final Project: Intro to our Landing Page  

    In this lesson we're going to take a look at the polished version of the Landing Page we'll be styling with Sass

  • Final Project: Setting up our Variables  

    In this lesson we'll set up the base Variables we'll be using in our Landing Page. We'll dive into the many values Variables can store.

  • Final Project: Styling our Navbar with Sass  

    In this lesson we're going to use some of our Variables to style the navbar

  • Final Project: Creating the Banner Container  

    In this lesson we're going to use our Variables to style the banner container that will hold the intro content of our Landing Page.

  • Final Project: Adding Content to our Banner Container  

    In this lesson we're going to style the content of our banner container using other Variables that we created.

  • Final Project: Doing some quick cleanup in our Sass files  

    In this lesson we're going to do some quick cleanup in our Sass files to make sure everything is working and compiling the right Variable values

  • Final Project: Using the Extend method  

    In this lesson we're going to create a standard style rule that we can extend to other selector types for adding additional style rules

  • Final Project: Styling a section splitter with Sass  

    In the lesson we're going to create a simple container with some images to separate the two sections we're creating in our Landing Page.

  • Final Project: Using advanced Mixins  

    In this lesson we're going to create an advanced, insanely customizable mixin for our buttons. 

  • Final Project: Styling the next Container with Sass  

    In this lesson we're going to create the last container of our Landing Page, add some content and style it with Sass

  • Final Project: Finishing our Landing Page, Congrats!  

    In this lesson we're going to create the LAST component to our Landing Page. We'll be building a simple footer that's completely scalable using Sass. By this point we have finished our Landing Page and it's looking awesome! 

    Feel free to make any needed style tweaks to make your Landing Page look perfect

How to Set Up Hosting For Your Web Apps
  • Web Hosting  
  • Creating a server  
  • Accessing your server  
  • Installing Nginx  
  • Creating server SSH Keys  
  • Uploading files to your server  
  • Setting up a domain  
  • Final Step: Configuring Nginx  
Intro to Node, Mongo, & REST APIs
  • Understanding Web Requests  

    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.

  • Installing Node on macOS  

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

  • All About JSON  

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

  • Basics of Node  

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

  • Node Modules  

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

  • Exercise: Mastering Node Modules  
  • Building Your First API  

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

  • Postman, GET & POST Requests  

    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.

  • URL Parameters & Delete Requests  

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

  • Exercise: Creating a Node Calculator  
  • Installing MongoDB on macOS  

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

  • Working With the Mongo Shell  

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

  • Searching for Documents  

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

  • Deletions & Documentation  

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

  • Swag Shop API: Project Creation  

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

  • Swag Shop API: Creating the Models  

    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: Posting Products  

    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: Fetching Products  

    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: Populating Data  

    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.

  • Exercise: Extending the API  
Intro to React
  • Swag Shop: Setting Up React Tooling  

    In this video we are going to learn how to install React, cover some of the basic React tools and setup a React skeleton project.

  • Swag Shop: Installing Bootstrap  

    In this video we are going to learn how to install Bootstrap 4 and set it up to be used in our React project.

  • Swag Shop: Setting Up the API  

    In this video are going to add some quick insertions to our Mongo database and get our server up and running with Node to use with our React API project.

  • Swag Shop: Creating a HTTP Service  

    In this video we are going to learn how to create an HTTP service that can be used in our React app

  • Swag Shop: Promises With ES6 & React  

    In this video we are going to learn how to use promises with ES6 and React.

  • Swag Shop: Components in React - Website Product  

    In this video we are going to learn how to create and use React components.

  • Swag Shop: Props in React  

    In this video we are going to learn how to use props in React.

  • Swag Shop: Working With State in React  

    In this video we are going to learn how to use states and showing products in our React project.

  • Swag Shop: Creating a WishList Component  

    In this video we are going to learn how to create a React WishList component.

  • Exercise: React Components  
  • Swag Shop: Building a Singleton Data Service  

    In this video we are going to learn how to build a Singleton Data Service to use in our React app.

  • Swag Shop: Creating a Notification Service  

    In this video we are going to learn how to create a notification service for our React project.

  • Swag Shop: Posting Notifications to React Components  

    In this video we are going to learn how to post notifications to our React components

  • Swag Shop: Observing Notifications in React  

    In this video we are going to learn how to observe data changes in our React project.

  • Swag Shop: Finishing Our Full Stack React App  

    In this video we are going to finish our full-stack React app that we've built using React components, Node and a Mongo database.

  • Exercise: Extending Swag Shop  
Reviews (0)