К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Real-World Projects & Advanced Animations · LearnSpace
Назад в каталог
courseraПрограммирование

Real-World Projects & Advanced Animations

Курс от Packt
Средний≈ 12.1 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

AnimationsCascading Style Sheets (CSS)JavascriptWeb Content Accessibility GuidelinesApplication DeploymentInteractive DesignWeb DesignHypertext Markup Language (HTML)Front-End Web DevelopmentHTML and CSSUI ComponentsUsabilityCode Reusability

Программа курса

6 модулей · 67 учебных материалов

01Transitions, Animation & A Little JavaScript16 материалов

Transitions, Animation & A Little JavaScript

Introduction to the Course 'Real-World Projects & Advanced Animations'ЧтениеFull Specialization ResourcesЧтениеSection IntroВидеоTransitions OverviewВидео

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

Real-World Projects & Advanced Animations
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 12.1 ч

6 модулей

Язык: Английский

Субтитры: Арабский, Французский, Узбекский, Итальянский, Корейский, Немецкий, Индонезийский, Испанский, Японский, Казахский

Часть программы вашего университета
Creating TransitionsВидео
Transform PropertyВидео
Absolute Centering With Transform/TranslateВидео
3D TransformsВидео
JavaScript & CSS IntroВидео
Hamburger MenuВидео
Keyframes - Part 1Видео
Keyframes - Part 2 (CSS Loader Animation)Видео
3D Rotating CubeВидео
Presentation Website Mini-ProjectВидео
Creating Animations and Transitions with CSSDIALOGUE
Transitions, Animation & A Little JavaScript - AssessmentЗадание
02Tutor Website Project - Part 112 материалов

Tutor Website Project - Part 1

Project IntroВидеоProject SetupВидеоDesktop NavigationВидеоMobile NavigationВидеоHero SectionВидеоHero SVG & Media QueriesВидеоNavbar Background On ScrollВидеоLearn SectionВидеоChapters SectionВидеоSummary SectionВидеоBuilding a Dynamic Web Page with JavaScript and CSSDIALOGUETutor Website Project - Part 1 - AssessmentЗадание
03Tutor Website Project - Part 211 материалов

Tutor Website Project - Part 2

Info SectionВидеоTakeaway SectionВидеоDetails & Author SectionsВидеоStats SectionВидеоNewsletter SectionВидеоFooter & Social IconsВидеоContact PageВидеоAdd AccessibilityВидеоDeploy To Vercel & Formspree SetupВидеоCreating Responsive Web Layouts with CSS Flexbox and GridDIALOGUETutor Website Project - Part 2 - AssessmentЗадание
04Leno Website Project (BEM) - Part 112 материалов

Leno Website Project (BEM) - Part 1

Project IntroВидеоBEM Methodology ExplainedВидеоProject SetupВидеоNavbar & Desktop MenuВидеоMobile NavigationВидеоHero SectionВидеоNavbar Background On ScrollВидеоTestimonials SectionВидеоFeatures SectionВидеоFeatures Mobile LayoutВидеоApplying BEM Methodology for CSSDIALOGUELeno Website Project (BEM) - Part 1 - AssessmentЗадание
05Leno Website Project (BEM) - Part 212 материалов

Leno Website Project (BEM) - Part 2

Preview SectionВидеоAnimated Play ButtonВидеоVideo ModalВидеоDetails AreaВидеоScreenshots SectionВидеоDownload SectionВидеоFooterВидеоCreate The Details PageВидеоPricing CardsВидеоDetails FeaturesВидеоUnderstanding CSS Flexbox and GridDIALOGUELeno Website Project (BEM) - Part 2 - AssessmentЗадание
06Conclusion4 материалов

Conclusion

Conclusion to the Course 'Real-World Projects & Advanced Animations'ЧтениеConclusion of SpecializationВидеоFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание