These are my notes on the Framer Fundamentals course found at https://www.framer.com/academy/courses/fundamentals

One thing to note. There is a conflict between the course landing page and the playlist once you get inside the course. They are not in the same order. This follows the outline of the course in the order that it appears in the playlist once you launch one of the course videos.

<aside> 💡

The outline on the side facilitates quick navigation of the full set of notes.

</aside>

I find that note taking, but more importantly note review after watching a tutorial is critical for learning. If you do too, you can use these notes to review concepts or to save a lot of time if you’d rather not watch all the videos one by one.

Lesson 1 - The Framer Interface

Framer Interface Overview (4 Main Parts)

• Toolbar (Top)
• Left Sidebar
• Right Sidebar
• Canvas (Center)

Toolbar Breakdown

• Framer Logo Button: Opens main menu (analogous to Mac/Windows menu bar).
• Insert Panel: Access to pages, sections, design elements, and components.
  • Shortcut: I
• Layout Menu & Text Button: Add basic elements (no code needed).
• CMS Button: Manages content collections (explored in a later course).
• Quick Action Bar: Universal search and command runner.
  • Shortcut: Cmd+K (Mac) / Ctrl+K (Windows)
• Project Name: Click to rename or move project; shows live URL if published.
• Collaboration Tools:
  • Avatars of collaborators
  • Localization (multi-language support)
  • Settings (site and page)
  • Preview Mode (browser simulation)
  • Invite Button (add collaborators)
  • Publish Button: Deploy changes live