JavaScript and React Basics

Enroll for free

Course curriculum

1. What you need to know
2. Lab materials
1. Introduction to HTML and CSS in depth
2. What you know about HTML and CSS
1. Semantic tags and why we need them
2. Semantic HTML cheat sheet
3. Semantic tags in action
4. Knowledge check: Using semantic tags
5. Metadata
6. Metadata cheat sheet
7. Bare bones layout
8. Knowledge check: Metadata
9. Layout design
10. UX with meta tags
11. Social media cards
12. Setting up a social media card
13. Knowledge check: Open Graph Protocol
14. Knowledge check: Semantic and meta tags
15. Additional resources
1. Forms and validation
2. Input types
3. Creating a form
4. Making the most of client-side validation
5. Radio buttons
6. Cheat sheet: Interactive form elements
7. Using interactive form elements
8. Knowledge check: Declaring form elements
9. Form submission
10. Submit
11. Knowledge check: Form submission
12. Browser differences
13. Glossary: HTML form elements
14. Knowledge check: User input and forms
15. Additional resources
1. Video and audio
2. Embedded players
3. Images
4. iFrames
5. iFrame sandbox cheat sheet
6. iFrame as a picture
7. The canvas element
8. Knowledge check: Media elements
9. Module quiz: HTML deep dive
10. Additional resources
1. CSS web layout
2. Understanding flexbox
3. CSS units of measurement
4. Basic flexbox
5. Flex charts
6. CSS grids
7. Grids and flexbox cheat sheet
8. Grid showcase
9. Grid template area
10. How Meta creates responsive builds
11. Knowledge check: Creating layouts
12. Additional resources
13. Lab: Create a grid layout
1. Widely used selectors
2. All selectors and their specificity
3. Combination selectors
4. Pseudo-classes
5. Pseudo-elements
6. Practical use of pseudo
7. CSS Pseudo cheat sheet
8. Knowledge check: CSS selectors
9. Additional resources
10. Lab: Targeted CSS
1. What is an effect
2. Text effects
3. Text effects cheat sheet
4. CSS transforms and transitions
5. Lab: Transforming and transitioning elements
6. CSS animation
7. CSS keyframes
8. Animation examples
9. Animation and effects cheat sheet
10. Preprocessors: sass, scss, Stylus
11. Knowledge check: CSS effects
12. Additional resources
1. Common errors
2. Handling errors
3. Installing a third-party Linter in VS Code
4. Debugging the front-end
5. Debugging tools
6. Browser-specific CSS
7. UI testing
8. Knowledge check: Debugging
9. Module quizz: Interactive CSS
10. Additional resources
1. Introduction to JavaScript
1. Introduction to Programming with JavaScript
2. How is JavaScript used in the real world ?
3. Setting up VS code
1. Why JavaScript
2. Programming in JavaScript
3. Writing your first Javascript code
4. Variables
5. Data types
6. Operators
7. Numbers
8. Strings
9. Booleans
10. Operators in depth
11. JavaScript improvements
1. Functions
2. Storing data in arrays
3. Building and calling functions
4. Exercise: Practicing with functions
5. Introduction to objects
6. Object Literals and the Dot Notation
7. Object Literals and the Brackets Notation
8. Arrays are Objects
9. A closer look at string
10. Exercise: Creating arrays and objects
11. Object Methods
12. Typeof
13. Additional resources
1. Bugs and errors
2. Try catch blocks
3. Syntax, logical and runtime errors
4. Undefined, null and empty values
5. Module quiz: The Building Blocks of a Program
6. Additional resources
1. Introduction to functional programming
2. Return values from functions
3. Function calling and recursion
4. Introduction to scope
5. The functional programming paradigm
6. Scoping with var, let, and const
7. Comparing var, let, and const
8. Knowledge check: Introduction to Functional Programming
9. Additional resources
1. Introduction to object-oriented programming
2. Classes
3. Object Oriented Programming principles
4. Constructors
5. Inheritance
6. Creating classes
7. Default Parameters
8. Designing an OO Program
9. Additional resources
1. De-structuring arrays and objects
2. For of loops and objects
3. For- of loops and objects
4. Template literals examples
5. Working with template literals
6. Data Structures
7. Data Structures examples
8. Spread operator
9. Rest operator
10. Using Spread and Rest
11. Knowledge check: Advanced JavaScript Features
12. Additional resources
1. New Lesson
2. JavaScript DOM manipulation
3. JavaScript interactivity
4. JavaScript selectors
5. Event handling
6. Exercise: Web page content update
7. Moving data around on the web
8. JavaScript Object Notation - JSON
9. Knowledge Check - JavaScript in the browser
10. Module summary: Programming Paradigms
11. Module quiz: Programming Paradigms
12. Additional resources
1. Other JavaScript environments - node & NPM
2. Installing Node and NPM
3. What is testing?
4. Types of testing
5. Introduction to Jest
6. Writings tests with Jest
7. TDD (Test-Driven Development)
8. Module quiz: Testing
9. Additional resources
1. Introduction to the course
2. Before you learn React
3. JavaScript modules, imports - exports
4. Setting up a React project in VS Code
5. Working with labs
1. Why React
2. React.js overview
3. Introduction to functional components
4. Creating React components
5. Transpiling JSX
6. The React project structure
7. Customizing the project
8. Importing components
9. Knowledge check: React components and where they live
10. Additional resources
1. Principles of components: Props
2. Dissecting props
3. Using props in components
4. Introducing JSX
5. Props and children
6. Styling JSX elements
7. Practical styling
8. JSX syntax and the arrow function
9. Embedded JSX expressions
10. Functions in JSX
11. Expressions as props
12. Embedding in attributes
13. Module Quiz
14. Additional resources
1. Types of events
2. Eventful issues
3. Common event handling
4. Knowledge check: Events and errors
5. Syntax for handlers
6. Eventhandling and embedded expressions
7. User events
8. Lab: Dynamic events
9. Knowledge check: Dynamic events and how to handle them
10. Additional resources
1. Parent-child data flow
2. Data flow in React
3. Children and data
4. Knowledge check: Data flow
5. What are hooks ?
6. Using hooks
7. What is state?
8. Observing state
9. Knowledge check: State, the concept
10. Managing state
11. Prop drilling
12. React state management
13. Knowledge check: Passing state
14. Stateful vs. stateless
15. Lab: Managing state in React
16. Knowledge check: State or stateless
17. Module summary
18. Module quiz: Data and state
19. Additional resources
1. Basic Types of navigation
2. Navigation
3. The navbar
4. Lab: Creating a route
5. Knowledge check: Navigation
6. Conditional rendering
7. Applying conditional rendering
8. Conditional components
9. Single view conditional updates
10. Knowledge check: Conditional updates
11. Additional resources
1. What is an asset and where does it live
2. Bundling assets
3. Using embedded assets
4. Lab: Displaying images
5. Audio and video
6. Media packages
7. Create an audio / video component
8. Module quiz: navigation, updating, and assets in React.js
9. Additional resources
1. Resources

About this course

Free
253 lessons
9 hours of video content

Discover your potential, starting today

Enroll today

CSOL React Training

JavaScript and React Basics

Course curriculum

Foreword

Part I: HTML and CSS In Depth

Semantic and Meta Tags

User Input and Forms

Media Elements

Creating layouts

CSS Selectors

CSS Effects

Debugging

Part II: Programming in JavaScript

Setting up

JS Basics

Arrays, Objects, and Functions

Error Handling

Introduction to Functional Programming

Introduction to Object-Oriented Programming

Advanced JavaScript Features

JavaScript in the Browser

Testing

Part III: React Basics

React Components and Where They Live

Component Use and Styling

Dynamic events and how to handle them

Data and Events

Linking and Routing

Using Assets in React

React and TypeScript

About this course

Discover your potential, starting today