Day 2 of 8 · Lovable Foundation
Starting Your First Project
⏱ 6 min
📊 Beginner
Yesterday you learned what Lovable is and what it can build. Today, you're going to create your first project.
By the end of this lesson, you'll have a live website preview built entirely from a text description. Let's get started.
Creating your Lovable account
Head to lovable.dev and sign up. You can use your Google account or email. The free tier gives you enough credits to follow along with this entire course.
Once you're in, you'll see the Lovable dashboard — a clean interface with a single prompt box in the center. This is where the magic happens.
Knowledge Check
What do you see when you first open Lovable?
A
A project wizard that walks you through selecting a template, color scheme, and layout step by step
B
A gallery of starter projects organized by industry that you clone and customize
C
A split-screen view with a code editor on the left and a live preview on the right
D
A clean dashboard with a prompt box where you describe what you want to build
Lovable's interface is intentionally simple. You start by typing a description of what you want to build. No templates, no complex menus — just a conversation.
Writing your first prompt
The quality of your first prompt determines how close Lovable gets to what you want on the first try. Here's how to write a great one:
Be specific about the purpose. "A website" is vague. "A landing page for a freelance photographer" gives Lovable context.
Describe the sections you want. List the key parts: hero section, about section, portfolio grid, contact form, etc.
Mention the style. Dark theme? Minimalist? Colorful and playful? Give Lovable a design direction.
Include real content if you have it. Business name, tagline, services — the more you provide, the more personalized the result.
Create a landing page for a freelance photographer named Sarah Chen. Include a hero section with a bold tagline "Capturing Your Story", a portfolio grid showing 6 project thumbnails, an about section, pricing packages (Basic $500, Standard $1200, Premium $2500), and a contact form. Use a dark, elegant theme with gold accents.
I'm building your site now! Here's what's coming together:
📸 **Sarah Chen Photography**
- Dark elegant theme with gold (#D4AF37) accents
- Hero: Full-width background with "Capturing Your Story" headline
- Portfolio: 6-card responsive grid with hover effects
- About: Bio section with profile image placeholder
- Pricing: 3-tier card layout (Basic, Standard, Premium)
- Contact: Form with name, email, event type, and message
- Mobile responsive with smooth scroll navigation
Your preview is ready! Take a look and tell me what you'd like to adjust.
↻ Replay conversation
Knowledge Check
Which prompt would produce the best result in Lovable?
A
"Build a site for Sweet Rise bakery — make it look great and include everything a bakery needs"
B
"Create a landing page for a bakery called Sweet Rise with a hero image, menu section with 8 items, about us story, and order form. Use warm colors and a cozy feel."
C
"I need a landing page for a bakery. Use a popular bakery website as a reference and match that style."
D
"Create a professional bakery website with modern design and good UX"
The more specific your prompt, the better the result. Including the business name, sections, content details, and style direction gives Lovable everything it needs to build something close to your vision on the first try.
Understanding the Lovable workspace
After Lovable generates your site, you'll see the workspace with several key areas:
The preview panel — A live preview of your website on the right side. You can resize it to see how your site looks on desktop, tablet, and mobile.
The chat panel — On the left side, this is where you continue the conversation. Ask for changes, additions, or refinements here.
The code view — Toggle this to see the actual code Lovable wrote. You don't need to understand it, but it's there if you're curious or want to make manual edits.
The file tree — Shows all the files in your project. Again, optional to explore, but useful for understanding the structure.
Knowledge Check
Which part of the Lovable workspace do you use to request changes to your site?
A
The chat panel, where you describe changes in plain language and Lovable applies them
B
The preview panel, where you click on elements to open an inline editing toolbar
C
The file tree, where you select a file and modify its properties in a sidebar
D
The code view, where you edit the source files directly to update components
The chat panel is where you communicate with Lovable. Just describe what you want to change, and Lovable updates your site in real time.
Your first project — try it now
Here's a prompt you can copy and use right now to create your first Lovable project:
"Create a personal portfolio website for a UX designer. Include a hero section with a greeting and short bio, a projects section with 4 cards showing project name, description, and a thumbnail, a skills section with icons for Figma, Sketch, Adobe XD, and Framer, and a contact section with email and social links. Use a clean, minimal design with a white background and blue accent color."
Paste that into Lovable, hit enter, and watch your site come to life. Then try modifying it:
- Change the accent color to purple
- Add a testimonials section
- Update the bio with your own information
Each change is just another message in the chat.
Final Check
What should you do after Lovable generates your first site?
A
Rewrite the initial prompt with more detail and regenerate from scratch to get a better result
B
Review the preview and use the chat to request any changes or additions
C
Open the code view and manually fine-tune the generated HTML and CSS before making other changes
D
Share the preview link with friends for feedback before making any changes yourself
The iterative process is key to Lovable. Generate your first version, review it in the preview, then refine through chat. Each conversation message gets you closer to exactly what you want.
🎨
Day 2 Complete
"A great first prompt is specific: name the purpose, list the sections, describe the style. Lovable handles the rest — and you refine from there."
Tomorrow — Day 3
Editing with Chat
Learn how to refine and iterate on your Lovable project using the chat interface to make precise changes.