Full Stack Web Development Using Javascript,
Node.js and Laravel
### Module 1: Introduction to Web Development (1 hour)
● - Overview of Web Development
● - Introduction to HTML, CSS, and JavaScript
● - Setting up Development Environment
● - Hands-on: Creating a Simple Web Page with HTML and Styling with CSS
● - Task: Build a Personal Portfolio Web Page
### Module 2: Advanced HTML and CSS (3 hours)
● - HTML5 Semantic Elements
● - CSS Box Model, Flexbox, and Grid Layout
● - Responsive Web Design with Media Queries
● - Hands-on: Building a Responsive Landing Page
● - Task: Design and Code a Responsive Blog Layout
### Module 3: Introduction to JavaScript (4 hours)
● - Basics of JavaScript: Variables, Data Types, Operators
● - Control Structures: Conditionals and Loops
● - Functions and Scope
● - DOM Manipulation
● - Hands-on: Creating Interactive Web Page Elements with JavaScript
● - Task: Build a Simple Calculator Application
### Module 4: Intermediate JavaScript (3 hours)
● - Events and Event Handling
● - Arrays and Array Methods
● - Object-Oriented Programming Concepts
● - Asynchronous JavaScript: Promises, async/await
● - Hands-on: Developing a To-Do List Application
● - Task: Enhance the To-Do List with Local Storage Integration
### Module 5: Introduction to React.js (5 hours)
● - Introduction to React.js and JSX
● - Components and Props
● - State and Lifecycle
● - Handling Events
● - React Router
● - Hands-on: Building a Task Manager Application with React
● - Task: Add Functionality to Filter Tasks Based on Categories
### Module 6: Intermediate React.js (4 hours)
● - Forms and Controlled Components
● - Handling HTTP Requests with Axios
● - Context API and useContext Hook
● - Error Boundaries
● - React Hooks: useState, useEffect
● - Hands-on: Building a Contact Form with Validation in React
● - Task: Implement Form Submission with Axios to a Backend API
### Module 7: Introduction to Node.js (4 hours)
● - Introduction to Node.js and npm
● - Creating a Basic HTTP Server
● - Working with Modules
● - File System Operations
● - Hands-on: Building a Simple API Server with Node.js
● - Task: Create an Endpoint to Fetch and Serve Static JSON Data
### Module 8: Express.js and RESTful APIs (4 hours)
● - Introduction to Express.js
● - Routing in Express
● - Middleware
● - Building RESTful APIs
● - Hands-on: Building a CRUD API with Express.js
● - Task: Implement Authentication Middleware for API Endpoints
### Module 9: Database Integration with MySQL (4 hours)
● - Introduction to MySQL: Installation and Setup
● - Basics of SQL: Creating Databases, Tables, and Queries
● - CRUD Operations with MySQL
● - Data Modeling with Laravel's Eloquent ORM
● - Connecting Laravel with MySQL Database
● - Hands-on: Integrating MySQL with Laravel Application
● - Task: Implement Pagination for Fetching Records from MySQL
### Module 10: Introduction to Laravel (5 hours)
● - Introduction to Laravel and Composer
● - Setting Up Laravel Environment
● - Routing and Controllers
● - Blade Templating Engine
● - Database Operations with Eloquent ORM (MySQL)
● - Hands-on: Creating a Simple CRUD Application with Laravel and MySQL
● - Task: Add Form Validation for Input Fields in the CRUD Application
### Module 11: Laravel Authentication and Authorization (3 hours)
● - User Authentication with Laravel's Authentication System
● - Role-Based Access Control (RBAC)
● - Custom Authentication Guards
● - Hands-on: Implementing User Authentication and Authorization in Laravel
Application
● - Task: Create User Roles and Permissions to Restrict Access to Certain Routes
### Module 12: Building an E-commerce Website (6 hours)
● - Introduction to E-commerce Concepts
● - Planning the E-commerce Website: User Stories, Wireframes
● - Setting Up Product Catalog with Categories and Attributes
● - Implementing Shopping Cart Functionality
● - Managing User Authentication and Authorization for Checkout
● - Handling Order Processing and Payment Integration
● - Hands-on: Building an E-commerce Website with Laravel and MySQL
● - Task: Enhance the E-commerce Website with User Reviews and Ratings
### Module 13: Deployment and Final Project (2 hours)
● - Deployment Options (Shared Hosting, VPS, Platform as a Service)
● - Deployment Checklist
● - Final Project Presentation and Q&A
● - Task: Deploy the Full-Stack E-commerce Website to a Hosting Server
