Website Project (Lesson 1)
Welcome to your first Practice Lesson! Each chapter in our course will include a practice lesson where you'll apply your newly acquired skills.
What We’ll Do
By the end of this course, you will have created a modern and responsive custom website, designed in Figma and coded using shadcn/ui.
Our course consists of 5 chapters, each with a practice lesson that will guide you in building your website piece by piece:
- Getting Started - Set up a Figma file for your website project.
- Theming - Customize your website's unique styling by adjusting variables.
- Components - Modify crucial components to fit your design.
- Pro Blocks - Construct your website using Pro Blocks, editing them to match your style.
- Plugin - Use the Figma to shadcn/ui plugin to build a fully functional website.
Let’s Get Started!
In this chapter, you learned how to import the UI kit into your Figma account drafts. Let's use that knowledge to create a file for our Website Project.
Task 1.
- Create a fresh copy of the shadcn/ui kit for Figma in your Figma account Drafts.
- Rename this file to "Website Project - ShadcnDesign Academy".
That's it! You now have a fresh project to start with. In the next practice lesson, we will edit variables to customize our project styling.