React Frontend Development
This React course is designed to teach you how to build modern web applications using React.js. You will learn React fundamentals, best practices, and advanced techniques necessary to become proficient in frontend development. The course covers topics such as state management, routing, working with APIs, authentication, testing, and deployment.
What you'll learn
- Learn by building practical applications throughout the course.
- Understand React fundamentals such as components, JSX, props, state, and lifecycle methods.
- Use useState, useEffect, and other hooks to manage state and side effects.
- Implement routing in single-page applications using React Router
- Create forms in React and implement validation techniques.
- Communicate with backend servers using Axios or Fetch API.
- Implement user authentication using JWT or OAuth.
- Use context API or Redux for managing complex application state.
- Techniques for optimizing React applications for speed and responsiveness.
- Unit testing React components using Jest and React Testing Library.
- Deploy React applications to platforms like Netlify, Vercel, or AWS.
Requirements
Course Description
Who This Course Is For:
- Frontend Developers: Individuals looking to enhance their skills in modern frontend development.
- JavaScript Developers: Developers interested in mastering React as their frontend framework.
- Web Developers: Anyone seeking to build interactive and responsive web applications using React.
Course Content
Level Beginner • 236 Lectures • 00 Minutes
Introduction
8 lectures, 00:00:00 min
What is web design?
How do websites work?
What are domain and HTTP & HTTPS protocols
Website vs. web app vs. mobile app vs. desktop app
What is design?
Software requirements
Design software
Assignment 1.1
Starting with HTML
17 lectures, 00:00:00 min
What is HTML?
What is a tag?
Rules of tags?
Body, head, title tags
Text formatting tags
Assignment 7.1 Introduction to HTML
What are attributes?
HTML media
HTML table, list
Assignment 7.2 HTML media and table, list
HTML form
HTML inputs
HTML with default values
HTML validation
Assignment 7.4 HTML forms
Other HTML tags
Assignment final 7.3 HTML summary
CSS
16 lectures, 00:00:00 min
What is CSS?
Why do we use CSS?
Anatomy of CSS
What is class & ID?
What are selectors & what types
Assignment 8.1 Intro with CSS
Units in CSS
Absolute units: px, pt, cm, mm
Relative units: %, em, rem,vh,vw
Height & width in CSS
Colour in CSS
Rgb -rgba
Hsl-hsla
Hexadecimal
Colour name
Assignment 8.2 CSS units and colour
Font & text in CSS
13 lectures, 00:00:00 min
Font
Font family
Font size
Font style
Font weight
Text
Letter spacing
Line break
Text transformation
Line height
Text align
Word break
Assignment 9 final CSS font and text
Box Model & background formatting
16 lectures, 00:00:00 min
What is a box model?
Box model types
Standard
Alternative
What are margin, padding, and border?
How to apply margin, padding, and border?
Assignment 10.1 Box model
Bg image
Bg colour
Bg repeat
Bg sizing
Bg gradient
Linear
Radial
Bg Attachment
Assignment 10.2 background
Position in CSS
11 lectures, 00:00:00 min
What is the position?
Static position
Relative position
Absolute position
Positioning context
Z-index
Fixed
Sticky
Display types
Assignment 11 position
Overflow
Advance CSS
7 lectures, 00:00:00 min
Flexbox
Assignment 12.1 flexbox
Transition
Assignment 12.2 transition
Media query
Assignment 12.3 Media query
Resume building
Introduction to javascript
46 lectures, 00:00:00 min
What is javascript?
How does it work? (Context In Javascript)
ES5 vs ES6
Input / Output
Let, const, var
Data type
Scope in Javascript
Assignment 13.1 Intro of javascript
Object with property and methods
Array
Control statement
Assignment 13.2 Array and object
If else
Else if
Switch
Assignment 13.3 Control statement in javascript
Loops
For
While
For in
For of
Assignment 13.4 loops in javascript
User-defined function
Assignment 13.5 functions in javascript
Methods of Array, string
Assignment 13.6 Array, string in javascript
Methods of Math
Methods of Date
Assignment 13.7 Math and date methods
DOM manipulation
Assignment 13.8 DOM with javascript
Event handling
Assignment 13.9 events with javascript
Assignment javascript project
JS functions and types of functions
Functions in JS Vs ES6
Arrow Functions
JavaScript Operator Precedence
Other Operators
JavaScript Classes
What is API?
JSON & Promise (AJAX)
Async/Await
Import and export module
What is NPM?
What is YARN?
Bootstrap
20 lectures, 00:00:00 min
What is Bootstrap?
Why do we need it?
Installation using CDN, Download, NPM
Layout
Grid
Cols
Assignment 14.1
Gutter
Breakpoints
Container
Utils
Assignment 14.2 bootstrap layout and Utilities
Forms
Validation
Assignment 14.3 Bootstrap validation
Component
Modal
Card
Carousel(slider)
Assignment 14.4 Bootstrap components
React Basics
23 lectures, 00:00:00 min
What is React?
Why use React?
React vs. other frameworks
Virtual DOM
Reconciliation
What is SPA?
React installation
Framework structure
Hello world in reactjs
React App lifecycle
Process flow
What is JSX?
HTML vs JSX
Deep down JSX
What is babel?
What is the component?
Composition of components
What are props?
Styling React Component
List view
Inline
Internal
External
React Advance
22 lectures, 00:00:00 min
Common Component Events
Introducing Hooks
Rules of hooks
Common hooks
useState
useContext
useRef
useEffect
useMemo
useCallback
Form validation
Custom hooks
Form handling using state
React router DOM (new version)
Installation & Setup
Navigation for multipage
Parameter handling
Formik
Form validation Using regex & yup
Axios
Installation & setup
Form validation Using regex
React bootstrap
10 lectures, 00:00:00 min
Installation and Setup
Basic Components
Grid System
Navigation and Menus
Forms and Input Components
Modals and Dialogs
Styling and Theming
Responsive Design
Advanced Components and Integrations
Accessibility
Redux
10 lectures, 00:00:00 min
Redux Basics
Actions
Reducers
Store
Connecting Redux to React
Actions and Action Creators
Selectors
Middleware
Redux DevTools
Best Practices and Advanced Topics
Material UI
10 lectures, 00:00:00 min
Data Display and Visualization
Icons and Typography
Accessibility and Responsive Design
Installation and Setup
Basic Components
Grid System
Navigation and Menus
Forms and Input Components
Modals and Dialogs
Styling and Theming
Portfolio preparation
4 lectures, 00:00:00 min
Hosting
Git & GitHub
Portfolio building
Certification
Soft skill development
3 lectures, 00:00:00 min
Interview Preparation
Communication
Email/writing