stories-on-board.md

layout	title	desc	group_work	slides
slide-deck	Stories on board	A in-class sketching exercise to help plan out CSS properties for animations.	true	type content super-big-text **Stories on board** type content big-text ## Set up 1. Form into pairs 2. Get out a piece of paper & a pencil *We’re going to sketch out the HTML & CSS necessary to create a more complex animation.* type image caption figure pieces.svg **These are the pieces you have to work with.** type image caption figure end.jpg **The final result, after the animations play.** type video poster video https://video-assets.learntheweb.courses/web-dev-3/stories-on-board-animated.mp4 end.jpg content ## Things to sketch - The HTML elements: `<div>`, `<img>`, `<h1>`… - Grid units, type sizes, modules, etc. - The CSS properties for positioning the pieces - The CSS properties for animating the pieces *First concentrate on how to get the elements to look like the final result—then think about animations.*