This course is focused on CSS Layout and Animations. Today I want to show you how you can layout challenging designs simply with CSS grid and Flexbox. We will also focus on creating engaging UI by adding CSS animations. We are going to use CodePen to layout portions of the design for a site called Letter.

Why this course?
The human brain is hardwired to pay attention to moving objects. Animation is all over the web. From subtle button transitions to complete story telling online. In this course we will build out this UI Prototype image in CodePen using CSS Grid and Flexbox. I will help you learn the basics of CSS transforms and animations. In another course we will be using the same layout but I will go over more complex animations with the jаvascript animation library GSAP. To get the most out of this course it is good to have some CSS and HTML knowledge to help navigate the complexity of some concepts.

Grid and Flexbox
CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. Grid comes with an all new syntax that allows for a lot of flexibility in how you write your markup. We will explore grid-template-columns, grid-template-rows, grid-areas, grid-gap and more. Flexbox allows for flexible one-dimensional layouts. Flexbox is used to help distribute space and aligning your content within a flex-container. Flexbox will automatically give more or less space where needed for your content. To get the most out of a design it is useful to use both CSS Grid and Flexbox. When they are combined we no longer need to rely on CSS frameworks like Bootstrap for rapid prototying of designs.