When will I receive my 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.

Why can’t I audit this course?

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

Is financial aid 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.

Real-World Projects & Advanced Animations

Économisez sur les compétences qui vous font briller avec 40 % de réduction sur 3 mois de Coursera Plus. Économisez maintenant

Real-World Projects & Advanced Animations

Ce cours fait partie de Spécialisation "Modern HTML & CSS From The Beginning 2.0"

Instructeur : Packt - Course Instructors

Inclus avec

6 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

6 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

Ce que vous apprendrez

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.

Compétences que vous acquerrez

Catégorie : Web Content Accessibility Guidelines
Catégorie : Usability
Catégorie : Interactive Design
Catégorie : Javascript
Catégorie : Front-End Web Development
Catégorie : Web Design
Catégorie : HTML and CSS
Catégorie : Application Deployment
Catégorie : Code Reusability
Catégorie : Animations

Outils que vous découvrirez

Catégorie : Cascading Style Sheets (CSS)
Catégorie : UI Components
Catégorie : Hypertext Markup Language (HTML)

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Évaluations

7 devoirs

Enseigné en Anglais

91%

of learners achieved a positive career outcome

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires

logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Élaborez votre expertise du sujet

Ce cours fait partie de la Spécialisation "Modern HTML & CSS From The Beginning 2.0"

Lorsque vous vous inscrivez à ce cours, vous êtes également inscrit(e) à cette Spécialisation.

Apprenez de nouveaux concepts auprès d'experts du secteur
Acquérez une compréhension de base d'un sujet ou d'un outil
Développez des compétences professionnelles avec des projets pratiques
Obtenez un certificat professionnel partageable

Il y a 6 modules dans ce cours

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.

Inclus

12 vidéos2 lectures1 devoir

12 vidéosTotal 100 minutes

Section Intro2 minutes
Transitions Overview4 minutes
Creating Transitions6 minutes
Transform Property7 minutes
Absolute Centering With Transform/Translate2 minutes
3D Transforms7 minutes
JavaScript & CSS Intro12 minutes
Hamburger Menu18 minutes
Keyframes - Part 18 minutes
Keyframes - Part 2 (CSS Loader Animation)9 minutes
3D Rotating Cube9 minutes
Presentation Website Mini-Project16 minutes

2 lecturesTotal 20 minutes

Introduction to the Course 'Real-World Projects & Advanced Animations'10 minutes
Full Specialization Resources10 minutes

1 devoirTotal 15 minutes

Transitions, Animation & A Little JavaScript - Assessment15 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.

Inclus

10 vidéos1 devoir

10 vidéosTotal 85 minutes

Project Intro5 minutes
Project Setup7 minutes
Desktop Navigation10 minutes
Mobile Navigation12 minutes
Hero Section9 minutes
Hero SVG & Media Queries9 minutes
Navbar Background On Scroll6 minutes
Learn Section11 minutes
Chapters Section8 minutes
Summary Section7 minutes

1 devoirTotal 15 minutes

Tutor Website Project - Part 1 - Assessment15 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.

Inclus

9 vidéos1 devoir

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.

Inclus

10 vidéos1 devoir

10 vidéosTotal 90 minutes

Project Intro6 minutes
BEM Methodology Explained6 minutes
Project Setup6 minutes
Navbar & Desktop Menu10 minutes
Mobile Navigation13 minutes
Hero Section16 minutes
Navbar Background On Scroll3 minutes
Testimonials Section10 minutes
Features Section15 minutes
Features Mobile Layout6 minutes

1 devoirTotal 15 minutes

Leno Website Project (BEM) - Part 1 - Assessment15 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.

Inclus

10 vidéos1 devoir

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.

Inclus

1 vidéo1 lecture2 devoirs

Obtenez un certificat professionnel

Ajoutez ce titre à votre profil LinkedIn, à votre curriculum vitae ou à votre CV. Partagez-le sur les médias sociaux et dans votre évaluation des performances.

Instructeur

Packt - Course Instructors

Packt

1 888 Cours517 752 apprenants

Offert par

Packt

En savoir plus sur Mobile and Web Development

Packt
Interactive UI & Animation with Advanced JavaScript
Cours
Packt
Advanced Web Development, Real-Time Apps & Final Projects
Cours
Packt
Build Real-World Websites Using HTML5, CSS3, Sass and more
Cours
Packt
Advanced World-Building, Effects, and Final Scene Polishing
Cours

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.

Étudiant(e) depuis 2018

’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’

Jennifer J.

Étudiant(e) depuis 2020

’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’

Larry W.

Étudiant(e) depuis 2021

’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’

Chaitanya A.

’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’

Foire Aux 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.