Description

Full-Stack Web Development: Building Scalable & Dynamic Web Applications

This Full-Stack Web Development course is designed to provide a comprehensive understanding of front-end and back-end development. It covers essential technologies such as HTML, CSS, JavaScript, React, Node.js, and databases like MySQL and MongoDB. Students will learn to build responsive websites, develop dynamic applications, and manage server-side functionality. The course also includes hands-on projects to enhance real-world coding experience.

Throughout the course, learners will gain expertise in version control using Git, asynchronous programming, and API integration. With a strong focus on modern frameworks like React and Express.js, this course prepares students to create scalable and efficient web applications. By the end of the program, participants will be able to design, develop, and deploy full-stack web applications confidently.

 

Skills you will get

 

Introduction to Web Technologies

• Careers in Web Technologies and Job Roles How the Website Works?
• Client and Server Scripting Languages Difference between a Web Designer and Web Developer
• Types of Websites (Static and Dynamic Websites)
• Responsive design and layout

 

HTML

• What is Markup Language
• Basic Structure of HTML
• HTML Elements
• Working with Forms Adding Special Characters Block Oriented Elements List, Attributes of list Uniform Resource Locators Hypertext Links Images, Tables
• Introduction to style Sheets
• Changing the Background
• Creating Style Classes

CSS

• CSS Introduction
• CSS Syntax
• CSS Id & Cass
• Types of CSS inks
• Colors and Backgrounds
• Text and Fonts Lists, Tables
• CSS Selectors
• CSS Box Model
• CSS Advanced

Java-Script

• Introduction to JavaScript
• Enabling in various, browsers, Popup Boxes
• Variables
• Operators
• Conditional Statements
• Loops
• Functions
• Events
• Cookies
• Page redirection
• Built-in Objects

Advanced javascript

• Form Validations
• Basics of Form Validation
• Validating Radio Buttons
• Validating Check-boxes
• Validating Select Menus
• JS Document Object

 

Version Control

• Introduction to Version Control and Git
• Getting Started with Git
• Basic Git Commands
• Branching and Merging
• Collaborating with Git
• Introduction to GitHub
• GitHub Workflow for Front-end Projects
• Best Practices for Git and GitHub
• Troubleshooting Git Issues
• Integrating Git and GitHub with Front-end Tools

Jquery

• What is JQuery?
• Using JQuery links
• JQuery Selectors
• JQuery Events
• JQuery Effects
• JQuery HTML

 

Bootstrap Framework

• Adding Header & Navigation Adding Logo in Navigation Bar &amp Adding Banner Adding Jumbotron
• Adding Rows, Columns & Containers
• Adding Column Width using offset
• Ordering Columns using push or pull
• Nesting Columns in Bootstrap
• Adding Footer top Website
• Typography in Bootstrap
• Adding glyphicons
• Styling Tables
• Adding Responsive or Utilities in Bootstrap Styling Button using between classes
• Styling Images and making images Responsive Adding description list in bootstrap Adding Panels

DOM

• Introduction to DOM
• DOM manipulation
• create Element, set Attribute
• get Element By Id,
• query Selector vs query SelectorAll
• innerHTML vs innerText
• append Child vs append

 

Asynchronous Programming

• Callbacks MODULE 10
• Callback, Callback hell
• asynchronous JavaScript Promises
• Promise, Promise States, Promise chaining, Use of fetch() & then() Async/Await
• Async/Await with error handling Fetch API
• Implementing CRUD with HTML, CSS JavaScript

React

• React Basics ES5 vs ES6, JSX, Components, Props, State
• Components (simple to reusable) Passing data through props, Deploying to netlify
• React Hooks & States Working with array lists, Usage of keys, Conditional rendering, Handling Events, Props vs State React Components
• Component lifecycle, Stateful & stateless components, Reusable components
• Introduction to Hook
• React Hooks
• What is a hook?
• Lifecycle of Hook,
• UseState, useEffect, Props drilling, Passing data from child to parent component

 

React Router

• React-router-dom, Browser Router Switch, Link, Route, URL params

Context API :-

• What is context, provide create Context, Avoid props drilling
• Session task – profile name changes

useRef & useReducer

• useRef, use Reducer, Front-end game demonstration – hangman /tic tac toe / tile match

 

Axios :-

• Playing around with API, fetch() or Axios
• Implementing simple CRUD

 

React-redux :-

• Intro to Redux
• state management with react application

 

Data-base MySQL

• Introduction to MySQL
• basic queries
• DB model design
• Normalization
• select queries
• joins

 

Database MongoDB

• Introduction to MongoDB
• CRUD operations
• basic cursor methods
• Aggregation
• Server-side vs Client-side rendering

 

Node.js

• Node.js Basics
• Node & MongoDB Connectivity
• Connection to MongoDB(local & atlas)
• frontend + backend connectivity
• Introduction to Node.js, Npm packages
• Node.js & Express.js
• What is Express
• API methods
• Request & response objects
• URL & Query parameters

 

Node & MongoDB Connectivity:

Node.js Deployment

• Connection to MongoDB(local & atlas)
• Frontend + backend connectivity Dotenv
• Deployment, frontend + backend connectivity