CSS Layout and Animations
9 sections - 5 hours of video
Add to favorites
Notify me
Build out a UI prototype in CodePen using CSS Grid and Flexbox. Learn how to bring life to your UI by adding CSS transforms and transformations. We will dive even more in to CSS animations with the CSS animation property and keyframes rule. We’ll wrap it all up by making our prototype responsive and checking out even more cool features on CodePen.
Taught by Christina Gorton
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
9 topics
All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.
1
CSS Layout and Animations
Prototyping with CSS Grid, Flexbox and CSS animations in CodePen
6:16
2
CSS Grid and Flexbox
Understanding when to use Grid and Flexbox
16:36
3
Layout with Grid Template Areas
Explore How to Layout a Design by Naming Areas
21:33
4
Intro to CSS Transforms and Transitions
Explore the Basis of CSS Animations with Transforms and Transitions
19:35
5
Complex Layout with Grid Part 1
Start Laying Out Our Complex Layout with Grid-template-rows and columns
12:42
6
Complex Layout with Grid Part 2
Part 2 of Laying Out Our Design with CSS Grid
14:35
7
Keyframe Animations
Explore Timeline-based Animation Using Keyframes
13:55
8
Making it Responsive
Learn to Combine Responsive and Adaptive Design
16:02
9
Wrapping it all Up
See How to Show Off Your Project on CodePen
6:11
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Browse all downloads
What's included?
All courses come with downloadable files to help you design, code and follow the course offline.
300+ hours of video
Subtitles in English, Chinese
Source files, ePub
UI, icons, illustrations
Premium, support chat
Source files
Design templates and source code files are included to help you learn.
ePub files
Read offline using Books for iOS, Mac or other apps that can read this format.
Video files
Download the videos so that you can watch later or offline using any video player.
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Christina Gorton
Front-end Developer and Instructor at Design+Code
Christina is a self-taught developer who has been working in the industry for a few years. She is a creative coder who likes to turn code into art. She has spent the last few years focused on front-end developer and animations.
2 courses - 7 hours
SVG Animations with GreenSock
Learn how to find, create, and manipulate SVG for the web. Then add the awesome JavaScript animation Library GreenSock to bring those SVG's to life. We will dive into SVG code and explore how to set up your illustrations for animating. Then we will take a look at GreenSock's animation library and many useful plugins to smoothly animate our SVGs on CodePen.
2 hrs
CSS Layout and Animations
Build out a UI prototype in CodePen using CSS Grid and Flexbox. Learn how to bring life to your UI by adding CSS transforms and transformations. We will dive even more in to CSS animations with the CSS animation property and keyframes rule. We’ll wrap it all up by making our prototype responsive and checking out even more cool features on CodePen.
5 hrs
Flutter
Certificate
Figma
Certificate
SwiftUI
Certificate
UI Design
Certificate
Create a profile
Get certificates
After passing a test, we’ll award you with an online certificate. You can add them to your profile after completing the courses.
Pass the test
Get the certificate.
Test your knowledge of CSS layout and animations. Complete the course and get perfect results for this test to get your certificate.
CSS layout and animations: Question 1 out of 19
What is the full form of CSS?
Stories
How students learned from our courses
See what people have learned and built by taking courses from Design+Code
Christiano Mere
Designer
Christiano Mere
Designer
My studies of swiftUI with a little help and inspirations of @designcodeio and @MengTo. Thanks for the today's live. Illustrations by @FireartStudio
Haawa
iOS Developer
Haawa
iOS Developer
Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for the design lessons and many controls and animation that I used from you SwiftUI course. Man bowing deeply.
Anthony Collurafici
Designer
Anthony Collurafici
Designer
Simple Ratio is Live! After years of designing apps, I can finally say I built my own. Big thanks to Meng To for getting me started with SwiftUI.
Mogens Egeskov
iOS Developer
Mogens Egeskov
iOS Developer
After months of hard work i'm excited to share my new app "Read" which helps you reach your yearly book goal by telling you how many pages or percent to read daily. You can time your read.
Cyril Zakka
iOS Developer
I don’t know if you remember but I bought your first book a little less than 4 years ago. You started me on my path to code and design. Now I do iOS development and have also moved on to AI and deep learning. So thank you for that!
Daniel Korpai
Designer at Invision
The new React for Designers course by @mengto is my dream course since I started learning front-end dev as a designer! I wish a similar course would have existed back in the days. Everything is in one place for designers, this is just pure gold! ✨
