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

Udemy

Learn the fundamentals of full-stack web development by learning technologies such as HTML, CSS, React, and Node.

Beginner

Online

₹ 4099

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Intro to Web Development

Intro to Web Development
Join Our Free Student Group
What is web development?
Where should I start as a beginner?
HTML: Building Your First Website
What you can do as a web developer
Frontend vs Backend development
Installing an IDE

Getting Started With HTML

Intro to HTML, HEAD, BODY, and HEADER
HTML: Lists, Paragraphs, and Text Styling
HTML: Displaying Data With Tables
HTML: Images & Forms

Introduction to CSS

What is CSS?
How to use Inline, Internal and External CSS
CSS: Element, ID & Class Selectors
CSS: Colors
CSS: Backgrounds & Borders
Quiz - CSS Basics
Using browser inspector tools
CSS: Combinators
CSS: Grouping
CSS: Specificity
Specificity Domination

Intermediate CSS

CSS: Text Styling & Formatting
CSS: Google Fonts
CSS: Images
CSS: Padding & Margin
CSS: Rows & Columns
Quiz: Intermediate CSS

Advanced CSS: Building and styling website

CSS: Intro to building your first Website!
CSS: Building the Navbar
CSS: Making the Navbar Mobile Responsive - Part 1
CSS: Making the Navbar Mobile Responsive - Part 2
CSS: Creating the Form Group
CSS: Working with iframes
CSS: Working with images and box shadows
CSS: Working with text and image spacing
CSS: Building 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
Javascript Reference
Javascript: Comments & How to Link Scripts
Javascript: Variables & Strings
Javascript: Numbers
Javascript: Comparison Operators
Javascript: Logical Operators
Javascript: Arrays
Javascript: Loops
Javascript: Functions
Javascript: Objects
Javascript: Bind
Percentage Calculator - Setting Up the Form
Percentage Calculator - Grabbing Elements With Javascript
Percentage Calculator - Using Event Listeners
Percentage Calculator - Algorithm & Prevent Default

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

Introduction to Bootstrap 4

What is Bootstrap 4?
Downloading Bootstrap 4
Bootstrap 4: Project Setup
Bootstrap 4: Overview of Bootstraps Components
Bootstrap 4: Understanding Bootstraps Classes
Bootstrap 4: Using the Grid System

Bootstrap 4: Creating a Login Portal

Bootstrap 4 Cards: Creating the Sign-in Portal Box
Bootstrap 4 Forms: Adding the input fields
Bootstrap 4 Buttons: Adding the Sign In button and Labels
Bootstrap 4 Grids - Finishing Mobile Compatibility

Bootstrap 4: Skate or Die Website

Bootstrap 4: Skate or Die Intro
Bootstrap 4: Working with Navbars
Bootstrap 4: Using Carousels
Bootstrap 4: Nesting rows and columns
Bootstrap 4: Modals
Bootstrap 4: Adding images and buttons
Bootstrap 4: Sizing Modals
Bootstrap 4: Building the Footer
Bootstrap 4: Working with Font Awesome Favicons

Intro to Flexbox

What is flexbox?
Flexbox fundamentals
Quiz: Flexbox Basics
Intro to flexbox landing page
Building the navbar: Part 1
Building the navbar: Part 2
Making the dropdown menu functional
Designing the navbar for mobile
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

CSS Grids

Grid Layout Containers
Grid Layout Items
Exercise: Rows and Columns
Gird Layout Areas
Grid Layouts Website: Part 1
Grid Layouts Website: Part 2
Exercise: Masonry Gallery Layout
CSS Grid Quiz

Beginner Sass

Intro to Sass
What is Sass?
How to install Sass and compile it to CSS
Your FIRST Sass Website!
Are you Sassy?
Different tools to compile Sass
How to structure your Sass
Sass Partials: Maintainable Styles Rules
Sass Variables and Imports: Create a clean Scalable Stylesheet
Sass Mixins: Save time & recycle styles
Sass Extends: Share style properties between other selectors
Final Project: Intro to our Landing Page
Final Project: Setting up our Variables
Final Project: Styling our Navbar with Sass
Final Project: Creating the Banner Container
Final Project: Adding Content to our Banner Container
Final Project: Doing some quick cleanup in our Sass files
Final Project: Using the Extend method
Final Project: Styling a section splitter with Sass
Final Project: Using advanced Mixins
Final Project: Styling the next Container with Sass
Final Project: Finishing our Landing Page, Congrats!

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
Installing Node on macOS
All About JSON
Basics of Node
Node Modules
Building Your First API
Postman, GET & POST Requests
URL Parameters & Delete Requests
Installing MongoDB on macOS
Working With the Mongo Shell
Searching for Documents
Deletions & Documentation
Swag Shop API: Project Creation
Swag Shop API: Creating the Models
Swag Shop API: Posting Products
Swag Shop API: Fetching Products
Swag Shop API: Populating Data

Intro to React

Swag Shop: Setting Up React Tooling
Swag Shop: Installing Bootstrap
Swag Shop: Setting Up the API
Swag Shop: Creating a HTTP Service
Swag Shop: Promises With ES6 & React
Swag Shop: Components in React - Website Product
Swag Shop: Props in React
Swag Shop: Working With State in React
Swag Shop: Creating a WishList Component
Swag Shop: Building a Singleton Data Service
Swag Shop: Creating a Notification Service
Swag Shop: Posting Notifications to React Components
Swag Shop: Observing Notifications in React
Swag Shop: Finishing Our Full Stack React App

Bonus

Final Bonus

Popular Courses

Popular Platforms

Popular Searches

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

Beginner

Online

₹ 4099

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus

Intro to Web Development

Getting Started With HTML

Introduction to CSS

Intermediate CSS

Advanced CSS: Building and styling website

Computers & Code

Learning to Code With Javascript

Version Control With Git

Introduction to Bootstrap 4

Bootstrap 4: Creating a Login Portal

Bootstrap 4: Skate or Die Website

Intro to Flexbox

CSS Grids

Beginner Sass

How to Set Up Hosting For Your Web Apps

Intro to Node, Mongo, & REST APIs

Intro to React

Bonus

Instructors

Articles

Popular Articles

Latest Articles

Similar Courses

Courses of your Interest

More Courses by Udemy

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone