Your First Project
Step-by-step guide to creating your first divine website with QUORRA. From concept to code in minutes.
Ready to forge your first divine website? This guide will walk you through creating a complete, professional website in under 30 minutes. By the end, you'll have clean HTML/CSS ready to deploy anywhere.
What You'll Learn
- • How to choose the right industry template
- • Working with Sparky's intelligent suggestions
- • Customizing design elements and content
- • Exporting clean, production-ready code
Step 1: Create Your Project
1.1 Access the Sacred Forge
From your dashboard, click "Create New Project" or navigate to the visual editor. You'll be greeted by QUORRA's industry selection interface.
💡 Pro Tip
Even on the free Ember tier, you have access to all features. The only limitation is one active project, which is perfect for learning and testing.
1.2 Choose Your Industry
QUORRA's industry intelligence is one of its most powerful features. Select the category that best matches your business:
🏥 Healthcare
Trust-building design with compassionate authority, appointment booking focus
🍽️ Restaurant
Appetite-driven visuals, menu integration, reservation optimization
💻 Technology
Feature demonstration, trial conversions, innovation messaging
🛍️ E-commerce
Purchase optimization, product showcases, trust signals
Step 2: Meet Sparky, Your AI Guide
Sparky Awakens
Once you select your industry, Sparky—QUORRA's AI assistant—will introduce itself. Sparky understands design psychology, conversion optimization, and industry best practices.
Pay attention to Sparky's suggestions. The AI has analyzed thousands of successful websites and will guide you toward decisions that actually convert visitors into customers.
2.1 Sparky's First Suggestions
Sparky will immediately start offering contextual advice:
- Color Psychology: "For healthcare, I recommend calm blues to build trust..."
- Layout Optimization: "Place your appointment booking prominently in the header..."
- Content Strategy: "Include patient testimonials to build social proof..."
Step 3: Design Your Website
3.1 The Sacred Canvas
QUORRA's visual editor is your sacred canvas. It works like Figma or Canva, but generates clean code automatically. Here's how to navigate it:
Design Canvas
The main workspace where you'll see your website come to life. Click any element to select and modify it.
Property Panel
Appears on the right when you select elements. Customize colors, fonts, spacing, and content here.
Component Library
Drag pre-built components (headers, buttons, forms) onto your canvas. All optimized for your industry.
Sparky Panel
Your AI assistant provides real-time suggestions and answers questions about design decisions.
3.2 Start with the Header
Every great website starts with a compelling header. Here's what to include:
- 1Logo/Brand Name: Upload your logo or use text. Sparky will suggest optimal sizing.
- 2Navigation Menu: Add essential pages. Sparky recommends industry-specific menu items.
- 3Primary CTA: Your main conversion button. Sparky will suggest industry-appropriate text.
Step 4: Export Divine Code
4.1 Generate Clean Code
Once you're happy with your design, click the "Export" button in the toolbar. QUORRA will generate clean, semantic HTML and CSS that's ready for production.
What Makes QUORRA's Code Special?
- 87% smaller than frameworks
- Semantic HTML structure
- CSS variables for theming
- Mobile-first responsive
- WCAG 2.1 accessible
- Performance optimized
4.2 Deploy Anywhere
Your exported code works with any hosting provider. Popular options include:
Netlify
Drag & drop deployment
Vercel
Git-based deployments
GitHub Pages
Free static hosting
Congratulations, Divine Smith!
You've created your first website with QUORRA and experienced the goddess's power firsthand. Your clean, fast-loading code is ready to impress both users and developers.
What's Next?
- Learn advanced canvas techniques
- Explore Sparky's full capabilities
- Master responsive design
- Understand code generation details
Ready to Master the Sacred Canvas?
Continue your divine journey by learning the ins and outs of QUORRA's visual editor.
Need More Help?
Can't find what you're looking for? Our support team is here to help.