Advanced Web Development, Real-Time Apps & Final Projects

Packt via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Paid Course
Languages

English
Certificate

Paid Certificate Available
Duration & workload

18 hours 26 minutes
Sessions

On-Demand
Subtitles

English

Found in

Part of

Hands-On Projects with HTML, CSS, and JavaScript

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

Grab it

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this advanced course, you’ll combine your HTML, CSS, and JavaScript skills to build real-time, fully functional web applications. Starting with projects like Tabs, Background Videos, and Sidebar Menus, you’ll learn how to integrate structure, style, and interactivity for smooth user experiences. Each lesson focuses on mastering DOM manipulation, animations, and event-driven functionality using hands-on examples. As you advance, you’ll create apps such as Recipe Books, Weather Dashboards, and Image Search tools featuring APIs, data handling, and responsive layouts. You’ll also build tools like Pomodoro Timers, Stopwatches, and Calculators that strengthen your problem-solving and design logic. This course is ideal for learners who already understand HTML, CSS, and JavaScript and are ready to develop real-world, project-based web applications. By the end, you’ll be able to design, build, and deploy modern, responsive, and dynamic web apps confidently.

Syllabus

Project - Tabs

In this module, we will build a Tabs interface that allows users to navigate between multiple content sections effortlessly. You’ll learn to structure the layout with HTML, style it with CSS, and use JavaScript to enable dynamic tab switching for a seamless user experience.

Project - Background Video

In this module, we will develop a Background Video webpage that adds cinematic motion to your design. You’ll integrate media elements, enhance them with CSS and Bootstrap styling, and use JavaScript to manage playback and loading animations.

Project - Sidebar Menu

In this module, we will create a Sidebar Menu that enhances user navigation in modern web apps. You’ll learn to combine layout, icons, and interactivity using HTML, CSS, Font Awesome, and JavaScript for a sleek, functional sidebar experience.

Project - Navbar Menu

In this module, we will build a Navbar Menu that adapts seamlessly to all screen sizes. You’ll apply responsive design techniques, use icons for better usability, and add interactivity with JavaScript for smooth navigation transitions.

Project - Age Calculator

In this module, we will develop an Age Calculator that computes exact age in years, months, and days. You’ll learn how to handle user input, apply real-time calculations with JavaScript, and design a clean, interactive user interface.

Project - Tip Calculator

In this module, we will create a Tip Calculator that quickly calculates tips and totals for any bill. You’ll practice data input handling, perform math operations in JavaScript, and style your calculator for a professional look.

Project - Recipe Book App

In this module, we will build a Recipe Book App that allows users to browse and search for their favorite recipes. You’ll integrate HTML structure, CSS styling, and JavaScript functionality to create an interactive and user-friendly app.

Project - Dice Roll Simulator

In this module, we will create a Dice Roll Simulator that replicates real dice-rolling behavior. You’ll apply random number generation, dynamic updates, and creative animation techniques to deliver a fun, interactive experience.

Project - Pomodoro Timer

In this module, we will build a Pomodoro Timer that boosts productivity through timed work sessions. You’ll implement countdown functionality in JavaScript and use CSS to visually separate work and break intervals.

Project - Rock Paper Scissors Game

In this module, we will develop a Rock Paper Scissors Game that lets users play against the computer. You’ll learn to combine logic, interactivity, and animations to make the game both entertaining and responsive.

Project - Stopwatch

In this module, we will create a functional Stopwatch to track elapsed time accurately. You’ll use JavaScript timing events, CSS design, and responsive layout techniques to produce a precise and elegant stopwatch application.

Project - Weather App

In this module, we will build a Weather App that delivers live weather updates based on location. You’ll integrate APIs, handle asynchronous data, and design a sleek, responsive interface for real-time information delivery.

Project - Image Search App

In this module, we will develop an Image Search App that retrieves and displays photos from online databases. You’ll practice using APIs, manage dynamic content loading, and design a responsive gallery layout.

Project - Basic Calculator

In this module, we will build a Basic Calculator that performs fundamental arithmetic operations. You’ll combine HTML structure, CSS styling, and JavaScript logic to create an efficient and responsive web-based calculator.