About the platform

The platform you are browsing this course on, is custom built specifically for my own courses. It brings quite a few neat features that make the learning even more fun and practical. These features are what I want to go over here first.

The live playground

This course is centered around code and interactive previews. If I would only present you with static code snippets, it would become very hard to understand some concepts and experiment with them on your own. That is why this platform brings you a live playground and interactive examples.

import { motion } from "framer-motion";

const App = () => {
  return (
    <div className="flex items-center justify-center min-h-screen text-2xl text-white">
     Hello world
    </div>
  );
};

export default App;

Features

There are a ton of features packed into this playground.

Open files: At the top left you find any files that are part of the current demo. You can switch between them by clicking on the file name.
Code editor: On the left half of the screen you find the active file you are currently previewing. You can edit the code here and experiment yourself.
Live preview: The right half of the screen is the interactive preview. It will update automatically as you edit the code on the left side.
Controls: In the top right of the editor you find a list of controls:

Toggle text wrap in the editor

Refresh browser (won’t reset code)

Make playground fullscreen

Only show preview (hide code)

Show code and preview side-by-side

Reset the playground to it’s initial state

Auto saving

The playground automatically saves your work every 5 seconds. You can also manually save your work by clicking the save button.

Save your work – hover to see last saved timestamp

You have unsaved changes – click to save.

You made no changes to this playground yet.

Styling

Throughout the course you see me use TailwindCSS classnames for styling. The playground automatically generates any tailwind classes you write as CSS styles. This means you can use any Tailwind class you want and it will work.

Don’t know or don’t like Tailwind? Every course also has a styles.css file as an open tab. You can add any styles you want in there too.

Course progress

The course is split into modules and lessons. At the end of each lesson there is a button to mark the lesson as completed, which will then take you to the next lesson.

You can keep track of your course progress on the cirriculum page.

And continue to the next lesson

Sticky at the bottom of your screen, you also find the quick navigation. This allows you to quickly jump between lessons in the same module, go back or forth in module, or go back to the overview page.

Feedback

Finally, at the bottom of every lesson there’s a white button to leave feedback. Feel free to use it to give any feedback, or show your excitement about a lesson! I’m eager to hear your opinions and would love to use your excitement as a review on the course page.

Okay – Enough about the platform. Let’s start learning about Framer Motion!