Modern HTML, CSS & JavaScript - 80 Projects in 30 Days

Name: Modern HTML, CSS & JavaScript - 80 Projects in 30 Days
Rating: 5.0 (27 reviews)

Build Modern Responsive Websites with HTML5 & CSS3, JavaScript and Full Stack Applications from Scratch

Highest Rated

New

Created byBalakrishana Geridi

Last updated 7/2026

English

What you'll learn

Build 40+ real-world web projects using HTML5, CSS3, JavaScript, and React to strengthen practical frontend development skills.
Learn how to design responsive, interactive, and modern websites with reusable components and clean UI layouts.
Master core web development concepts including DOM manipulation, API integration, state management, forms, animations, and React fundamentals.
Develop a professional portfolio of projects that helps learners gain confidence for freelancing, internships, and frontend developer job opportunities.

Course content

8 sections • 81 lectures • 57h 13m total length

Introduction6:13
Develop a portfolio by completing 80 projects in 30 days across HTML, CSS, and JavaScript, from beginner-friendly pages to complex interactive applications.

Getting Started with HTML2:30
Learn the fundamentals of web development with HTML and CSS, using VS Code and extensions like Prettier and Live Server to build fast, responsive websites.
Web Development Fundamentals25:18
HTML Basics48:14
Master html basics in a modern html, css & javascript course with 80 projects in 30 days.
CSS Basics1:06:58
Master css basics to style modern web pages in the modern html, css & javascript course. Build a solid foundation for layout and design through 80 projects in 30 days.
Layout Part 150:19
Discover the fundamentals of web page layout in the first part of the course, introducing essential HTML and CSS concepts for building structured designs.
Layout Part 245:18
Gain hands-on experience with web layout techniques using HTML and CSS in the layout part 2 module, as part of the modern HTML, CSS and JavaScript 80 projects course.
Typography54:52
Explore typography within modern HTML, CSS, and JavaScript, and build design skills through 80 hands-on projects in 30 days.
Images59:55
Learn how to work with images in modern HTML, CSS, and JavaScript through hands-on projects.
Forms54:04
Master forms in modern html, css and javascript through 80 projects in 30 days. Apply forms concepts across html, css, and javascript.
Transformations, Transitions, and Animations20:36
Writing Clean, Maintainable CSS21:24
HTML & CSS Project 158:34
Begin html and css project 1 in the modern html, css and javascript course as part of the 80 projects in 30 days program.
HTML & CSS Project 21:14:02
HTML & CSS Project 31:25:10
Build HTML and CSS skills through HTML and CSS project 3 as part of the modern HTML, CSS and JavaScript program, a structured 80-project, 30-day course.
HTML & CSS Project 41:06:04
Develop practical web layouts by completing HTML and CSS project 4 from the modern HTML, CSS & JavaScript series, part of an 80-project 30-day program.

Getting started with JavaScript15:08
Explore what JavaScript is, how it runs in browsers and on Node, and how ECMAScript standards shape the language, plus hands-on setup with VS Code, Live Server, and basic scripting.
Basics30:33
Operators36:14
Control Flow1:23:20
Explore control flow through hands-on web development projects in html, css, and javascript as part of modern html, css & javascript – 80 projects in 30 days.
Objects1:16:32
Arrays1:28:14
Functions1:01:41
OOPs in JavaScript13:21
Explore object oriented programming in JavaScript, covering encapsulation, abstraction, inheritance, and polymorphism, with practical examples and ES6 concepts such as classes.
Objects53:41
Prototypes36:44
Prototypical Inheritance49:50
ES6 Classes49:23
ES6 Modules29:41

Getting Started with React19:08
Building Components in React57:14
Build reusable components in React for modern web interfaces, aligning with the modern HTML, CSS & JavaScript course and its 80 projects in 30 days.
Styling Components in React31:11
Managing Component State40:16
Building Forms1:10:04
Build practical web forms using html, css, and javascript through a project-based approach in the 80 projects in 30 days course.
Connecting to the Backend1:15:29
Project Building a Video Game Discovery App Part 11:11:30
Build a video game discovery app, part 1, using modern HTML, CSS, and JavaScript as part of the 80 projects in 30 days course.
Project Building a Video Game Discovery App Part 21:06:59
Build a video game discovery app using HTML, CSS, and JavaScript in a hands-on, project-based lesson, Part 2 of the series.
Project Building a Video Game Discovery App Part 334:03
Fetching and Updating Data with React Query Part 119:50
Discover how to fetch and update data with React Query, featuring caching, retries, and infinite queries, using the game hub project. Set up with query client, query keys, and hooks.
Fetching and Updating Data with React Query Part 21:12:21
Fetch and update data efficiently using React Query in a practical, project-based workflow, part 2, within modern HTML, CSS, and JavaScript projects.
Fetching and Updating Data with React Query Part 31:09:18
Global State Management Part 154:03
Explore global state management in HTML, CSS, and JavaScript, starting with part 1, within the 80 projects in 30 days course.
Global State Management Part 250:47
Routing with React Router Part 126:07
Learn to build multi-page apps with react-router-dom v6.10, creating static and dynamic routes, nested layouts, navigation with link and navigate, error handling, and private routes.
Routing with React Router Part 21:02:30
Importance of Web Development7:39
Discover how web development builds websites and applications with secure, fast, accessible experiences. Explore HTML, CSS, and JavaScript powering online learning, banking, and government services.

Getting Started with Redux11:49
Functional Programming in JavaScript40:05
Redux Fundamentals36:02
Explore Redux fundamentals within a modern HTML, CSS and JavaScript project-based learning framework. Build scalable apps across 80 projects in 30 days.
Building Redux from Scratch11:13
Learn how to build a Redux-like store from scratch, including a private internal state, and expose dispatch, getState, and subscribe to manage state with a reducer and actions.
Debugging Redux Applications15:13
Debug Redux applications using Redux dev tools to inspect actions and state with log, inspector, and chart monitors; enable tracing, configure store enhancers, and export or restore state.
Writing Clean Redux Code34:15
Designing the Store29:20
Design a redux store by organizing entities with slice reducers, combining reducers, and using selectors and memoization to compute unresolved bugs and bugs by user.
Middleware20:10
discover how Redux middleware runs between dispatch and reducers to handle API calls, and learn to write or use logger and toast middleware with Redux Toolkit.
Consuming APIs56:40
Testing Redux Applications48:24
Develop practical strategies to test Redux applications within a modern HTML, CSS & JavaScript project framework spanning 80 projects in 30 days.

Getting Started with Next.js40:59
Getting started with Next.js as part of a project-driven course on modern HTML, CSS & JavaScript.
Styling21:55
Routing and Navigation48:33
Building APIs26:53
Build and test Next.js APIs by creating get, post, put, and delete endpoints, validate inputs with Zot, handle 404/400 errors, and explore full‑stack basics with Postman.
Database Integration with Prisma35:18
Uploading Files13:52
Authentication with Next Auth51:58
Sending Emails and Optimizations50:56

Getting Started with Next.js Project24:12
Creating Issues1:03:55
Create issues while tackling 80 projects in 30 days using modern HTML, CSS, and JavaScript to build practical skills.
Viewing Issues53:32
Updating Issues42:10
Master updating issues in modern web development by practicing HTML, CSS, and JavaScript tasks across 80 projects.
Deleting Issues26:19
Authentication49:06
Master authentication concepts within modern HTML, CSS, and JavaScript by completing 80 projects in 30 days, focusing on secure login flows and user sessions.
Assigning Issues to Users46:30
Filtering, Sorting, and Pagination54:16
Master filtering, sorting, and pagination with HTML, CSS, and JavaScript across 80 projects in 30 days.
Dashboard39:00

Getting Started with TypeScript21:09
Fundamentals24:20
Master TypeScript fundamentals, including built-in types, arrays, tuples, enums, and objects, with emphasis on type inference and safety. Learn to leverage tsconfig options like no implicit any for safer code.
Advanced Types25:26
Explore advanced TypeScript types, including type aliases, unions, intersections, literal and nullable types; use narrowing, type guards, optional access operators, nullish coalescing, type assertions, unknown, any, and never.
Classes, Interfaces and Object-oriented Programming54:00
Master classes, interfaces, and object-oriented programming to design modular, reusable JavaScript structures for modern HTML, CSS, and JavaScript projects.
Generics27:59
Explore generics in TypeScript by building generic classes and functions, applying constraints, and using type mapping and keyof to create reusable, type-safe data shapes.
Decorators and Modules43:04
Explore decorators and modules in modern web development, learning to organize code with modules and apply decorators to extend JavaScript functionality.
Integration with JavaScript and React with TypeScript36:40
Node and Express with TypeScript15:55
Build a real-world API using Node, Express, and TypeScript; create a reminders service with get and post routes, DTO interfaces, and a reminder model with id and isComplete.

Requirements

You must be curious to learn and build Real world Applications

Description

This intensive and project-based online course is designed to help students master frontend web development by building 80 practical projects in just 30 days using HTML, CSS, and JavaScript. The course focuses on hands-on learning, allowing learners to improve their coding skills by creating real-world applications and interactive websites from scratch.

You will begin by learning the fundamentals of HTML for webpage structure and CSS for styling, layouts, animations, responsiveness, flexbox, and grid systems. The course then dives into JavaScript, where learners will understand essential programming concepts such as variables, functions, loops, arrays, objects, events, DOM manipulation, timers, local storage, asynchronous JavaScript, and API integration.

Throughout the course, You will work on a wide range of beginner to advanced projects including landing pages, navigation menus, image sliders, calculators, weather applications, quiz apps, form validations, music players, to-do lists, note-taking apps, interactive games, dark mode interfaces, search applications, dashboards, and many more engaging web projects. Every project is carefully structured to strengthen problem-solving abilities and build practical development experience.

This course is ideal for beginners, students, aspiring frontend developers, freelancers, and anyone who wants to learn web development through practical implementation instead of only theory. By completing 80 projects, You will gain confidence in writing clean code, designing responsive websites, and developing interactive web applications using modern frontend development techniques.

By the end of the course, You will have a strong portfolio of projects, a solid understanding of core web technologies, and the practical skills needed to start building professional websites and web applications independently.

Who this course is for:

If you want to build Responsive Websites with HTML,CSS, JavaScript through building fun and useful projects, then this course is for you.

Modern HTML, CSS & JavaScript - 80 Projects in 30 Days

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 6min

HTML - Beginner to Advanced15 lectures • 12hr 13min

JavaScript - Beginner to Advanced13 lectures • 10hr 24min

React - Beginner to Advanced17 lectures • 13hr 48min

Redux from Basics to Advanced10 lectures • 5hr 3min

Next.Js - Beginner to Advanced8 lectures • 4hr 50min

Next.Js Project9 lectures • 6hr 39min

TypeScript8 lectures • 4hr 9min

Requirements

Description

Who this course is for: