VOOZH about

URL: https://www.coursera.org/learn/copy-of-packt-interactive-ui-ux-components-and-advanced-javascript-876uj

⇱ Interactive UI/UX Components and Advanced JavaScript | Coursera

Interactive UI/UX Components and Advanced JavaScript

Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Interactive UI/UX Components and Advanced JavaScript

Included with

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace
Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

What you'll learn

  • Build interactive and animated UI components with JavaScript.

  • Apply CSS effects and transitions for engaging user interfaces.

  • Implement dark mode, scroll, and popup functionalities.

  • Fetch and display live data from APIs in dynamic projects.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

12 assignments

Taught in English

Build your subject-matter expertise

This course is part of the Hands-On Projects with HTML, CSS, and JavaScript Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate

There are 10 modules in this course

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.

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.

What's included

4 videos2 readings1 assignment

4 videos•Total 50 minutes
  • Preview - Emoji Rating•1 minute
  • HTML - Emoji Rating•13 minutes
  • CSS - Emoji Rating•16 minutes
  • JavaScript - Emoji Rating•20 minutes
2 readings•Total 20 minutes
  • Introduction to the Course 'Interactive UI/UX Components and Advanced JavaScript'•10 minutes
  • Full Specialization Resources•10 minutes
1 assignment•Total 15 minutes
  • Project - Emoji Rating - Assessment•15 minutes

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.

What's included

4 videos1 assignment

4 videos•Total 52 minutes
  • Preview - Sticky Navbar•1 minute
  • HTML - Sticky Navbar•14 minutes
  • CSS - Sticky Navbar•21 minutes
  • JavaScript - Sticky Navbar•16 minutes
1 assignment•Total 15 minutes
  • Project - Sticky Navbar - Assessment•15 minutes

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.

What's included

4 videos1 assignment

4 videos•Total 39 minutes
  • Preview - Double Landing Page•1 minute
  • HTML - Double Landing Page•8 minutes
  • CSS - Double Landing Page•17 minutes
  • JavaScript - Double Landing Page•13 minutes
1 assignment•Total 15 minutes
  • Project - Double Landing Page - Assessment•15 minutes

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.

What's included

4 videos1 assignment

4 videos•Total 30 minutes
  • Preview - Auto Text Effect Animation•1 minute
  • HTML - Auto Text Effect Animation•6 minutes
  • CSS - Auto Text Effect Animation•7 minutes
  • JavaScript - Auto Text Effect Animation•16 minutes
1 assignment•Total 15 minutes
  • Project - Auto Text Effect Animation - Assessment•15 minutes

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.

What's included

4 videos1 assignment

4 videos•Total 29 minutes
  • Preview - Background Image Scroll Effect•1 minute
  • HTML - Background Image Scroll Effect•7 minutes
  • CSS - Background Image Scroll Effect•10 minutes
  • JavaScript - Background Image Scroll Effect•10 minutes
1 assignment•Total 15 minutes
  • Project - Background Image Scroll Effect - Assessment•15 minutes

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.

What's included

4 videos1 assignment

4 videos•Total 59 minutes
  • Preview - Blurred Background Popup•2 minutes
  • HTML - Blurred Background Popup•17 minutes
  • CSS - Blurred Background Popup•28 minutes
  • JavaScript - Blurred Background Popup•13 minutes
1 assignment•Total 15 minutes
  • Project - Blurred Background Popup - Assessment•15 minutes

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.

What's included

4 videos1 assignment

4 videos•Total 36 minutes
  • Preview - Dark Mode Toggle•1 minute
  • HTML - Dark Mode Toggle•7 minutes
  • CSS - Dark Mode Toggle•14 minutes
  • JavaScript - Dark Mode Toggle•13 minutes
1 assignment•Total 15 minutes
  • Project - Dark Mode Toggle - Assessment•15 minutes

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.

What's included

4 videos1 assignment

4 videos•Total 51 minutes
  • Preview - Drum Kits•1 minute
  • HTML - Drum Kits•11 minutes
  • CSS - Drum Kits•18 minutes
  • JavaScript - Drum Kits•21 minutes
1 assignment•Total 15 minutes
  • Project - Drum Kits - Assessment•15 minutes

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.

What's included

4 videos1 assignment

4 videos•Total 67 minutes
  • Preview - To Do List•1 minute
  • HTML - To Do List•13 minutes
  • CSS - To Do List•19 minutes
  • JavaScript - To Do List•34 minutes
1 assignment•Total 15 minutes
  • Project - To Do List - Assessment•15 minutes

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.

What's included

4 videos1 reading3 assignments

4 videos•Total 33 minutes
  • Preview - Random Photos•1 minute
  • HTML - Random Photos•9 minutes
  • CSS - Random Photos•11 minutes
  • JavaScript - Random Photos•12 minutes
1 reading•Total 10 minutes
  • Conclusion to the Course 'Interactive UI UX Components and Advanced JavaScript'•10 minutes
3 assignments•Total 90 minutes
  • Full Course Practice Assessment•15 minutes
  • Project - Random Photos - Assessment•15 minutes
  • Full Course Assessment•60 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Offered by

Explore more from Mobile and Web Development

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

"Interactive UI/UX Components and Advanced JavaScript" is a hands-on course focused on building real-world web components that enhance user experience through interactivity and animation. It teaches learners how to combine HTML, CSS, and JavaScript to design engaging user interfaces that respond dynamically to user actions. This course is highly relevant for modern web developers as interactive components are key to creating professional, intuitive, and visually appealing websites and applications.

This course takes a project-based approach to learning advanced JavaScript and UI/UX techniques. It covers 10 interactive projects including emoji-based rating systems, sticky navigation bars, animated landing pages, background scroll effects, dark mode toggles, and dynamic applications like to-do lists and random photo galleries. Each project demonstrates how to structure HTML efficiently, style elements with CSS animations and effects, and bring them to life using JavaScript event handling, DOM manipulation, and asynchronous programming.

After completing this course, you’ll be able to design and develop highly interactive UI components and dynamic web applications from scratch. You will gain the skills to implement animations, handle real-time user interactions, manage data dynamically, and create responsive layouts. By mastering both front-end logic and user-centric design, you’ll be equipped to build web interfaces that are both functional and visually captivating—ideal for personal portfolios, freelance projects, or professional front-end development work.

To get the most out of this course, learners should have a foundational understanding of HTML, CSS, and JavaScript. Basic knowledge of the Document Object Model (DOM), CSS selectors, and event listeners will be beneficial. However, the course is structured to explain each step clearly, making it accessible for motivated beginners who want to move into more advanced front-end development.

This course is designed for web developers, designers, and coding enthusiasts who want to advance their skills in building interactive and user-friendly components. It’s perfect for learners who already understand the basics of web development and are looking to deepen their expertise in JavaScript-driven animations and UI/UX design. It’s also ideal for anyone aiming to strengthen their front-end portfolio with projects that showcase both creativity and technical skill.

The course contains approximately 8 hours of video content. Depending on your pace and how much time you dedicate to coding along and experimenting with each project, it may take slightly longer to complete. Since it’s self-paced, learners can progress comfortably while building a solid foundation in interactive UI/UX development.

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,