90-Day Softlite.io Web Design tool study plan

 

Welcome to the 90-Day Softlite.io Web Design tool study plan. While Softlite.io is primarily known for providing AI-powered development tools (like UIBrainX and ClonewebX) that generate and export layouts for visual builders like Webflow, Elementor, and Bricks, this curriculum follows a standard, industry-recognized visual development workflow.

Below is the detailed lecture 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 interface of a visual builder acts as your digital canvas and CSS control center. Understanding where structural elements live (the DOM) versus styling properties is essential for an efficient workflow.

Instruction: Open your dashboard and click Create New Project → Select the Blank Template. Take 30 minutes to explore the workspace. Locate the Layers/Navigator panel on the left (your HTML structure) and the Style Inspector on the right (your CSS). Practice your shortcuts: hold Spacebar to pan across the canvas and use Cmd/Ctrl + Scroll to zoom in and out.

Day 2: Pages

Lecture: A website is a collection of interconnected pages. Properly naming and organizing your pages establishes a clear routing architecture for both users and search engines.

Instruction: Open the Pages panel. Click the + Add New Page icon to create three distinct pages. Rename them exactly: "Home", "About", and "Contact". In the Navigator, arrange the page hierarchy so "Home" is set as the root index page.

Day 3: Sections

Lecture: Sections (<section>) span the full width of the viewport and divide your page into thematic horizontal blocks (e.g., Hero, Features, Footer).

Instruction: Drag a Section element onto the canvas. Go to the Style panel's Background settings and assign a solid background color or upload an image to visually define this block as your hero area.

Day 4: Containers

Lecture: On ultra-wide monitors, text that spans the full screen becomes unreadable. Containers constrain your content to a maximum width (typically ~1200px) and keep it centered on the page.

Instruction: Drag a Container element inside your new Section. Note how it centers itself. Always place your content (text, buttons, images) inside this container rather than directly in the section.

Day 5: Text Elements

Lecture: Typography establishes information hierarchy. Headings (H1 to H6) define structure for SEO, while paragraphs (p) hold body copy.

Instruction: Insert an H1 Heading inside your container, followed by a Paragraph element. Select them, open the Style panel's Typography section, and adjust the font family, size, and line height. Highlight a word in the paragraph and click the link icon to create an inline text link.

Day 6: Buttons

Lecture: Buttons are the primary Call-to-Action (CTA) tools on a page. Effective buttons require sufficient padding, readable contrast, and interactive hover states.

Instruction: Drag a Button element onto the canvas. Add padding (e.g., 12px top/bottom, 24px left/right). To style the hover state, select the button, click the State dropdown in the Style Inspector, choose "Hover", and slightly darken the background color.

Day 7: Images

Lecture: Web images must balance visual quality and loading performance. Alt text is mandatory for accessibility (screen readers) and SEO.

Instruction: Upload an image to your Assets panel and drag it into your container. Click the gear icon on the image to add descriptive Alt text. In the Style panel, set Max-Width: 100% so it never overflows its parent container.

Day 8: Backgrounds

Lecture: Backgrounds can be layered. You can stack a solid color, a linear gradient, and an image on the exact same element to create dynamic visual depth.

Instruction: Select a Section element. In the Backgrounds panel, apply an image and set it to "Cover" and "Center". Add a linear gradient overlay above the image layer, dropping the gradient's opacity to 60% so text placed on top remains readable.

Day 9: Navigator

Lecture: The Navigator is a visual representation of your HTML Document Object Model (DOM) tree. If a layout breaks, it is almost always because an element is nested inside the wrong parent in the Navigator.

Instruction: Open the Navigator panel. Practice clicking and dragging elements to reorganize them. Ensure your structure is strictly parent-to-child: Body > Section > Container > Text/Image elements.

Day 10: Style Panel

Lecture: The CSS Box Model dictates layout spacing. Margin pushes elements away from others, while padding creates space inside an element. Borders and shadows add depth.

Instruction: Select an element. Use the spacing controls in the Style panel to add 20px of Margin to the bottom. Apply a 1px solid border and a subtle box shadow (0px 4px 10px rgba(0,0,0,0.1)).

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

Instruction: Synthesize Days 1-10. Build the Home page with a hero section, feature columns, and a footer. Duplicate this layout structure for the About and Contact pages. Link your navigation buttons to connect the three pages.

Days 16–20: Practice Styling

Instruction: Refine your site. Limit yourself to two font families and a cohesive color palette. Audit every section to ensure padding and margins are mathematically consistent (e.g., using multiples of 8px).

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

Day 21: CSS Classes

Lecture: Classes are reusable styling rules. Instead of styling 10 buttons manually, you style one class and apply it universally.

Instruction: Select an unstyled button. In the Selector field at the top of the Style panel, type btn-primary and hit enter. Style it. Add a new button, type btn-primary in its selector, and watch it instantly inherit those styles.

Day 22: Flexbox

Lecture: Flexbox (display: flex) is a layout module designed to automatically align and distribute space among items in a single row or column.

Instruction: Create a div block and place three images inside. Select the parent div, set its display to "Flex", direction to "Horizontal", and justify-content to "Space Between".

Day 23: Grid

Lecture: CSS Grid creates powerful two-dimensional layouts, allowing you to define precise rows and columns for complex designs.

Instruction: Apply display: grid to a container. Define 3 columns and 2 rows in the layout settings. Drag text and image elements directly into specific grid cells.

Day 24: Responsive Design

Lecture: Media queries adjust layouts based on screen size (breakpoints). Design changes should cascade from desktop down to mobile.

Instruction: Click the Tablet icon at the top of the canvas. Change your 3-column Grid to 2 columns. Click the Mobile icon and change it to 1 column.

Day 25: Symbols

Lecture: Symbols (or Components) are reusable master blocks. Updating the master symbol instantly updates every instance across your entire site.

Instruction: Select your Navbar, right-click, and choose "Create Symbol". Place this symbol on your About and Contact pages.

Day 26: Interactions Basics

Lecture: CSS transitions make state changes (like hovering) feel smooth and premium.

Instruction: Select your btn-primary. Go to the Hover state and change its color. Return to the "None" state, scroll to the "Transitions" panel, and add a transition for "Background Color" set to 300ms.

Day 27: Scroll Animations

Lecture: Scroll triggers activate animations when an element enters the user's viewport, making the page feel alive.

Instruction: Select an image. Open the Interactions/Animations panel, and add a "Scroll Into View" trigger. Set it to move the image upward by 50px and fade opacity from 0% to 100% over 500ms.

Day 28: Navigation Menus

Lecture: Responsive navbars require different UI patterns for desktop (horizontal links) and mobile (hamburger menus).

Instruction: Drag in a native Navbar component. Switch to the mobile viewport to test the built-in hamburger menu toggle. Style the dropdown menu that appears when the menu is opened.

Day 29: Forms

Lecture: Forms gather user input securely. Proper styling of input fields and clear submit buttons increase conversion rates.

Instruction: Drag a Form Block onto the Contact page. Style the text input fields, add clear placeholder text (e.g., "john@example.com"), and ensure the Submit button uses your btn-primary class.

Day 30: CMS Basics

Lecture: Content Management Systems (CMS) separate design from content, allowing you to create templates that auto-populate with database entries.

Instruction: Open the CMS panel. Create a new collection called "Blog Posts". Add fields for Title, Main Image, Rich Text (body), and Publish Date. Create 3 sample posts.

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

Instruction: Expand your static site by adding a Blog page. Add a "Collection List" element to the page and bind it to your "Blog Posts" CMS to auto-generate responsive preview cards for your articles.

Days 36–40: Add Interactions and Animations

Instruction: Enhance user engagement. Apply fade-in scroll animations to all hero sections. Add scaling hover effects to your CMS blog cards so they lift slightly when the user mouses over them.

Phase 3: Advanced Development (Days 41–65)

Day 41: Advanced CMS

Lecture: Dynamic filtering allows users to sort large databases of content without reloading the page.

Instruction: Add a "Category" field to your Blog CMS. On your Blog page, duplicate your Collection List and apply a Filter in the settings panel so it only displays posts where the Category equals a specific topic.

Day 42: Collections

Lecture: CMS collections can house any repeatable data type, including product inventories, team members, or real estate listings.

Instruction: Create a new collection called "Products". Add necessary fields: Price (number), SKU (plain text), and Gallery (multi-image). Populate it with test products.

Day 43: Dynamic Lists

Lecture: Binding connects static layout elements to dynamic CMS database fields.

Instruction: Add a Collection List to your store page. Drop an Image element inside and bind its source to the "Product Image" CMS field. Bind a Heading to the "Product Title" field.

Day 44: E-commerce Basics

Lecture: An e-commerce system requires a secure way to hold items in a session state (the cart) before purchase.

Instruction: Enable E-commerce features in your project settings. Add an "Add to Cart" button inside your Product Collection List. Configure the cart sidebar component to slide open when an item is added.

Day 45: Checkout Flow

Lecture: The checkout and order confirmation pages are critical for trust. They must look professional and function flawlessly.

Instruction: Open the default Checkout Page template. Style the form fields for shipping and billing to match your brand. Customize the Order Confirmation page to include a customized thank-you message.

Day 46: SEO Basics

Lecture: Search Engine Optimization (SEO) relies on proper HTML tagging and metadata to rank pages on Google.

Instruction: Go to the Page Settings for your Home page. Write a meta title (under 60 characters) and a meta description (under 160 characters). Ensure your page has exactly one H1 tag.

Day 47: Custom Code

Lecture: Page builders can't do everything natively. Injecting custom HTML, CSS, or JavaScript unlocks infinite functionality.

Instruction: Access Page Settings and find the <head> code injection field. Paste a simple CSS snippet (like customizing the scrollbar design) or embed an HTML widget from a third party.

Day 48: Integrations

Lecture: Third-party integrations connect your site to marketing, analytics, and automation platforms.

Instruction: Create a Google Analytics account, copy the Measurement ID, and paste it into your project's Integrations settings. Connect Zapier to your Contact Form so submissions are automatically sent to a Google Sheet.

Day 49: Site Search

Lecture: Native search functionality allows users to query your CMS database directly.

Instruction: Drag a Search component into your Navbar. Open the auto-generated "Search Results" page template and format the layout so queried CMS items display beautifully.

Day 50: Performance Optimization

Lecture: Heavy sites bounce users. Optimizing assets and code ensures lightning-fast load times.

Instruction: Compress all images using tools like TinyPNG (convert to .webp if possible). In your project settings, toggle on "Minify HTML, CSS, and JS" to strip unnecessary characters from the site's code.

Days 51–55: Build a Dynamic Blog Site

Instruction: Design the individual "Blog Post Template" page. Bind a Rich Text element to your CMS body content. Add a "Related Posts" dynamic list at the bottom, filtered to exclude the current post. Apply all SEO best practices.

Days 56–60: Add E-commerce Features

Instruction: Complete your storefront prototype. Ensure individual product pages have working variant selectors (like size/color), image galleries, and a fully styled cart.

Days 61–65: Optimize Site

Instruction: Run your site through Google Lighthouse (in Chrome DevTools). Fix missing alt texts, increase text contrast where prompted, and ensure there are no elements causing horizontal scroll overflow on mobile devices.

Phase 4: Professional Workflow (Days 66–90)

Day 66: Version Control

Lecture: Version control acts as a time machine, allowing you to safely experiment without fear of permanently breaking a layout.

Instruction: Before making major changes, hit Cmd/Ctrl + Shift + S to save a manual backup point. Navigate to the project history panel and practice restoring a previous version of your site.

Day 67: Collaboration

Lecture: Workspace roles protect your design integrity while allowing clients or writers to add content.

Instruction: Navigate to workspace settings. Invite a dummy email to the project and assign them a "Content Editor" role. Log in as that editor to see how they can edit text and CMS items without breaking the layout.

Day 68: Accessibility

Lecture: Web Content Accessibility Guidelines (WCAG) ensure your site is usable by individuals with visual or motor impairments.

Instruction: Run a contrast checker on your brand colors. Ensure every form input has a descriptive text label. Unplug your mouse and test navigating your entire published site using only the Tab and Enter keys.

Day 69: Testing

Lecture: Cross-device testing guarantees a uniform experience regardless of the user's hardware.

Instruction: Publish your site to the staging domain. Open the link on an actual iPhone, an Android, and a tablet. View it across Safari, Chrome, and Firefox to spot browser-specific rendering bugs.

Day 70: Hosting

Lecture: Connecting a custom domain transitions a site from a staging prototype to a live web property.

Instruction: Upgrade your hosting plan. Go to your domain registrar (e.g., Namecheap, Google Domains) and update your DNS records—specifically the A-Records and CNAME—to point to your site builder's servers.

Day 71: Security Basics

Lecture: Security protects user data and prevents spam.

Instruction: Verify in your hosting settings that the SSL certificate is generated and "Force HTTPS" is toggled on. Ensure reCAPTCHA is enabled on all forms to block bot submissions.

Day 72: Advanced Interactions

Lecture: Complex animations (like parallax) tie element movement to the user's scroll or mouse position rather than just a click.

Instruction: Select a background graphic. Open the Interactions panel and create a "Mouse Move in Viewport" trigger. Bind the element's X/Y position to the cursor so it shifts subtly as the user moves their mouse.

Day 73: Advanced E-commerce

Lecture: Store logic must account for real-world sales operations like shipping logistics and promotions.

Instruction: Go to your E-commerce dashboard. Create a 20% off discount code. Configure shipping rules (e.g., flat rate $5 for domestic, weight-based calculations for international shipping).

Day 74: API Integrations

Lecture: APIs allow disparate software to talk to each other seamlessly.

Instruction: Use Make.com or Zapier to set up a webhook that triggers when a new purchase is made. Route that data to automatically add the customer's email to a Mailchimp newsletter segment.

Day 75: Portfolio Site

Lecture: Your personal portfolio is your strongest sales tool. It must showcase your skills through flawless execution.

Instruction: Wireframe and build a personal homepage. Focus on a high-impact hero section, a dynamic CMS grid displaying your best projects, and a highly visible contact form.

Days 76–80: Full E-commerce Prototype

Instruction: Build a high-fidelity store from scratch. Focus heavily on User Experience (UX). Ensure the path from the homepage catalog, to the product page, and through the checkout flow is seamless and visually stunning.

Days 81–85: Usability Testing & Audit

Instruction: Conduct a live test. Have a friend or colleague navigate your site while you observe silently. Ask them to complete a task (like "buy this specific item"). Document where they hesitate or click the wrong element, and redesign those friction points.

Days 86–89: Final Polish

Instruction: Do a comprehensive sweep of your site. Click every link to ensure there are no 404 errors. Submit test data through every form. Guarantee a 90+ score on mobile and desktop via Google Lighthouse.

Day 90: Final Project — Portfolio Showcase

Instruction: Combine all 89 days of knowledge. Launch a multi-page responsive website on a custom domain that features a functional CMS blog, an active e-commerce store, advanced scroll triggers, and strict accessibility compliance. Add this masterpiece to your personal portfolio and share it with the world.