90-Day UX Pilot Web Design tool study plan

 

Welcome to the 90-Day UX Pilot Masterclass. While UX Pilot is highly regarded for its AI-assisted wireframing and UX design capabilities, this specific curriculum guides you through using it (or your integrated visual development environment) as a comprehensive visual site builder.

Below is the detailed lecture text and step-by-step instruction manual to accomplish every single topic on your 90-day roadmap.

Phase 1: Foundations (Days 1–20)

Day 1: Interface Basics

Lecture: The workspace is your digital canvas. Understanding the geography of your tool—where the DOM (Document Object Model) structure lives versus where the CSS styling rules are applied—is the first step to mastering visual development.

Instruction: Open the UX Pilot dashboard and click Create a new project → Select the Blank template. Spend 30 minutes clicking through the interface. Locate the Navigator/Layers panel (left side) and the Style Inspector (right side). Practice canvas navigation: hold Spacebar to pan, and use Cmd/Ctrl + Scroll to zoom in and out.

Day 2: Pages

Lecture: A website’s architecture is built on interconnected pages. Proper naming and hierarchy ensure good user experience (UX) and clean routing.

Instruction: Open the Pages panel. Click Add New Page to create three pages. Rename them to "Home", "About", and "Contact". In the Navigator, arrange them so "Home" acts as the top-level index page.

Day 3: Sections

Lecture: Sections (<section>) act as the primary horizontal wrappers of your website. They divide your page into thematic blocks (e.g., Hero, Testimonials, Footer).

Instruction: Drag a Section element onto your blank canvas. Go to the Style Inspector’s background settings and apply a solid background color to differentiate it from the white page body.

Day 4: Containers

Lecture: Containers (<div> wrappers with a max-width) prevent your content from stretching unreadably wide on large desktop monitors. They keep your UI centralized and legible.

Instruction: Drag a Container element inside your new Section. Observe how it naturally centers itself. Always place your typography and interactive elements inside containers.

Day 5: Text Elements

Lecture: Web typography establishes a visual hierarchy. Headings (H1-H6) are crucial for SEO and screen readers, while paragraphs (p) handle your body copy.

Instruction: Insert an H1 Heading inside your container, followed by a Paragraph. Highlight them and use the Style panel to adjust the font family, font size, and line height (aim for a line height of 1.5 for readability). Create a hyperlink by highlighting a word and clicking the link icon.

Day 6: Buttons

Lecture: Buttons are the main drivers of user action. A good button requires clear padding, high contrast, and interactive feedback (hover states).

Instruction: Drag a Button element into your container. Add padding (e.g., 16px top/bottom, 32px left/right). To style the hover state, select the button, switch the state dropdown to "Hover" in the Style panel, and darken the background color.

Day 7: Images

Lecture: Visuals engage users, but they must be optimized and accessible. Alt text describes the image to search engines and visually impaired users.

Instruction: Upload an image to your asset manager and drag it onto the canvas. Adjust its size to Max-Width: 100%. Click the settings gear on the image to add descriptive Alt text.

Day 8: Backgrounds

Lecture: Layering backgrounds creates depth. You can stack images, gradients, and solid colors on a single element.

Instruction: Select a Section. Apply a background image set to "Cover" and "Center". Add a linear gradient layer on top of the image, setting the gradient's opacity to 70% to ensure any text placed on top remains readable.

Day 9: Navigator

Lecture: The Navigator is the x-ray of your website's HTML. Proper nesting (parent-child relationships) is the secret to a layout that doesn't break.

Instruction: Open the Navigator panel. Practice moving elements. Ensure your structure is strictly nested: Body > Section > Container > Elements (Text/Buttons/Images).

Day 10: Style Panel

Lecture: The CSS Box Model governs spacing. Margin pushes elements away from each other, while padding creates breathing room inside an element.

Instruction: Select your paragraph text. Use the Style panel to add 24px of bottom Margin. Apply a 1px solid border to your button, along with a subtle drop shadow to make it pop off the page.

Days 11–15: Build a Simple 3-Page Static Website

Instruction: Synthesize your Phase 1 skills. Build the Home page with a hero section, a 3-column feature section, and a footer. Duplicate this layout for the About and Contact pages. Link your navigation elements so you can click between the pages.

Days 16–20: Practice Styling

Instruction: Refine your site’s UI. Restrict yourself to two fonts and a strict color palette. Audit your spacing to ensure you are using consistent mathematical increments (e.g., 8px, 16px, 32px, 64px) across all sections.

Phase 2: Core Web Design (Days 21–40)

Day 21: CSS Classes

Lecture: Classes are reusable design rules. Instead of styling every button individually, you style a class and assign it universally.

Instruction: Select a button. In the Selector field, type btn-primary. Style it. Add a second button to the page, type btn-primary in its selector, and watch it instantly inherit your design.

Day 22: Flexbox

Lecture: Flexbox automatically aligns and spaces items in a single row or column, making it perfect for navigation bars and card layouts.

Instruction: Create a div and place three images inside. Select the parent div, set Display: Flex, Direction: Horizontal, and align the items using Justify: Space Between.

Day 23: Grid

Lecture: CSS Grid is a two-dimensional layout system for complex, rigid structures (like photo galleries or intricate dashboards).

Instruction: Set a container to Display: Grid. Define 3 columns and 2 rows. Place text, images, and buttons into specific cells within the grid settings.

Day 24: Responsive Design

Lecture: Websites must adapt to the device viewing them. Changes made on larger breakpoints should cascade down to smaller ones, but not vice versa.

Instruction: Switch to the Tablet viewport view. Change your 3-column Grid to 2 columns. Switch to Mobile Landscape and change it to 1 column. Reduce your H1 font size on mobile.

Day 25: Symbols

Lecture: Symbols (Components) are master elements. Change the master, and every instance across your site updates instantly.

Instruction: Select your completed Navbar, right-click, and choose "Create Symbol" (or Component). Place this symbol at the top of your About and Contact pages.

Day 26: Interactions Basics

Lecture: CSS transitions provide smooth visual feedback when a user interacts with an element.

Instruction: Select your btn-primary. Change its hover state color. Go back to the default state, scroll to Transitions, and add a transition for "Background Color" at 300ms.

Day 27: Scroll Animations

Lecture: Scroll triggers reveal elements as the user scrolls down, making the page feel dynamic and premium.

Instruction: Select an image. Open the Interactions/Animations panel. Add a "Scroll Into View" trigger. Set the animation to move the element up by 40px and fade in from 0% opacity over 600ms.

Day 28: Navigation Menus

Lecture: Responsive navigation requires a horizontal layout for desktop and a collapsible "hamburger" menu for mobile.

Instruction: Add a native Navbar component. Check it on the desktop viewport, then switch to the mobile viewport to customize the hamburger icon and style the dropdown link list.

Day 29: Forms

Lecture: Forms are the bridge between you and your users. Input fields must be highly visible and clearly labeled.

Instruction: Drag a Form block onto your Contact page. Style the input fields with borders and padding. Add clear placeholder text. Style the submit button using your btn-primary class.

Day 30: CMS Basics

Lecture: A Content Management System (CMS) separates design from data, letting you build one template that populates with hundreds of database entries.

Instruction: Open the CMS panel. Create a "Blog" collection. Add fields for Title, Cover Image, Rich Text (body), and Author. Create three sample entries.

Days 31–35: Build a Responsive 5-Page Website with CMS Blog

Instruction: Add a "Blog" page to your site. Insert a "Collection List" element and connect it to your Blog CMS. Design one card inside the list, and watch it automatically duplicate and populate for every post in your database.

Days 36–40: Add Interactions and Animations

Instruction: Spend these days polishing user engagement. Add load-in animations to your page headers. Apply a hover interaction to your CMS blog cards so they elevate (scale up 1.05x) and cast a shadow when hovered.

Phase 3: Advanced Development (Days 41–65)

Day 41: Advanced CMS

Lecture: Dynamic filtering allows users to sort content based on categories without loading a new page.

Instruction: Add a "Category" field to your Blog CMS. On your live Blog page, add a filter in the Collection List settings to only show posts categorized as "Design".

Day 42: Collections

Lecture: CMS isn't just for blogs. It can manage products, team members, or portfolio case studies.

Instruction: Create a new collection called "Products". Add custom fields: Price, SKU, Description, and multiple images. Add 5 test products.

Day 43: Dynamic Lists

Lecture: Binding connects your visual UI elements to your backend database fields.

Instruction: Drop a Collection List onto a new "Store" page. Bind an Image element to the "Product Image" field, a Heading to the "Product Name" field, and a Text block to the "Price" field.

Day 44: E-commerce Basics

Lecture: E-commerce requires specialized state management (the cart) to temporarily hold user selections securely.

Instruction: Enable E-commerce features in your project. Add an "Add to Cart" button to your Product list. Style the cart sidebar that slides out when an item is added.

Day 45: Checkout Flow

Lecture: Trust is won or lost at checkout. The design must be frictionless and secure.

Instruction: Open the Checkout Page template. Style the input fields for billing/shipping to match your brand. Customize the Order Confirmation page to include a summary and next steps.

Day 46: SEO Basics

Lecture: SEO metadata tells search engines exactly what your page is about.

Instruction: Go to Page Settings for your Home page. Write a meta title (under 60 characters) and a description (under 160 characters). Ensure your images have alt text and your page has a single H1.

Day 47: Custom Code

Lecture: Injecting HTML/CSS/JS breaks the limits of visual builders, allowing custom features.

Instruction: Open Page Settings. In the <head> code section, write a basic CSS rule (e.g., changing the text selection highlight color) or embed a weather widget iframe.

Day 48: Integrations

Lecture: APIs and integrations connect your site to marketing and analytics ecosystems.

Instruction: Create a free Google Analytics property. Paste your Measurement ID into the project settings. Connect Zapier to your Contact Form to automatically send submissions to a Google Sheet.

Day 49: Site Search

Lecture: Native search drastically improves UX, especially for content-heavy sites.

Instruction: Add a Search Bar element to your Navbar. Open the Search Results template page and design the layout that displays the queried CMS items.

Day 50: Performance Optimization

Lecture: Fast sites rank higher and retain users. Asset optimization is non-negotiable.

Instruction: Compress all large images. Toggle on "Minify HTML/CSS/JS" in your project settings to strip blank spaces from your code, reducing file size.

Days 51–55: Build a Dynamic Blog Site with CMS + SEO

Instruction: Design the "Blog Post Template" page. Bind a Rich Text element for the article body. Add a "Recent Posts" section at the bottom. Audit the page's metadata fields using dynamic CMS variables (e.g., pulling the meta title directly from the blog post title).

Days 56–60: Add E-commerce Features

Instruction: Finalize the storefront. Build out the "Product Template" page featuring a large image gallery, variant selectors (size/color), and a seamless Add to Cart experience.

Days 61–65: Optimize Site for SEO & Performance

Instruction: Run your site through Google Lighthouse. Fix contrast issues, ensure tap targets (buttons) are large enough on mobile, and replace any heavy PNGs with compressed WebP files.

Phase 4: Professional Workflow (Days 66–90)

Day 66: Version Control

Lecture: Backups allow you to take creative risks without destroying your functional site.

Instruction: Save a manual backup point in the project history. Make a drastic change to the homepage design, then use the history panel to restore the previous version.

Day 67: Collaboration

Lecture: Assigning user roles protects the layout while allowing clients to edit text.

Instruction: Go to Workspace settings. Invite an alternate email address as a "Content Editor". Log in as that editor to experience how non-designers interact with the CMS without altering the CSS.

Day 68: Accessibility

Lecture: Web accessibility (WCAG) is a legal and moral standard. Your site must be navigable by everyone.

Instruction: Use a color contrast checker plugin to verify your text is legible. Unplug your mouse and ensure you can navigate through your entire site's links and forms using only the Tab key.

Day 69: Testing

Lecture: Cross-browser and cross-device testing reveals rendering bugs.

Instruction: Publish to a staging URL. Open the site on a mobile phone, a tablet, and a desktop. Test it across Chrome, Safari, and Firefox. Fix any layout breaks.

Day 70: Hosting

Lecture: Connecting a custom domain makes your project a real, indexable web property.

Instruction: Purchase a domain. Update your registrar's DNS settings (A-Records and CNAME) to point to your site builder's servers. Publish the site.

Day 71: Security Basics

Lecture: SSL encrypts data between the browser and the server, protecting form submissions and passwords.

Instruction: Verify in your hosting settings that the SSL certificate is active. Toggle "Force HTTPS" so users cannot access the insecure version of your site. Enable reCAPTCHA on your forms.

Day 72: Advanced Interactions

Lecture: Parallax and multi-step animations create a highly immersive narrative experience.

Instruction: Select a background image. Create a "While Page is Scrolling" interaction. Map the image to move slightly slower than the page scrolls, creating a 3D parallax effect.

Day 73: Advanced E-commerce

Lecture: Real-world stores require complex sales logic.

Instruction: In your e-commerce settings, create a promotional discount code (e.g., "LAUNCH20"). Set up weight-based or location-based shipping rules.

Day 74: API Integrations

Lecture: Webhooks allow real-time data transfer when an event happens on your site.

Instruction: Set up a webhook so that when a new order is placed, an automated Slack message is sent to you, and the user's email is added to a Mailchimp list.

Day 75: Portfolio Site

Lecture: Your portfolio is your resume. It needs to reflect your absolute best technical capabilities.

Instruction: Wireframe the architecture for your personal portfolio. Plan for a Home page, an About page, and a dynamic CMS "Projects" template.

Days 76–80: Build a Full E-commerce Prototype

Instruction: Build out a high-fidelity store based on a fictional brand. Ensure every phase—from product discovery, to cart review, to secure checkout—is visually cohesive and works flawlessly on mobile.

Days 81–85: Conduct Usability Testing & Audit

Instruction: Ask three people to test your staging site. Give them a task ("Find the contact form" or "Buy this product"). Watch them navigate without helping. Document where they get confused and fix the UI.

Days 86–89: Final Polish

Instruction: Do a comprehensive QA sweep. Check for broken links (404s). Ensure all hover states work. Guarantee your Google Lighthouse performance and accessibility scores are in the green (90+).

Day 90: Final Project — Portfolio Showcase

Instruction: Launch your magnum opus. Publish your multi-page portfolio on your custom domain. Ensure it features your newly built CMS blog and links to your functional e-commerce prototype. Share the link on your professional networks.

📝 Study Tips

1. Don't just watch, build: Muscle memory is everything in visual development. Never watch a tutorial without recreating it simultaneously on your own canvas.

2. Master the Box Model early: If you don't understand how Margin, Padding, and Divs work by Day 10, stop and review. Everything else is built on this foundation.

3. Use Placeholder Content: Don't get stuck writing copy or finding perfect photos. Use Lorem Ipsum and unsplash placeholders so you can focus strictly on layout and CSS mechanics.

4. Name your classes clearly: Using classes like blue-text-big will ruin your site when you rebrand to red. Use structural names like heading-primary or btn-secondary.

5. Break things on purpose: The best way to learn the Navigator and CSS hierarchy is to accidentally break your layout, hit undo (Ctrl+Z), and figure out exactly why it broke.