Web Development & React.js - A Practical Guide for Beginners

Master JS (JavaScript), HTML, and CSS from the Ground Up. Build a Web Application with React JS. From zero to junior!

4.30 (22 reviews)
Udemy
platform
English
language
Web Development
category
150
students
23.5 hours
content
May 2022
last update
$64.99
regular price

What you will learn

Understand core concepts of JS, HTML, CSS and programming itself.

Learn programming by coding practical things.

Get a right mindset to solve programming problems.

Create and deploy Web application from scratch!

Description

What is JavaScript?

JavaScript, a dynamic scripting language, empowers web pages with interactive features. JavaScript is often at the core when a web page goes beyond static content involving dynamic updates, interactive maps, animated graphics, or scrolling video jukeboxes.


What You'll Work On:

Embark on a comprehensive journey through six key topic groups in this course. Each section is packed with assignments and coding exercises, culminating in developing a web application for product display—a project spanning the entire course. Starting with a simple console application and concluding with React JS, you'll witness the evolution of your application and gain a profound understanding of the programming process.


Course Sections:

JS Basics: Delve into the fundamentals of the JavaScript programming language while cultivating programmatic thinking applicable to various languages. Topics include computing history, variables, functions, objects, arrays, conditionals, debugging, and more.


HTML Basics: Explore the core elements of HTML, understanding document structure, the Document Object Model (DOM), and essential functions.


CSS Basics: Elevate your website's aesthetics with effective styling techniques, focusing on the widely used flex and grid stylings.


HTML + JS: Uncover the synergy between JavaScript and HTML, mimicking the seamless interaction in modern frameworks like Angular, Vue, or React. Topics include HTML nodes, dynamic elements, mini JS frameworks, modularity, and ES/Common modules.


Web Server + Webpack: Gain insights into client-server communication and create a custom web server for your HTML project. Explore Webpack as a bundler, enabling the combination of JavaScript code. Dive into Node JS and Webpack intricacies.


React JS: Conclude the course with a deep dive into the React JS library. Learn to effortlessly create web applications, incorporating hooks, state management, and reactivity. Bring everything together in a final version of your web app, solidifying your understanding of React JS.


Embark on this extensive journey and emerge as a proficient developer.

Content

Introduction

Preview
How to resolve issues
Ask for help

Computing history

[Optional] Computing history

JS Primer

Create Project
First line of code
JS file
Primitive Types part 1
Primitive Types part 2
let
Semicolon
Functions
Quiz
Assignment 1
Assignment 1 Solution

Functions & Objects

Function params
Return and Debugging
Simple product
Info Before Code Exercise
Code Exercise
Code Exercise
Objects
Access object property
Display product
Function to create product
Default parameters
Assignment 2
Assignment 2 Solution
Code exercise
Code Exercise 2

Arrays & Logical Operators

Arrays
Array indexing
Conditional drilling
If statement
Logical operators
Quiz
Assignment 3
Assignment 3 Solution

For Loops

For Loops
More Loops
Display Product Info
Code Exercise

More about Objects

Object functions - methods
This + Display info
Constructor function
Prototype
Value vs Reference
Code exercise

Class and Inheritance

Class
Inheritance
Class prototype

Debugging

Call stack, scope, debugging
Stack overflow
Assignment 4
Assignment 4 Solution
Template Strings
Super
Super function call
Pass Value to Super
Assignment 5
Assignment 5 Solution

HTML

DOM and Html
Dom Tree
Assignment DOM
Assignment DOM Solution
More about html

CSS

Css
Css Classes
More Styles
Quiz
Css in separate file
Paddings Margins
Page Css
Padding Margin for each side
More Elements
Div and Inline Div
Quiz
Absolute position
Additional position

Flex

Flex Start
More Flex
Justify Content
More justify content
Flex 1
Flex 2
Align self
Cleanup
Assignment 6
Assignment 6 Done
Cleanup after assignment

HTML + JS

Click on Element
Callback functions
More callback functions
Arrow Functions
Get elements by class
Quiz
Add product row
Create product row
Create product element
Append more elements
Create Text Node
Add all fields

Product Values

Use ForEach
Create more products
Two items per row
Provide product value
Product Grid
Create element wrapper

Custom Looping Functions

Modularity
Modularity part 2
Custom forEach
Iterate items in custom loop
For each done
Custom Map function
Code Exercise
Assignment Reactivity
Assignment done

Async, Promise

Provide raw data
Move Data
Blocking of HTML
Set timeout and interval
Retrieve data with callback
Promises
Await
Mini assignment
Catch Error in Promise
Function chaining
Try Catch

Data Fetching

JSON Data
Fetch data
Is on stock assignment
Assignment is on stock complete

Function Like Components

Function like components
Product Item Function
Product Item Props
Code Exercise
Ternary operator provide class
Remove Product Instance
Fetch Products Separation
Reactivity Dom Improvement
Product Page
Hide functions
Framework + Modularity
Quiz

Node JS

Server and node init
Common JS
Import export
Quiz
Npm package
Create simple server
Return page from server
How to communicate on internet
Quiz
Webpack configuration
Webpack dev server
Folder structure explanations
Express server
Default Export

React JS

React JS
Passing Props
Compile JSX
Quiz
More JSX
JSX Maps
Code Exercise
Children
Refactor App

Create React App

Create react app
Moving code to new app
Counter app
Counter increment button
Code Exercise
Use State
Assignment State
Counter View
Use Effect
Dependency array

React and Product App

Back to App Assignment
Bulma Css
Assignment Cards
Styling improvements
Navbar
Columns Improvements

Filter Products

Input
Search value
Filter Items
Filtering done

Github and Deployment

Github
More github
Prod server
Course Done

Screenshots

Web Development & React.js - A Practical Guide for Beginners - Screenshot_01Web Development & React.js - A Practical Guide for Beginners - Screenshot_02Web Development & React.js - A Practical Guide for Beginners - Screenshot_03Web Development & React.js - A Practical Guide for Beginners - Screenshot_04

Reviews

Efrain
September 27, 2022
So far, I really like it. Thank you for showing how to use the terminal. Not every course in UDEMY shows how to use the terminal and it's something really important in our systems that we need to learn how to use it.

Charts

Price

Web Development & React.js - A Practical Guide for Beginners - Price chart

Rating

Web Development & React.js - A Practical Guide for Beginners - Ratings chart

Enrollment distribution

Web Development & React.js - A Practical Guide for Beginners - Distribution chart
4530340
udemy ID
2/2/2022
course created date
6/14/2022
course indexed date
Bot
course submited by