Where focus goes, energy flows
The Fundamentals of using Framer
Now to create a website you need a reliable website builder, We recommend Framer.
This Chapter includes part 1, 2, and 3.
Basics of Framer
Like other design tools, the Canvas is the foundation for creating web pages. You can use Components, Custom Code, and reusable Styles displayed in the left-hand panel. The Properties Panel on the right allows you to fine-tune the look and functionality of elements
Positioning, Sizing and Layout
You’ll learn about layout options like Stacks and Grids, distribution and alignment of elements within a Frame, and concepts like padding and gaps. Discover different sizing options such as Fixed, Relative, Fill, and Fit Content, and explore positioning techniques including Absolute, Relative, Fixed, and Sticky.
Starting your Site with AI
In this lesson, we explore Framer’s AI features that can help you fast-track the building process. Starting with a blank canvas, you’ll learn how to generate a new page by providing a detailed prompt..
Building a Hero Section
In this lesson, we build a new landing page from scratch! We go step by step, starting with opening a new Project and adding styling. We set preset stylings for colors and text, upload a custom typeface for fonts, and create a hero section with a specific width and height. Text is then added and styled, and a background image is set.
This Concludes this part of our chapter
Click More to start the next Chapter, you will be redirected to the start there Choose part 4.