Search

start

design

start

scroll

start

navigation

start

effects

start

cms

start

localization

start

insert

start

templates

start

management

start

integrations

start

code

start

courses

Build Your First Site

Build Your first Framer Site from Start to Finish

A beginner tutorial showing you how to make a website from scratch. Starting from a blank Canvas. By the end of the video you’ll have a very solid understanding of Framer and should be ready to design your next website.

Beginner

Join us in this tutorial video as we dive into the world of website creation using Framer, starting from a blank canvas. We'll explore Framer’s comprehensive interface, including its toolbar, main menu, and various panels essential for design. Learn the intricacies of canvas navigation with helpful keyboard shortcuts to enhance your workflow.

We'll guide you through the crucial steps of layout creation, starting with the layers panel and using tools for text and frames to design headings, sub-lines, and buttons. Discover the importance of layer nesting and how to make your site responsive and appealing across different devices by implementing media and adding breakpoints.

Get insights on advanced positioning techniques, including setting up a fixed navigation bar and populating it with consistent links. We'll also delve into the exciting world of Framer's components, creating interactive animations for a dynamic website header.

The tutorial covers final design tweaks, experimenting with typography, and adding subtle yet impactful effects like drop shadows and padding adjustments. We'll show you how to bring your site to life with animations, enhancing its appeal on page load.

Finally, witness the ease of publishing and iterating your website with Framer's quick publishing feature, emphasizing the tool's flexibility and user-friendliness. This video is a comprehensive guide for anyone looking to master website design in Framer.