Real-World Projects & Advanced Animations
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Real-World Projects & Advanced Animations
This course is part of Modern HTML & CSS From The Beginning 2.0 Specialization
Included with
Ask Coursera
Recommended experience
Recommended experience
What you'll learn
Master advanced CSS transitions and animations to enhance user interaction.
Integrate JavaScript with CSS to create dynamic and interactive web elements.
Develop a responsive, multi-section website with smooth animations and intuitive navigation.
Organize and optimize CSS using the BEM methodology for scalable projects.
Skills you'll gain
Details to know
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- 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 6 modules in this course
Updated in May 2025.
This course now 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. This course is designed to help you master advanced CSS animations, transitions, and JavaScript integration for real-world web projects. By the end, you will be able to create smooth, interactive animations, incorporate 3D transforms, and optimize your CSS using the BEM methodology. You will also learn to develop fully responsive websites, add dynamic effects with JavaScript, and deploy projects seamlessly. With hands-on lessons and practical projects, you’ll gain the skills needed to build engaging, user-friendly websites. The course starts by covering CSS transitions, keyframes, and transform properties, helping you create visually stunning elements. You'll then dive into integrating JavaScript for enhanced interactivity, such as building a hamburger menu and creating custom animations. Throughout the course, you'll work on real projects like the Tutor and Leno websites, designing layouts, navigation, and contact forms. You'll also implement advanced techniques like media queries and accessibility improvements. This course is ideal for intermediate developers looking to advance their front-end skills and create professional, dynamic websites.
In this module, we will dive into CSS transitions and animations, explore advanced visual effects like 3D transforms, and introduce the integration of JavaScript for dynamic interactions. By the end of this section, you’ll be able to apply these techniques to bring your web designs to life.
What's included
12 videos2 readings1 assignment
12 videos•Total 100 minutes
- Section Intro•2 minutes
- Transitions Overview•4 minutes
- Creating Transitions•6 minutes
- Transform Property•7 minutes
- Absolute Centering With Transform/Translate•2 minutes
- 3D Transforms•7 minutes
- JavaScript & CSS Intro•12 minutes
- Hamburger Menu•18 minutes
- Keyframes - Part 1•8 minutes
- Keyframes - Part 2 (CSS Loader Animation)•9 minutes
- 3D Rotating Cube•9 minutes
- Presentation Website Mini-Project•16 minutes
2 readings•Total 20 minutes
- Introduction to the Course 'Real-World Projects & Advanced Animations'•10 minutes
- Full Specialization Resources•10 minutes
1 assignment•Total 15 minutes
- Transitions, Animation & A Little JavaScript - Assessment•15 minutes
In this module, we will begin building the Tutor website by focusing on the foundational layout, including navigation and content sections. We’ll guide you through setting up the project and creating responsive designs that adapt seamlessly across devices.
What's included
10 videos1 assignment
10 videos•Total 85 minutes
- Project Intro•5 minutes
- Project Setup•7 minutes
- Desktop Navigation•10 minutes
- Mobile Navigation•12 minutes
- Hero Section•9 minutes
- Hero SVG & Media Queries•9 minutes
- Navbar Background On Scroll•6 minutes
- Learn Section•11 minutes
- Chapters Section•8 minutes
- Summary Section•7 minutes
1 assignment•Total 15 minutes
- Tutor Website Project - Part 1 - Assessment•15 minutes
In this module, we will continue building the Tutor website by adding more interactive and informative sections. You'll also learn how to deploy your site online and set up essential features like accessibility and form submissions to make your project fully functional.
What's included
9 videos1 assignment
9 videos•Total 89 minutes
- Info Section•8 minutes
- Takeaway Section•7 minutes
- Details & Author Sections•11 minutes
- Stats Section•12 minutes
- Newsletter Section•7 minutes
- Footer & Social Icons•12 minutes
- Contact Page•12 minutes
- Add Accessibility•12 minutes
- Deploy To Vercel & Formspree Setup•9 minutes
1 assignment•Total 15 minutes
- Tutor Website Project - Part 2 - Assessment•15 minutes
In this module, we will start the Leno website project, focusing on setting up the structure and utilizing BEM for scalable CSS. You'll learn how to create key website sections, including navigation and testimonials, with a focus on responsive design.
What's included
10 videos1 assignment
10 videos•Total 90 minutes
- Project Intro•6 minutes
- BEM Methodology Explained•6 minutes
- Project Setup•6 minutes
- Navbar & Desktop Menu•10 minutes
- Mobile Navigation•13 minutes
- Hero Section•16 minutes
- Navbar Background On Scroll•3 minutes
- Testimonials Section•10 minutes
- Features Section•15 minutes
- Features Mobile Layout•6 minutes
1 assignment•Total 15 minutes
- Leno Website Project (BEM) - Part 1 - Assessment•15 minutes
In this module, we will continue with the Leno website project, building more advanced sections such as video modals and animated buttons. You will also learn how to design feature-rich sections like pricing and product details, ensuring a polished and interactive website.
What's included
10 videos1 assignment
10 videos•Total 106 minutes
- Preview Section•6 minutes
- Animated Play Button•13 minutes
- Video Modal•16 minutes
- Details Area•15 minutes
- Screenshots Section•6 minutes
- Download Section•9 minutes
- Footer•10 minutes
- Create The Details Page•4 minutes
- Pricing Cards•13 minutes
- Details Features•13 minutes
1 assignment•Total 15 minutes
- Leno Website Project (BEM) - Part 2 - Assessment•15 minutes
In this module, we will wrap up the course by reviewing key takeaways and suggesting next steps for further learning. You will reflect on your progress and how the projects completed can be applied in real-world scenarios.
What's included
1 video1 reading2 assignments
1 video•Total 3 minutes
- Conclusion of Specialization•3 minutes
1 reading•Total 10 minutes
- Conclusion to the Course 'Real-World Projects & Advanced Animations'•10 minutes
2 assignments•Total 75 minutes
- Full Course Assessment•60 minutes
- Full Course Practice Assessment•15 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
Explore more from Mobile and Web Development
Course
Status: Free TrialCategory: Credit offeredCourse
Status: Free TrialCategory: Credit offeredCourse
Category: Credit offeredCourse
Status: Free TrialCategory: Credit offered
Why people choose Coursera for their career
Frequently asked questions
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.
More questions
Financial aid available,