Sign in

Free
lesson

Frontend.fyi PRO gives you instant access to all lessons of this and future courses! €249 one time, no subscription.

Learn about PRO

About the platform

The platform you’re browsing this course on is custom built for my courses. Here’s a quick tour.

The live playground

Most lessons come with a live playground: a real code editor next to a live preview of the result. Give it a go.

Playground settings

Playground

Anyone with the link can view it. Private playgrounds are only visible to you.

Editor

Applied right away

Files in the same folder share one tab.

Packages

Importable from your code, loaded from esm.sh

import { Card } from "./Card";

const App = () => {
return (
<div className="grid min-h-screen place-items-center p-8">
<Card title="Hello world" />
</div>
);
};

export default App;
  • No matching files
↵ open⌘↵ open to the sideesc close

Tasks

Try to complete all tasks below.

Finding your way around

  1. 1VersionsStarting point, your version and the solution.
  2. 2FilesOne tab per file. Drag a tab to open it side by side.
  3. 3EditorEdit anything. It knows TypeScript, React and Motion.
  4. 4PreviewUpdates as you type, keeping its state. Errors show on top.
  5. 5Status barProblems, cursor position, format and go to file.
  6. 6ToolbarSaving, console, layout, settings and full screen.

The toolbar

Saved
  • Back to the starting point
  • Rerun the preview
  • Your console.logs
  • Hide the code
  • Wrapping, line numbers…
  • Use the whole screen

Saving your work

As a Pro member, your work is saved automatically every few seconds, so you can always pick up where you left off. ⌘ S saves right away. The toolbar tells you where you stand:

SavedAll good
Unsaved changesSaves in a moment
Saving…On its way
Couldn't saveRetrying, your code stays

Without Pro you can still edit the starting point of every playground. Your changes just aren’t saved: the status bar shows Not saved, with a button to reset the code.

An editor that understands your code

It knows TypeScript and React, including all of Motion’s types.

Autocomplete

Every prop and option, as you type

Hover info

Types and docs for anything

Errors

Underlined right away, counted below

Go to definition

Jump across files, rename everywhere

Format

Tidy code with Prettier

Emmet

div.card + Tab

Side by side

Split the editor with the split button, or drag a tab onto the edge of the editor. Drag the dividers to resize.

App.tsx
Card.tsx
Side by side
App.tsx
Card.tsx
styles.css
…and splits within splits

Keyboard shortcuts

  • Go to file⌘P
  • Split the editor⌘\
  • Save⌘S
  • Search⌘F
  • Format⇧⌥F
  • Go to definition⌘Click
  • Find references⇧F12
  • RenameF2

On Windows and Linux: Ctrl instead of ⌘, Alt instead of ⌥.

Styling

I use Tailwind CSS classes for styling throughout the course, and they work in every playground. Prefer plain CSS? Every playground has a styles.css 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 curriculum page.

And continue to the next lesson

The sidebar on the left lists every module and lesson, with a check mark next to the ones you’ve completed. On smaller screens, open it with the menu button in the top left.

Feedback

Finally, at the bottom of every lesson there’s a Lesson Feedback button. Use it for any feedback, or to share your excitement about a lesson! I’m eager to hear what you think, and I’d love to use your excitement as a review on the course page.

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

Next up

Module 1 – Lesson 3Comparing Motion for React With CSS Animations