Full Stack JavaScript Training Program (MERN)

- Le bon développeur
Formateur : https://www.linkedin.com/in/talel-ben-belgacem-420347171/

I.Module 1 Basics:
Lesson 1 - HTML5 ( 2h )

Objective: Understand the basics of HTML and create a simple web page.

1. Introduction to HTML
● Explanation of HTML tags and structure.
● Creating a basic HTML document.
● Headings, paragraphs, lists, and links.
2. HTML Forms
● Creating forms and various form elements.
● Form validation basics.
3. HTML Images and Multimedia
● Embedding images and multimedia content.
● Image attributes and multimedia elements.

Homework:
Participants create a simple webpage using the learned HTML concepts.

Lesson 2 - CSS3 ( 2h )

Objective: Learn the fundamentals of CSS for styling web pages.

1. Introduction to CSS
● Selectors, properties, and values.
● Applying styles to HTML elements.
2. Styling Text and Fonts
● Font properties, text alignment, and styling.
3. Box Model
● Understanding the box model.
● Margin, padding, border properties.
Homework:
Apply CSS styles to the previously created HTML webpage.

Lesson 3 - CSS Layout ( 3h )

Objective: Explore layout techniques using CSS.

1. Positioning
● Relative, absolute, fixed positioning.
● z-index property.
2. Flexbox
● Introduction to flex containers and items.
● Flexbox properties for layout.
3. Responsive
● Using @media query
● Breakpoints, measuring units (rem, em, vh, vw).

Homework
Apply advanced CSS layout techniques to enhance the webpage.

Lesson 4: Basics and Introduction to Git & Github (2h) :

1. Introduction to Basic Linux Commands

● Explanation of Linux command line interface (CLI)
● Basic Linux commands for navigation, file manipulation, and directory operations:
○ cd, ls, mkdir, rm, mv, cp, touch …
2. Introduction to Version Control Systems (VCS) and Git:
● Explanation of version control and its importance
● Introduction to Git: What it is and why it's used
● Overview of Git workflow: local repository, staging area, remote repository
3. Getting Started with Git
● Installation of Git (if not already installed)
● Configuration of Git: setting up name, email, etc.
● Basic Git commands:
○ git init: Initialize a local repository
○ git add: Add changes to the staging area
 ○ git commit: Commit changes to the repository
○ git status: Check the status of the repository
○ git log: View commit history

Homework:

Initialize a Git repository for your HTML/CSS project and commit the changes.

Lesson 5 - JavaScript & DOM ( 3h )

Objective: Introduce JavaScript and the Document Object Model (DOM).

1. Introduction to JavaScript
● Basic syntax, variables, data types.
● Operators and control structures.
2. DOM Manipulation
● Understanding the DOM.
● Selecting and manipulating HTML elements using JavaScript.
3. Event Handling
● Handling user interactions with events.
● Event listeners and basic event handling.

Homework:
Enhance the webpage with dynamic content using JavaScript and DOM
manipulation.

Lesson 6 - JavaScript ES6 ( 2h )

Objective: Explore modern JavaScript features with ES6.

1. Arrow Functions and Template Literals

● Introduction to arrow functions.
● Using template literals for string interpolation.
2. Let and Const
● Block-scoped variables with let and constant variables with const.
3. Destructuring and Spread/Rest Operators
● Destructuring objects and arrays.
 ● Using spread and rest operators.

Homework
Update JavaScript code in the webpage to incorporate ES6 features.

II.Module 2 React JS:

Lesson 7 - Introduction to React & Components (2h)

Objective: Understand the basics of React and components.

1. Introduction to React:
● Overview of React and its ecosystem.
● Benefits of using React in web development.
2. Understanding React Components:
● Explanation of components in React.
● Differentiation between functional and class components.
3. Creating a Basic Component:
● Building a simple component to understand the basic structure.

Homework:

Create a basic React component using the learned concepts.

Lesson 8 - JSX, Props, & State (2h)

Objective: Learn about JSX, props, and state management in React.

1. Using JSX in React:

● Explanation of JSX and its role in React development.
● Advantages of JSX over plain JavaScript.
2. Passing Data with Props:
● Understanding the concept of props in React.
● Practicing data transmission between components.
● Hands-on exercises with JSX and props:
● Creating components with JSX and passing data via props.
 3. Understanding Stateful Components:
● Explanation of state in React.
● Differentiation between stateful and stateless components.
4. Managing State in React:
● Using setState to update a component's state.
● Best practices for state management in a React application.
5. State Management Practice:
● Creating interactive components that use state to handle dynamic changes.

Homework:

Build a React component that uses state and props for dynamic content.

Lesson 9 - Hooks (2h)

Objective: Understand and use React Hooks.

1. Introduction to React Hooks:

● Explanation of Hooks and their introduction in React.
● Benefits of Hooks over class components.
2. Using useState and useEffect:
● Introduction to the useState and useEffect Hooks for managing state and
effects in functional components.
3. Implementing Hooks in Functional Components:
● Converting class components to functional components using Hooks.

Homework:

Convert a class component to a functional component using Hooks.

Lesson 10 - React Router DOM (2h)

Objective: Learn about client-side routing with React Router DOM.

1. Understanding Client-Side Routing with React Router DOM:

● Introduction to routing concepts in a web application.
● Using React Router DOM for client-side navigation.
2. Creating Routes and Navigation:
● Configuring routes and navigation links in a React application.
 ● Managing URL parameters and redirects.
3. Practical Exercises on Routing in React Applications:
● Implementing a routing system for a simple React application.

Homework:

Create a simple React application with routing and navigation.

III.Module 3 Back-end:
Lesson 11 - Express (2h)

Objective: Learn the basics of Express for back-end development.

1. Introduction to Express:
○ What is Express and its benefits.
○ Setting up an Express server.
2. Basic Routing with Express:
○ Creating routes and handling requests.
○ Using middleware in Express.
3. Error Handling:
○ Implementing error handling middleware.
○ Best practices for error management.

Project Exercise:

Build a simple server with Express to handle basic routes.

Homework:

Create an Express application with multiple routes and error handling.

Lesson 12 - MongoDB and Mongoose (2h)

Objective: Learn to use MongoDB and Mongoose for database management.

1. Introduction to MongoDB:
○ What is MongoDB and why use it.
 ○ Setting up a MongoDB database.
2. Introduction to Mongoose:
○ What is Mongoose and its benefits.
○ Setting up Mongoose in a Node.js project.
3. Data Modeling with Mongoose:
○ Creating schemas and models.
○ Data validation and schema methods.
4. Connecting Express to MongoDB:
○ Integrating MongoDB with Express.
○ Performing basic CRUD operations.

Project Exercise:

Build a simple application using Express and MongoDB.

Homework:

Extend the application to include additional CRUD operations and data validation.

Lesson 13 - RESTful APIs with Express (2h)

Objective: Build RESTful APIs using Express.

1. Introduction to RESTful APIs:

○ Understanding REST principles.
○ Designing RESTful endpoints.
2. CRUD Operations:
○ Implementing Create, Read, Update, and Delete operations.
○ Using Express to handle different HTTP methods.

Project Exercise:

Build a RESTful API with Express.

Homework:

Extend the RESTful API with additional endpoints and database operations.
Lesson 14 - Redux Toolkit (2h)

Objective: Integrate Redux Toolkit for state management in a React application.

1. Introduction to Redux Toolkit:

○ Overview of Redux and state management.
○ Setting up Redux Toolkit in a React project.
2. Creating Slices and Reducers:
○ Understanding slices and reducers in Redux Toolkit.
○ Creating slices and reducers for state management.
3. Connecting Front-end with Back-end:
○ Making API calls from React to Express.
○ Managing state in React with Redux Toolkit.

Project Exercise:

Build a React application that interacts with the RESTful API and uses Redux Toolkit
for state management.

Homework:

Implement additional features and state management in the React application

using Redux Toolkit.