Unit 7: Turning Designs into Functional Websites

Unit 7 of the Avarix AI Website Program focuses on bringing visual designs to life with interactive web features using Tailwind CSS and integrating advanced reusable components.

Lesson 7.1: Planning Your AI Website Design

Learn to create a visual plan for your website layout and flow.

What’s a Website Mockup?

A mockup is a visual draft of your final website. It helps streamline the development process and keep things organized.

How to Make a Mockup

Use Google Draw or sketch it out by hand—just get your layout ideas down!
Connect the pages/screens with arrows or lines
Include notes explaining how each page or element should work
Look at websites like apple.com or nike.com for inspiration

Lesson 7.2: Styling with Tailwind and Components

Learn how to code and style your mockup using real UI components.

Creating a Hero Section

A Hero Section is the first section visitors see—it sets the tone and grabs attention.

Visit HyperUI and browse the "Banners" section
Choose one you like and click "👀View" to copy the code
Go back to your Unit 6 CodeSandbox and create a new component called HeroSection
Open your existing Codespace from GitHub by clicking Code → Codespaces
Paste the Hero code into your new component
Import and render HeroSection inside your homepage

Helpful UI Libraries

These are other great sources for styling your project quickly:

Homework: Finalize Your App

Use the structure from Unit 6 and styling from Unit 7 to polish your AI site.

To-Do List

Upgrade your components using the styling tools listed above
Commit your changes to the same GitHub repo from Unit 6
Submit your final version through Schoology

Was this page helpful?