globe-pointerBuild Your First Website

Ready to go from zero to published in under 15 minutes? This guide walks you through creating, customizing, and launching your first JET website step-by-step.

Before You Begin

You'll Need:

  • A JET account (connect your Solana wallet)

  • A rough idea of what you want to build

  • Optional: Your logo, brand colors, and any images

You Don't Need:

  • Coding experience

  • Design skills

  • Hosting setup

  • Database knowledge

Step 1: Create Your Project

Click "Create New Project" in your JET dashboard.

Fill in:

  • Project Name: What you'll call this site internally (e.g., "My Portfolio")

  • Short Description: One sentence about the site's purpose

  • Domain Option: Choose "Demo Preview" for testing or "Custom Domain" if you're ready to publish

Hit "Start Building" to enter the JET interface.

Step 2: Choose Your Starting Point

JET offers two paths:

Start from Scratch Best if you have a clear vision and want full control from the beginning.

Pick a Template Browse pre-built starting points:

  • Landing Page (SaaS, Product, Service)

  • Portfolio (Creative, Developer, Agency)

  • Blog (Personal, Company, Magazine)

  • E-commerce (Product Store, Digital Downloads)

  • Dashboard (Admin Panel, Analytics)

Templates give you a professional foundation that you can customize completely.

Step 3: Provide Your Seed Prompt

This is where the magic happens. Describe your website in natural language.

Landing Page Example:

"Create a landing page for NexGen Solar, a residential solar panel installer. Include a hero section with a cost calculator, a benefits section explaining savings and environmental impact, customer testimonials, and a contact form. Use green and blue colors to feel eco-friendly and trustworthy."

E-commerce Example:

"Build a product page for handmade ceramic mugs. Show product images in a gallery, price and add-to-cart button, description of the craftsmanship, customer reviews, and related products. Style it minimalist and elegant."

Blog Example:

"Create a tech blog homepage with a featured article at the top, a grid of recent posts with thumbnails and excerpts, sidebar with categories and popular posts, and newsletter signup in the footer."

Hit "Generate" and JET will build your complete website in 30-60 seconds.

Step 4: Review Your Initial Preview

Your website appears in the right-hand preview pane. You can:

  • Scroll through the page — See every section JET created

  • Click interactive elements — Test buttons, forms, and links

  • Toggle device views — Switch between desktop, tablet, and mobile

  • Inspect elements — Click any component to see details

This is a fully functional preview—forms work, buttons respond, everything is live.

Step 5: Refine Through Chat

Now the real vibe coding begins. Use the left-hand chat to make changes:

Change Copy:

"Change the headline to 'Solar Power Made Simple'"

Adjust Styling:

"Make the hero background image darker so the text stands out more"

Add Functionality:

"Add a FAQ section below the testimonials with 5 common questions about solar installation"

Modify Layout:

"Move the contact form to the sidebar and make it sticky when scrolling"

Each prompt updates your site instantly. You'll see changes in real-time in the preview pane.

Step 6: Test Everything

Before publishing, thoroughly test your site:

Forms: Fill out your contact/signup forms and verify submissions save to your database (check the "Database" tab in JET).

Responsiveness: Toggle mobile view and check that everything looks good on smaller screens.

Links: Click all navigation and CTA buttons to ensure they go to the right places.

Content: Read through all copy for typos and clarity.

Images: Replace any placeholder images with your actual assets by saying: "Replace the hero image with [upload image]"

Step 7: Publish Your Site

When you're happy with everything:

  1. Click the "Publish" button in the top toolbar

  2. Choose your publishing option:

    • Staging Link: Get a temporary JET URL for sharing and QA

    • Custom Domain: Connect your own domain name

  3. Review the deployment checklist

  4. Hit "Deploy Now"

Your site goes live in seconds. JET handles hosting, SSL certificates, and CDN configuration automatically.

Your Published Site Includes:

  • Frontend website (all pages and components)

  • Backend APIs (for forms, databases, etc.)

  • Database (with your schema and test data)

  • SSL certificate (secure HTTPS)

  • Global CDN (fast loading worldwide)

Common Prompts for First-Time Builders

Starting Out:

  • "Create a simple one-page portfolio site"

  • "Build me a landing page for a mobile app"

  • "Make a blog with a homepage and article template"

Adding Sections:

  • "Add a pricing table with three tiers"

  • "Insert a team section with photos and bios"

  • "Create a gallery showcasing my work"

Styling Changes:

  • "Make the fonts more modern"

  • "Use my brand colors: #FF6B6B for primary, #4ECDC4 for accent"

  • "Add subtle animations when scrolling"

Functionality:

  • "Connect this form to send me emails"

  • "Add a payment checkout for $49"

  • "Create a login system for members"

Troubleshooting Quick Fixes

"The image isn't showing" → Upload your image through the chat: "Use this image for the hero [upload]"

"The form isn't submitting" → Check Database tab to ensure the schema was created. Say: "Reconnect the contact form to the database"

"Colors don't match my brand" → Be specific: "Change all blue elements to #3498db and all buttons to #e74c3c"

"Mobile layout looks off""Fix the mobile layout for the pricing section so cards stack vertically"

Your First Website Checklist

Before calling it done:

✓ All placeholder text replaced with real content ✓ Placeholder images swapped for actual photos ✓ Forms tested and connected to database ✓ Mobile view checked on all sections ✓ Navigation links working correctly ✓ Contact information accurate ✓ SEO title and description added ✓ Favicon uploaded

Congratulations! You've just built and published a professional website without writing a single line of code.

Last updated