Core Page Sections

Let's go mobile friendly

In this video, I guide you through the process of building a responsive web page using Figma.

We’ll start from where we left off in the wireframe stage, and establish some basic styles for our main sections. I'll demonstrate how to add sections, customize them, and ensure they adapt to various devices using the viewport height (VH) unit. By the end of the video, you'll understand how to create a responsive web page using Figma. You'll learn to add sections like intro, features, products, parallax, and sign up to your homepage. We'll cover how to set the section size to expand according to the viewport height, ensuring your design works on any device. Additionally, I'll show you how to use borders to visualize section boundaries and set up navigation so users can smoothly scroll to different sections.

Summary

1. Introduction to Video: I kick off the video by welcoming viewers and setting the stage for creating a responsive web page using Figma.
2. Establishing Sections: We revisit the wireframe stage, setting up main sections for the landing page including intro, features, products, parallax, and sign up.
3. Adding Sections: Demonstrating how to add sections using the plus icon and assigning H1 headings to each.
4. Using Viewport Height (VH): Explanation of why 100% height isn't sufficient and how to use the VH unit to ensure sections fit the viewport.
5. Customizing Sections: Steps to create a class for sections to ensure they expand to 100% of the viewport height regardless of the device.
6. Section Visualization: Tips on using borders to distinguish sections and visualize space.
7. Previewing Changes: How to preview the page to see the changes and ensure sections are correctly sized.
8. Navigation Bar Setup: Initial steps for adding a navigation bar and ensuring each section scrolls to the correct position.
9. Practical Tips: Additional advice on using simple borders and color-coding for better section identification.
10. Next Steps: Teasing the next lesson which will cover more advanced navigation and interaction techniques.