Course Details

Full-Stack Web Development

Master HTML, CSS, JavaScript, React, Node.js, and databases (MySQL & MongoDB). Build complete web applications with responsive design, front-end frameworks, version control, and deployment skills to kickstart your developer career.

Top Course

  • 50+ Students
  • English

What You’ll Learn?

  • Build responsive websites with HTML, CSS, and JavaScript.

  • Style websites with CSS and Bootstrap.

  • Use Git & GitHub for version control.

  • Develop interactive apps with React.

  • Work with MySQL & MongoDB databases.

  • Create REST APIs with Node.js & Express.

  • Deploy complete full-stack applications.

Course content

  • 17 Sections
  • 45 - 90 Lectures
  • 45h - 90h Total Duration
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

  • 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 Introduction

  • CSS Syntax

  • CSS Id & Class

  • Types of CSS inks

  • Colors and Backgrounds

  • Text and Fonts

  • Lists, Tables

  • CSS Selectors

  • CSS Box Model

  • CSS Advanced

  • Introduction to JavaScript

  • Enabling in various, browsers, Popup Boxes

  • Variables

  • Operators

  • Conditional Statements

  • Loops

  • Functions

  • Events

  • Cookies

  • Page redirection

  • Built-in Objects

  • Form Validations

  • Basics of Form Validation

  • Validating Radio Buttons

  • Validating Check-boxes

  • Validating Select Menus

  • JS Document Object

  • 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

  • What is JQuery?

  • Using JQuery links

  • JQuery Selectors

  • JQuery Events

  • JQuery Effects

  • JQuery HTML

  • Adding Header & Navigation

  • Adding Logo in Navigation Bar &

  • 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

  • Adding Responsive or Utilities in Bootstrap

  • Styling Button using between classes

  • Styling Images and making images

  • Responsive

  • Adding description list in bootstrap

  • Adding Panels

  • 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

  • Callbacks

  • 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 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-dom, BrowserRouter

  • Switch, Link, Route, URL params

  • Context API :

  • Context-API, What is context, provide

  • createContext, Avoid props drilling

  • Session task – profile name changes

  • useRef, useReducer,

  • 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

  • Introduction to MySQL

  • basic queries

  • DB model design

  • Normalization

  • select queries

  • joins

  • Introduction to MongoDB,

  • CRUD operations

  • basic cursor methods

  • Aggregation

  • Server-side vs Client-side

  • rendering

  • 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

  • Connection to MongoDB (local & atlas)

  • frontend + backend connectivity Dotenv

  • Deployment, frontend + backend connectivity

This Course Includes:

  • Lifetime Access to Course

  • Internship/Project

  • Certificate of Completion

  • Interactive Quizzes

Join this Course

Course Feedback

This course taught me HTML, CSS, JavaScript, and React clearly, helping me build full-stack web apps confidently from scratch.

Manideep Reddy

Hands-on projects with Node.js, MongoDB, and Git helped me gain practical development experience and strengthen my portfolio quickly.

Sameer Khan

Learning front-end and back-end together improved my skills greatly, making me confident to apply for real developer job opportunities.

Sujeeth

The structured curriculum and live projects gave me solid coding practice, preparing me effectively for interviews and freelance projects

Praneeth Kumar