Unit 7: From Figma to Interactive Website

Unit 7 in the Nivaro AI Website Program is dedicated to creating and transforming designs into interactive web applications using Tailwind CSS, and enhancing these designs with advanced components.

Lesson 7.1: Designing AI Websites

In this lesson, students will create a mockup of what their AI website will look like.

What is a Mockup?

Mockups are drawings of final products. They help make development a smooth and organized process.

How do I make a Mockup?

• Open Google Draw or take out a piece of paper and just draw your website!
• Draw lines connecting screens.
• Take notes on the functionality of each screen/component.
• Check out some well-established websites like apple.com and amazon.com for inspiration.

Example Mockups:

• Google Draw Example
• Hand-Drawn Example 1
• Hand-Drawn Example 2

Lesson 7.2: Coding Designs with Advanced Styling

In this lesson, students will develop a front end for their AI Websites.

Adding a Hero Section

Hero Sections are the attention-grabbing landing screens for websites.

• Open HyperUI and find “Banners”.
• Find a component you like and press the “👀View” button. This reveals the code for the component.
• Open your Code Sandbox from unit 6 and create a new component named HeroSection.
• Open this GitHub link, click Code, and Codepaces to re-open your old Codespace.
• Add the Hero Section code to the component.
• Import and call HeroSection inside the starting page.

Other Open Source Component Library Links:

These websites serve similar purposes as HyperUI. Using all these resources, most of your styling needs will be met.

• HyperUI
• Tailwind Components
• Flowbite
• Tailgrids
• Chatbot alternative

Homework: Polished App

Using your app from unit 6 and styling tips from unit 7, make your AI Website.

• Improve the components you will use in your website using the above websites.
• Save your work to your github repository from unit 6.
• Submit your website through Schoology.