80+ Web Projects - HTML5 & CSS3, JavaScript & React

Name: 80+ Web Projects - HTML5 & CSS3, JavaScript & React
Rating: 4.7 (28 reviews)

Hands-on Web 80+ End-to-End Projects featuring HTML5 & CSS3, JavaScript & React and sharpen your skills

Created byRaj Kumar Thokala

Last updated 5/2026

English

What you'll learn

You will have Project Implementation in Web Development
You will learn Deployment in Web Development
You will learn web components
You will have some projects

Course content

7 sections • 78 lectures • 55h 12m total length

Introduction3:40
Build 80+ real-world web projects from HTML5 and CSS3 to JavaScript and React, with a hands-on, project-based approach that strengthens your portfolio.

Getting Started with HTML2:30
Explore the fundamentals of web development with HTML and CSS, and set up a productive workflow using VS Code, Prettier, and Live Server to build fast, responsive websites.
Web Development Fundamentals25:18
Explore the fundamentals of web development with HTML, CSS, and JavaScript, learn how the web works from URLs and HTTP to the DOM, and master debugging with Chrome DevTools.
HTML Basics48:14
Master HTML basics as you tackle 80+ web projects with HTML5, CSS3, JavaScript, and React.
CSS Basics1:06:58
Master CSS basics in the 80+ web projects course, applying styling techniques within HTML5 and CSS3 contexts for practical web development.
Layout Part 150:19
Explore layout concepts in part 1 of the 80+ web projects course, leveraging HTML5 and CSS3 to build flexible page structures.
Layout Part 245:18
Master responsive layout techniques in modern web projects using HTML5 and CSS3, with practical insights for building clean, flexible interfaces in JavaScript and React.
Typography54:52
Explore typography within 80+ web projects using HTML5, CSS3, and React, applying fonts, type scales, and readable layouts for polished interfaces.
Images59:55
Learn how images power modern web projects by using HTML5 and CSS3 alongside JavaScript and React to implement and display media across responsive interfaces.
Forms54:04
Design and validate web forms using HTML5, CSS3, and JavaScript, then manage form state with React for interactive, accessible user experiences across multiple projects.
Transformations, Transitions, and Animations20:36
Explore CSS transformations, transitions, and animations to elevate web designs, using rotate, scale, skew, and translate in 2D and 3D space, with perspective, transform-origin, and reusable animations.
Writing Clean, Maintainable CSS21:24
Learn to write clean, maintainable css with consistent naming conventions, css variables, and object oriented css principles like separating container from content and structure from skin.
HTML & CSS Project 158:34
Kick off your HTML5 and CSS3 project by building a foundational web page that integrates JavaScript concepts and the basics of React.
HTML & CSS Project 21:14:02
Develop a hands-on web project focusing on HTML5 and CSS3 techniques while integrating JavaScript and React, as part of HTML & CSS project 2 in the 80+ web projects course.
HTML & CSS Project 31:25:10
Please provide the lecture caption to generate a concise, 15–30 word, active-voice summary that matches the course title and lecture topic.
HTML & CSS Project 41:06:04

Getting started with JavaScript15:08
Learn how JavaScript powers front-end and back-end apps, runs in browsers or Node, and differs from ECMAScript, with hands-on setup in VS Code and Node.
Basics30:33
Operators36:14
Explore operators in JavaScript to build dynamic web projects within the HTML5, CSS3, and React ecosystem.
Control Flow1:23:20
Explore control flow in 80+ web projects, applying HTML5, CSS3, JavaScript, and React to understand how code execution is directed.
Objects1:16:32
Explore objects in JavaScript and React within the 80+ web projects course, covering HTML5 and CSS3.
Arrays1:28:14
Master arrays in web development across HTML5, CSS3, JavaScript, and React, learning creation, manipulation, and practical use in real-world projects.
Functions1:01:41
Explore core JavaScript concepts by mastering functions within practical web projects using HTML5, CSS3, and React.
OOPs in JavaScript13:21
Explore object oriented programming in JavaScript, a paradigm that groups data and methods into objects, and master encapsulation, abstraction, inheritance, and polymorphism.
Objects53:41
Explore objects in web development through a project-based approach, using HTML5, CSS3, JavaScript, and React to build practical, real-world projects.
Prototypes36:44
Prototype web projects using HTML5, CSS3, JavaScript, and React to turn ideas into testable concepts.
Prototypical Inheritance49:50
Discover prototypical inheritance in JavaScript and how prototypes shape object behavior in modern web projects. Explore practical patterns across HTML5, CSS3, and React workflows.
ES6 Classes49:23
Master ES6 classes and modern JavaScript to build structured, reusable components for web projects using HTML5, CSS3, and React.
ES6 Modules29:41

Getting Started with React19:08
Master React to build fast, scalable front-end apps by creating a production-grade video games discovery UI with components, JSX, and features like dark mode, search, and filters.
Building Components in React57:14
Build reusable React components to assemble scalable user interfaces. Learn how component-based development with React underpins modern web projects.
Styling Components in React31:11
Learn styling React components using vanilla CSS, CSS modules, and CSS in JS with styled components, while exploring Bootstrap, Material UI, Tailwind, and react-icons for modular, maintainable styles.
Managing Component State40:16
Learn to manage component state in React, using JavaScript and HTML5 concepts to build robust user interfaces.
Building Forms1:10:04
Learn to build forms using HTML5, CSS3, JavaScript, and React in the 80+ web projects course.
Connecting to the Backend1:15:29
Learn how to connect web projects to backends using JavaScript and React. Leverage HTML5 techniques to integrate backend data into interactive applications.
Project Building a Video Game Discovery App Part 11:11:30
Project Building a Video Game Discovery App Part 21:06:59
Build a video game discovery app as part two of a web projects course, applying HTML5, CSS3, JavaScript, and React.
Project Building a Video Game Discovery App Part 334:03
Fetching and Updating Data with React Query Part 119:50
Master fetching and updating data with React Query, enabling automatic retries, caching, and infinite scrolling within the game hub project for faster, scalable React apps.
Fetching and Updating Data with React Query Part 21:12:21
Fetch and update data efficiently using React Query in part 2, applying these techniques to practical web projects built with HTML5, CSS3, JavaScript, and React.
Global State Management Part 154:03
Master global state management fundamentals in part 1 of a web projects series, using HTML5, CSS3, JavaScript, and React to manage shared data across components.
Routing with React Router Part 126:07
Learn to build multi-page React apps with React Router v6 by defining routes, using links and navigate, handling errors, and implementing dynamic, nested, and private routes with layout and outlet.
Routing with React Router Part 21:02:30
Advance your routing skills with React Router in part 2 of the course. Apply practical techniques to manage navigation in React apps across real-world projects.

Getting Started with Redux11:49
Explore how Redux centralizes application state in a single store, enabling predictable data flow, time travel debugging, and state caching with Redux dev tools.
Functional Programming in JavaScript40:05
Master functional programming in JavaScript within the 80+ web projects course, focusing on applying functional principles to web development.
Redux Fundamentals36:02
Master Redux fundamentals to manage application state in JavaScript projects, leveraging React and modern web development techniques.
Building Redux from Scratch11:13
Learn how to build Redux from scratch by creating a private store with dispatch, getState, and subscribe. Implement a reducer and actions to update state and notify subscribers.
Debugging Redux Applications15:13
Learn to debug Redux applications using Redux dev tools, configure store with a dev tools enhancer, and inspect actions, state, and traces across monitors and the Chrome extension.
Writing Clean Redux Code34:15
Designing the Store29:20
Design a scalable redux store by organizing state into entities and UI slices, normalizing data, combining reducers, and using memoized selectors with reselect for derived data like unresolved bugs.
Middleware20:10
Explore Redux middleware as the central pipeline between dispatching actions and reducers, learn to write custom logger and toast middlewares, and use Redux Toolkit's default middleware for async actions.
Consuming APIs56:40
Master consuming APIs within web projects, leveraging JavaScript and React to access data and integrate dynamic content.
Testing Redux Applications48:24
Develop skills to test Redux applications within web projects using HTML5, CSS3, JavaScript, and React.

Getting Started with Git13:58
Learn git fundamentals by installing and configuring git, using the command line and GUI tools, and creating code snapshots. Explore history, branching, merging, and collaborating with GitHub.
Creating Snapshots57:53
Creating snapshots across 80+ web projects with HTML5, CSS3, JavaScript, and React. Creating snapshots across 80+ web projects with HTML5, CSS3, JavaScript, and React.
Browsing History42:53
Explore the concept of browsing history within web projects using HTML5, CSS3, JavaScript, and React.
Branching1:11:35
Explore branching in html5 and css3, javascript, and react across 80+ web projects.
Collaboration16:40
Explore collaboration with git by comparing centralized and distributed workflows. Use push, fetch, and pull to sync work, and leverage GitHub for pull requests, issues, and open-source contributions.
Rewriting History44:31
Rewrite history of the web through hands-on projects using HTML5, CSS3, JavaScript, and React to build modern interfaces.
How Front End Works5:28
Explore how HTML, CSS, and JavaScript power the frontend, from DOM and render tree to responsive layouts, events, state management, and API-driven data in modern web apps.

Getting Started with Next.js40:59
Get up and running with Next.js to build modern web projects. Learn the essentials of setting up a Next.js workflow within a React-based development stack.
Styling21:55
Explore styling options for Next.js apps, including global styles, CSS modules, Tailwind, and daisyui. Learn to apply Tailwind utilities, theming with daisyui, and maintainable component-scoped CSS.
Routing and Navigation48:33
Discover routing and navigation techniques in modern web apps, leveraging HTML5, CSS3, JavaScript, and React to create seamless, user-friendly interfaces.
How React Works in Web Development4:49
Explore how React powers modern web development with a component-based front-end, virtual DOM efficiency, and dynamic state and props. Learn API integration, single-page apps, and deployment to Vercel or Netlify.
Building APIs26:53
Build apis with Next.js by creating api routes for getting, posting, updating, and deleting objects, then validate with Zot schemas using a products example.
Database Integration with Prisma35:18
Uploading Files13:52
Learn how to enable file uploads in Next.js apps using Cloudinary, configure upload presets, and display uploaded images with the Next Cloudinary cld image component.
Authentication with Next Auth51:58
Learn authentication with Next Auth in modern web apps, applying HTML5, CSS3, JavaScript, and React techniques showcased in 80+ web projects.
Sending Emails and Optimizations50:56
Learn how to send emails efficiently and optimize performance across 80+ web projects built with HTML5, CSS3, JavaScript, and React.
Getting Started with Next.js Project24:12
Build and deploy a full-stack issue tracker with Next.js, TypeScript, Tailwind, Prisma, and NextAuth; include a dashboard with filters, sorting, pagination, and forms with client-side validation.
Creating Issues1:03:55
Create and manage issues for 80+ web projects using HTML5, CSS3, JavaScript, and React. Learn practical steps to track tasks and prioritize work in modern development workflows.
Viewing Issues53:32
Learn how to view issues across HTML5, CSS3, JavaScript, and React projects as part of the 80+ web projects course.
Updating Issues42:10
Deleting Issues26:19
Implement a delete issue feature with a red delete button and Radix alert dialog, handle errors with an error dialog, perform a Prisma delete, and navigate back to issues page.
Authentication49:06
Explore authentication within web projects, as presented in the 80+ web projects course covering HTML5, CSS3, JavaScript, and React.
Assigning Issues to Users46:30
Learn how to assign issues to users within web projects using HTML5, CSS3, JavaScript, and React.
Filtering, Sorting, and Pagination54:16
Explore how to filter, sort, and paginate data in web apps using HTML5, CSS3, JavaScript, and React.
Dashboard39:00

Requirements

No prior experience required — just start building and learning by doing.

Description

Build real-world skills by creating 80+ hands-on web projects using modern front-end technologies. This project-based course is designed to help you move from fundamentals to advanced concepts while building a strong portfolio that showcases your practical expertise.

You’ll start with HTML5 & CSS3, learning how to structure webpages, create responsive layouts, and design modern user interfaces using Flexbox, Grid, animations, and best UI practices. Next, you’ll dive into JavaScript, where you’ll build interactive applications, work with DOM manipulation, events, APIs, forms, validation, and asynchronous programming. As you progress, you’ll master React, the most in-demand front-end library. You’ll build reusable components, manage state and props, use hooks, handle routing, and develop complete single-page applications. Each project increases in complexity, ensuring continuous learning and confidence building.

This course is perfect for beginners who want to learn web development practically and for intermediate developers looking to sharpen their skills through real projects. Once you complete this course, you’ll have 80+ completed projects, confidence in modern web technologies, and a powerful portfolio to showcase to employers or clients.

Projects include landing pages, portfolios, dashboards, to-do apps, calculators, weather apps, authentication systems, e-commerce UI, blogs, and many more real-world applications. By the end of this course, you’ll have 80+ completed projects, a professional portfolio, and the confidence to apply for front-end or web developer roles or start freelancing.

Who this course is for:

Anyone who wants to learn and build end to end projects with HTML5 & CSS3, JavaScript & React

80+ Web Projects - HTML5 & CSS3, JavaScript & React

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 4min

HTML - Beginner to Advanced15 lectures • 12hr 13min

JavaScript - Beginner to Advanced13 lectures • 10hr 24min

React - Beginner to Advanced14 lectures • 11hr 41min

Redux from Basics to Advanced10 lectures • 5hr 3min

GIT - Beginner to Advanced7 lectures • 4hr 13min

Next.Js - Beginner to Advanced18 lectures • 11hr 34min

Requirements

Description

Who this course is for: