YoVDO

Level Up Your CSS Animation Skills

Offered By: YouTube

Tags

HTML & CSS Courses Web Development Courses Responsive Design Courses CSS Animation Courses Hover Effects Courses

Course Description

Overview

Elevate your CSS animation skills through this comprehensive 3.5-hour video course. Learn to create impressive animated landing pages by mastering hover and button animations, scroll-activated effects, parallax animations, and responsive designs. Gain practical, real-world applicable skills through high-quality video lessons and fully working examples. Build animated hero headers, implement touch and hover animations, design scroll animations with parallax effects, develop carousels, and create responsive animations adaptable to various screen sizes and orientations. Perfect for web developers looking to enhance their websites with engaging, professional-grade animations.

Syllabus

1.1: Build an animated hero header.
1.2: Animating the background.
1.3: Introducing the titles.
1.4: Adding a scroll cue.
1.5: Simplifying keyframes.
1.6: Waiting till the content is ready.
1.7: Animated Hero Header Examples to download.
2.1: Touch and hover animations.
2.2: Animating Links.
2.3: Animated tooltips.
2.4: Revealing content on hover.
2.5: Animating buttons.
2.6: Downloads: Touch and hover animation examples.
3.1: Scroll Animations.
3.2: Animating content on scroll.
3.3: Animating a slide-in banner.
3.4: Parallax Scrolling.
3.5: Mouse-leave animation.
3.6: Download examples: Scroll animations.
4.1: Carousels.
4.2: Carousel HTML.
4.3: Carousel CSS Styling.
4.4: Carousel JavaScript (Setting it up).
4.5: Making the carousel work (JS/HTML/CSS).
4.6: Carousel finishing touches.
4.7: Carousel examples to download.
5.1: Responsive Animations.
5.2: Resizing animations using font-size.
5.3: Percentages and viewport units.
5.4: Landscape vs portrait.


Taught by

CSS Animation

Related Courses

Front-End Web UI Frameworks and Tools: Bootstrap 4
The Hong Kong University of Science and Technology via Coursera
Build Restaurant Business Website using Google Sites
Coursera Project Network via Coursera
Build Training Website using Google Sites
Coursera Project Network via Coursera
Building High Quality User Experience Using Material UI
NIIT StackRoute via Coursera
Learn Bootstrap
Codecademy