Where focus goes, energy flows

Interactivity and Navigation


Now to create a website you need a reliable website builder, We recommend Framer.
This Chapter includes part 4 and 5.


Building a Navigation Bar


In this lesson, you’ll go through the process of building the navigation bar of our website. We start by drawing a new Frame for the navigation bar and setting its dimensions and background color. Next, we style the navbar with a logo, space-between layout, and padding, and add links for “Features," “About us," and "FAQ." We then create a flexible button within a new Frame, style it, and change the text to “Sign up."


Creating Reusable Components


Learn about Components, Variants, Variables, hover, and pressed states. Find out how Components act as reusable elements on a website, how Variants allow for easy customization, and how Variables update specific instances of a Component.


Building a Cards Section


This lesson explains the steps to create an appealing card section for our website. First, set up a new Frame with the desired width and height. Then, add text to the Frame and apply appropriate styling. Create a separate Frame for the background image, applying a gradient effect. Copy and paste the image into the Card Frame, and create additional Frames for sections that need more control.


Building a Testimonials Section


In this lesson, we create a professional testimonial section for our website. You will learn how to design each testimonial with text, image, name, and title, and make adjustments to spacing and background color. The video also demonstrates how to duplicate and update testimonials, set the height of the testimonials Frame, and adjust padding for consistency.


This Concludes this part of our chapter


Click More to start the next Chapter, you will be redirected to the last Chapter part 6.