Overview

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 course, you’ll master building engaging and interactive UI/UX components using HTML, CSS, and advanced JavaScript. Through projects like Emoji Rating, Sticky Navbar, and Double Landing Page, you’ll learn to create responsive designs that react to user interactions. Each section guides you in combining structure, style, and logic while mastering DOM manipulation, animations, and event-driven programming. As you advance, you’ll build projects such as Dark Mode Toggles, Drum Kits, and To-Do Lists, focusing on real-world interactivity and clean coding practices. You’ll also explore animation, scroll effects, and API integration through creative projects like Random Photos and Background Image Scroll Effects. This course is ideal for learners familiar with HTML, CSS, and basic JavaScript who want to advance their front-end skills. By the end, you’ll be able to design dynamic, intuitive, and professional UI/UX components using modern JavaScript techniques.

Syllabus

Project - Emoji Rating

In this module, we will build an Emoji Rating system that replaces traditional star ratings with expressive emojis. You’ll learn how to design interactive rating elements, style them creatively, and use JavaScript to make the ratings dynamic and responsive.

Project - Sticky Navbar

In this module, we will develop a Sticky Navbar that remains visible during scrolling for improved navigation. You’ll combine HTML structure, CSS styling, and JavaScript interactivity to ensure smooth scrolling and consistent user experience.

Project - Double Landing Page

In this module, we will create a Double Landing Page that captivates users with dual-section interactivity. You’ll learn how to apply advanced layout techniques, visual transitions, and JavaScript enhancements to craft a modern landing experience.

Project - Auto Text Effect Animation

In this module, we will design an Auto Text Effect Animation that mimics typing and deleting text automatically. You’ll combine CSS and JavaScript animation techniques to bring life and motion to your text displays.

Project - Background Image Scroll Effect

In this module, we will create a Background Image Scroll Effect that changes visuals based on user scrolling. You’ll explore scroll detection in JavaScript and combine it with CSS transitions to achieve engaging, immersive page movement.

Project - Blurred Background Popup

In this module, we will develop a Blurred Background Popup that enhances user focus with elegant overlays. You’ll learn how to combine HTML structure, CSS effects, and JavaScript functionality for visually appealing modals.

Project - Dark Mode Toggle

In this module, we will build a Dark Mode Toggle that allows users to switch between light and dark themes. You’ll implement theme detection, manage persistent preferences, and design seamless transitions for modern UI customization.

Project - Drum Kits

In this module, we will create a virtual Drum Kit that brings music-making to life. You’ll learn to integrate sound playback and animation with JavaScript while designing a responsive and interactive user interface.

Project - To Do List

In this module, we will build a To-Do List app that helps users organize tasks effectively. You’ll design an intuitive UI and use JavaScript to manage tasks, ensuring data is stored locally for long-term usability.

Project - Random Photos

In this module, we will develop a Random Photos application that fetches and displays images in real time. You’ll integrate APIs with JavaScript, manage asynchronous data loading, and design a smooth photo browsing experience.