Final chapter

chapters/0401.md

@@ -6,15 +6,15 @@ Now that we've covered both the `transition` and `animation` property, let's com
 
 Many sites like to make use of a large, attention-grabbing image at the top of their homepage. Sometimes called a "hero image", this is usually a full-width banner style element.
 
-A nice example I found recently was the [Fabric](https://get.fabric.io) landing page. A CSS animatiom shows how Fabric works as a modular framework.
+A nice example I found recently was the Fabric landing page. A CSS animatiom shows how Fabric works as a modular framework.
 
 ![Source: https://get.fabric.io/](images/fabric-min.gif)
 
-Another interesting example is the [Mailchimp homepage](http://mailchimp.com). Here the hero image tells a story by demonstrating how emails are created.
+Another interesting example is the Mailchimp homepage. Here the hero image tells a story by demonstrating how emails are created.
 
 ![Source: http://mailchimp.com](images/mailchimp-min.gif)
 
-You may have also seen it in action on this course's landing page:
+You may have also seen it in action on [my CSS Animation 101 email course](https://cssanimation.rocks/courses/animation-101/) landing page:
 
 ![Source: https://cssanimation.rocks/courses/animation-101/](images/course-min.gif)
 
@@ -120,11 +120,12 @@ Since we set a `transition` on the "message" styling, it creates the animation b
 
 ## Summary
 
-Today we combined both an animation and a transition to create an effect that could be useful for landing pages and product tours. We made use of the `animation-play-state` to make sure the animation stopped when we wanted it to.
+In this chapter we combined both an animation and a transition to create an effect that could be useful for landing pages and product tours. We made use of the `animation-play-state` to make sure the animation stopped when we wanted it to.
 
-<div class="callout">
-  <h2>Homework</h2>
-  <p>Take a moment to think about what we've covered so far.</p>
-  <p>We covered a lot. Combining animations and transitions is a powerful way to bring pages to life.</p>
-  <p>When thinking about how this can apply to your work, think about how it might be controlled too. When might animation work for your users' benefit, and when might it work against it? It's great to know how to animate but even better to know when not to.</p>
-</div>
+## Homework
+
+Take a moment to think about what we've covered so far.
+
+We covered a lot. Combining animations and transitions is a powerful way to bring pages to life.
+
+When thinking about how this can apply to your work, think about how it might be controlled too. When might animation work for your users' benefit, and when might it work against it? It's great to know how to animate but even better to know when not to.

chapters/0402.md

@@ -1,6 +1,6 @@
 # Star Wars
 
-Get out the popcorn! Today we're building the Star Wars movie title from the "The Force Awakens" trailer.
+Get out the popcorn! In this chapter we'll have some fun making an SVG animation. We will be building the Star Wars movie title from the "The Force Awakens" trailer.
 
 ![Source: https://www.youtube.com/watch?v=ngElkyQ6Rhs](images/starwars-min.gif)
 
@@ -20,17 +20,17 @@ Lastly we'll use `rotateY` to spin the letters of the tagline. Rotating around t
 
 ## SVG, HTML and CSS
 
-In preparation for this example I made two SVG files for the [Star](https://cssanimation.rocks/starwars/images/star.svg) and [Wars](https://cssanimation.rocks/starwars/images/wars.svg) parts of the logo. Do feel free to grab them to use if you want to play along.
+In preparation for this example I made two SVG files for the [Star](https://cssanimation.rocks/demo/starwars/images/star.svg) and [Wars](https://cssanimation.rocks/demo/starwars/images/wars.svg) parts of the logo. Do feel free to grab them to use if you want to play along.
 
 The HTML for the demo is as follows:
 
     <div class="starwars-demo">
-      <img src="//cssanimation.rocks/starwars/images/star.svg" alt="Star" class="star">
-      <img src="//cssanimation.rocks/starwars/images/wars.svg" alt="Wars" class="wars">
+      <img src="//cssanimation.rocks/demo/starwars/images/star.svg" alt="Star" class="star">
+      <img src="//cssanimation.rocks/demo/starwars/images/wars.svg" alt="Wars" class="wars">
       <h2 class="byline" id="byline">The Force Awakens</h2>
     </div>
 
-A static image [of some stars](https://cssanimation.rocks/starwars/images/bg.jpg) is used for the background. The font in the byline was tricky to find, so I've referenced the web font "Lato" in this example.
+A static image [of some stars](https://cssanimation.rocks/demo/starwars/images/bg.jpg) is used for the background. The font in the byline was tricky to find, so I've referenced the web font "Lato" in this example.
 
 With some absolute positioning to position the content in the middle of the screen, we begin with this:
 
@@ -130,8 +130,8 @@ Putting it together we have the [finished demo](http://codepen.io/donovanh/pen/p
 
 ![Source: http://codepen.io/donovanh/pen/pJzwEw?editors=110](images/css-starwars-min.gif)
 
-<div class="callout">
-  <h2>Homework</h2>
-  <p>I've not included all the keyframes in this email, so if you have time I'd encourage you to take a look through the CSS section of the <a href="http://codepen.io/donovanh/pen/pJzwEw?editors=110">CodePen version</a>.</p>
-  <p>You may notice some "media" queries in the CSS. We use these to resize the example for smaller devices. Try changing some of the animation keyframes, or the <code>transform</code> values to see what happens.</p>
-</div>
+## Homework
+
+If you have time I'd encourage you to take a look through the CSS section of the [CodePen version](http://codepen.io/donovanh/pen/pJzwEw?editors=110).
+
+You may notice some "media" queries in the CSS. We use these to resize the example for smaller devices. Try changing some of the animation keyframes, or the `transform` values to see what happens.

chapters/0403.md

@@ -1,6 +1,6 @@
 # Revealing content on scroll
 
-A popular use for animation on the web is adding movement to elements when the browser scrolls. Today we'll take a look at how to do this.
+A popular use for animation on the web is adding movement to elements when the browser scrolls. In this chapter we'll take a look at how to do this.
 
 Here's [today's demo on CodePen](http://codepen.io/donovanh/pen/gbVMjm). Try scrolling down the page, and see how the quotes and cats fade into place.
 
@@ -77,7 +77,8 @@ It's generally a good idea to protect against situations in which we hide conten
 
 I've included Modernizr in the [demo](http://codepen.io/donovanh/pen/gbVMjm).
 
-<div class="callout">
-  <h2>Homework</h2>
-  <p>Making content fade into place is a great start, but what ways can you imagine this being used to add value to your designs and sites? When browsing, look out for times when content seems to start animating as you scroll to it. When does it work, and when does it not work so well?</p>
-</div>
+## Homework
+
+Making content fade into place is a great start, but what ways can you imagine this being used to add value to your designs and sites? When browsing, look out for times when content seems to start animating as you scroll to it.
+
+When does it work, and when does it not work so well?

chapters/0404.md

@@ -42,7 +42,6 @@ This is something that could become more of an issue as we begin to see more wea
 
 Accessibility isn't just for people using screen readers or alternative means of browsing our content. We're all distracted sometimes, network connections drop, we're checking our phones in a queue at the post office or glancing at directions when driving. We should be aware of the ways people might use what we make and ensure our animations don't get in the way.
 
-<div class="callout">
-  <h2>Homework</h2>
-  <p>If your job involves designing or building interfaces for people to use, do take time to read <a href="http://www.nngroup.com/articles/animation-usability/">NNGroup's Animation for Attention and Comprehension</a>. Think about how people might use your work, and what it might mean if they couldn't see the animation.</p>
-</div>
+## Homework
+
+If your job involves designing or building interfaces for people to use, do take time to read [NNGroup's Animation for Attention and Comprehension](http://www.nngroup.com/articles/animation-usability/). Think about how people might use your work, and what it might mean if they couldn't see the animation.

chapters/0405.md

@@ -2,7 +2,7 @@
 
 You've completed CSS Animation 101! I hope you've enjoyed this book.
 
-Today I'll be sharing some resources you might want to bookmark and explore as you go further with CSS animation.
+Before we finish up, let's explore some resources you might want to bookmark and explore as you go further with CSS animation.
 
 ## CSS Animation cheatsheet
 
@@ -24,14 +24,14 @@ A nice alternative to Animate.css, Hover.css is another wide variety of ready to
 
 CSS animation is pretty powerful, and can achieve a lot without needing to resort to other technology such as JavaScript. However it's not the right tool for all situations. Sometimes there's a need for more complex animations, and JavaScript can help take things further. The best packages build on CSS to make use of its speed and browser support, but let you do more.
 
-### [Snabbt.js](http://daniel-lundin.github.io/snabbt.js/)
-
-Snabbt is a powerful and elegant way to create more complex animation using custom timing functions. It generates transform matrices for the browser to animate, resulting in very good performance.
-
 ### [GSAP](http://greensock.com/gsap)
 
 Greensock Animation Platform is a JavaScript-based method of creating more advanced animations and offers fine control and great performance. There's a bit of a learning curve but it's a powerful tool.
 
+### [Snabbt.js](http://daniel-lundin.github.io/snabbt.js/)
+
+Snabbt is a powerful and elegant way to create more complex animation using custom timing functions. It generates transform matrices for the browser to animate, resulting in very good performance.
+
 ### [CSS Animate](http://cssanimate.com/)
 
 CSS Animate is a tool for generating keyframe animations. It helps design animations by dragging an object around and uses a handy timeline approach.
@@ -60,13 +60,6 @@ If you want me to send you a sticker, reply to this email and let me know the ad
 
 Again, congratulations. You did it! Thank you for being part of this course!
 
-<p>Donovan<br />
-<a href="https://cssanimation.rocks">CSSAnimation.rocks</a><br />
-<a href="https://twitter.com/cssanimation">@cssanimation</a></p>
-
-P.S. Please do share the love! It would mean a lot to post on your social media outlet of choice, send the link to a friend or just get word out about this book. Here's that tweet example. Do it!
+Donovan
 
-<div class="callout">
-  <h4>I did it! I completed CSS Animation 101. Check it out</h4>
-  <p><a href="https://twitter.com/intent/tweet/?text=I%20completed%20CSS%20Animation%20101%20with%20%40cssanimation!%20Use%20code%20%22friend%22%20to%20save%2020%25&url=https%3A%2F%2Fcssanimation.rocks%2Fcourses%2Fanimation-101%2F">Tweet this!</a></p>
-</div>
+[CSSAnimation.rocks](https://cssanimation.rocks) / [@cssanimation](https://twitter.com/cssanimation)

chapters/0501.md

@@ -1,3 +1,25 @@
 # Level up your CSS animation skills!
 
-... text here and link to video abut the course ...
+Congratulations for finishing this introduction to CSS animation! I hope you've enjoyed it. Adding animation to your web projects is a great way to make them stand out.
+
+Introducing an essential video course: [Level Up Your CSS Animation Skills](http://courses.cssanimation.rocks/p/level-up/)
+
+Continue learning how to create amazing animations with over 4 hours of high quality video lessons and lifetime access to all video content, cheatsheets and guides.
+
+You will learn how to:
+
+* Create an amazing animated hero header
+* Bring your UI to life with hover, touch and button animations
+* Wow your visitors with scroll and parallax animations
+* Build your very own animated carousel
+* Adjust animations to fit all sizes of devices and browsers
+* Optimise your CSS animations for reuse and size
+* Each with fun examples you can follow along, step by step
+
+By the end of the course you'll have the skills you need to create an impressive animated landing page!
+
+As a *reward for finishing this book* you can save 35% today with the code `BOOK` here:
+
+http://courses.cssanimation.rocks/p/level-up/?code=book
+
+