Introduction: Your Website Without the Headache
Ever wanted to create a professional landing page for your business but got stuck thinking you need coding skills or an expensive web designer? I've been there. That's why I created this step-by-step guide to show you exactly how I built my own landing pages using AI tools and free services—with zero coding knowledge required. You don't need to spend thousands on web devs, not anymore. We're going to make it all work today.
By the end of this guide, you'll have:
- A fully functional, beautiful landing page
- Complete ownership of your site
- A professional domain name
- The ability to update it whenever you want
- All for less than $15 total (just the domain cost!)
Let's turn the "impossible" into "done by dinner."
What You'll Need
- A computer with internet connection
- Basic computer navigation skills (if you can use Microsoft Word, you're overqualified)
- About 2-3 hours of your time
- $10-15 for a domain name (completely optional, but recommended)
That's it! Everything else we'll use is either free or has a generous free tier.
Pro Tip
Claude's subscription is pretty expensive, though it's worth it. However, if you download Cursor(more on that later) and sign-up for a free pro trial ( 1 month) you get access to Claude for free for 30 days(more than enough for our purposes)- unlimited prompts. Voila!
Step 1: Getting Clear On Your Landing Page Goals (15 minutes)
Before we touch any technology, grab a piece of paper or open a note-taking app and answer these questions:
- What is the ONE action you want visitors to take? (Sign up for a newsletter? Book a call? Make a purchase?). It's very important because that's what our prompt to AI will be based on. Think carefully about that.
- What are the top 3 benefits your business provides?
- Who is your ideal customer and what problem are you solving for them?
- Do you have any testimonials, case studies, or social proof?
- What information do you need to include? (Contact details, pricing, FAQ, etc.)
This clarity will save you hours of rework later. If you already have brand colors and a logo, have those ready too.
Pro Tip
If you haven't yet established brand colors or designs, I recommend creating them in Canva. While it can be challenging to get AI to perfectly match your desired visual style, providing it with references makes it significantly easier.
Step 2: Set Up Your GitHub Account (10 minutes)
GitHub will store your website files and connect with our deployment platform.
- Go to GitHub and click "Sign up"
- Complete the registration process with your email
- Verify your email address when prompted
- Select the free plan when asked
Pro Tip
Your GitHub username will be visible in your project URLs, so choose something professional if possible.
Step 3: Harness AI to Design Your Landing Page (30-45 minutes)
This is where the magic happens! We'll use AI to create the code for our landing page:
- Sign up for a free account at Claude (Anthropic)
- Start a new chat and use this prompt (customize the text in brackets):
I need HTML and CSS code for a professional landing page for my [type of business] that helps [target audience] with [main benefit].
The page should include:
- A clear headline: [your headline or ask AI to suggest one]
- A subheadline explaining our value proposition: [your subheadline]
- A section about our main benefits/features
- A "How it Works" or process section
- A testimonials section
- A clear call-to-action: [your desired action]
- Contact information
- A clean, modern design using these brand colors: [your colors or ask for suggestions]
Make it responsive for mobile devices.
Use modern CSS with clean animations.
Include sample text I can easily replace.
- When the AI generates the code, ask it to refine anything you don't like ("Can you make the header more minimalist?" or "Please add a pricing table section")
- Continue refining until you're happy with the design
Pro Tip
If you want to see what the code looks like, paste it into CodePen to preview it live. But don't worry if it's not idea yet. We're going to fix everything later in Cursor.
Step 4: Install VS Code and Cursor (15 minutes)
VS Code is a free text editor that makes working with code easy, and Cursor is an AI-powered coding assistant that will help us make changes.
- Download and install Cursor
- Open Cursor (it's built on VS Code, so the interface will be similar)
- Create a new folder on your computer called "my-landing-page"
Step 5: Set Up Your Astro Project (20 minutes)
Astro makes it super easy to build and optimize static websites:
- Open Terminal (Mac) or Command Prompt (Windows)
- Navigate to where you want to create your project
- Run these commands:
npm create astro@latest my-landing-page
- When prompted:
- Select "Empty" as your template
- Would you like to install dependencies? → Yes
- Would you like to initialize a new git repository? → Yes
- Enter through any remaining prompts with default options
- Once installed, navigate into your project folder:
cd my-landing-page
- Open the project in Cursor:
- In Cursor, go to File → Open Folder
- Navigate to your "my-landing-page" folder and select it
Step 6: Create Your Landing Page with Astro (30 minutes)
Now we'll add our AI-generated code into the Astro framework:
- In Cursor, navigate to src/pages/index.astro
- Delete all the existing code
- Paste in the following template:
---
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Business Name</title>
<style>
</style>
</head>
<body>
</body>
</html>
- Replace the comments with your AI-generated HTML and CSS
- Use Cursor's AI assistant to help you make any changes:
- Press Cmd + K (Mac) or Ctrl + K (Windows)
- Type a request like "Add a contact form section below the testimonials"
- Preview your site by running:
npm run dev
- Visit http://localhost:3000 in your browser to see your site live!
Step 7: Version Control with Git and GitHub (15 minutes)
Now we'll save our work to GitHub:
- In Cursor's terminal, run:
git add .
git commit -m "Initial landing page setup"
- Create a new repository on GitHub:
- Go to github.com and log in
- Click the "+" icon in the top right, then "New repository"
- Name it "my-landing-page"
- Keep it public
- Click "Create repository"
- Follow the instructions for "push an existing repository" shown on GitHub (It will look something like this):
git remote add origin https://github.com/yourusername/my-landing-page.git
git branch -M main
git push -u origin main
Step 8: Deploy Your Site with Vercel (10 minutes)
Vercel will host your landing page for free:
- Go to Vercel and sign up using your GitHub account
- Once logged in, click "Add New" → "Project"
- Select your "my-landing-page" repository
- For framework preset, select "Astro"
- Leave all other settings as default
- Click "Deploy"
Vercel will automatically build and deploy your site. When complete, you'll get a URL like my-landing-page.vercel.app.
Step 9: Connect Your Custom Domain (15 minutes)
A professional domain name adds credibility to your landing page:
- Go to Namecheap and search for your desired domain name
- Purchase the domain (typically $10-15/year)
- In your Vercel dashboard, select your project
- Go to "Settings" → "Domains"
- Add your new domain and click "Add"
- Follow Vercel's instructions to update your Namecheap DNS settings:
- In Namecheap, go to "Domain List" → "Manage" next to your domain
- Select "Advanced DNS"
- Add the records Vercel provides (typically CNAME and A records)
Pro Tip
DNS changes can take up to 48 hours to propagate, but often happen within an hour. If you have problems with dns set-up just send screens to Claude and ask for help. Usually it does a good job at that.
Step 10: Making Updates and Maintenance (Ongoing)
Whenever you want to update your landing page:
- Open your project in Cursor
- Make your changes to the files
- Use Cursor's AI to help with more complex changes
- Preview locally with npm run dev
- When satisfied, commit and push your changes:
git add .
git commit -m "Description of your changes"
git push
Vercel will automatically deploy your updates as soon as they're pushed to GitHub.
Bonus Tips: Taking It Further
- Analytics: Add Google Analytics or Simple Analytics to track visitors (Actually very easy to do. Just register and follow the steps. You will get an ID, which you can prompt AI to help set up and- Voils! You have advanced stat for free)
- Forms: Use services like Formspree for contact forms without backend code (One of the things that is worth paying for. You will easily see that when you spend time trying to set-up forms for yourself. So, learn from my mistakes using Formspree or similar software from the start.)
- Performance: Use PageSpeed Insights to check and improve your page speed
- SEO: Generating meta tags for better search visibility and improving your SEO can be challenging and time-consuming. However, mastering Google Console and understanding SEO fundamentals is a valuable skill that you can leverage throughout your career. AI tools can also assist you in optimizing your content for search engines.
- Testing: Preview your site on different devices using Chrome DevTools(page right click+ inspect)
Common Issues and Solutions
Problem: Changes not appearing on live site
Solution: Ensure you committed and pushed your changes to GitHub
Problem: Site looks different on mobile
Solution: Ask the AI to improve responsive design for specific elements
Problem: Domain not connecting
Solution: Double-check DNS settings and give it 24 hours
Problem: Need to add complex features
Solution: Use Astro integrations or embed third-party widgets (like Calendly, TypeForm, etc.)
Problem: My site isn't deploying
Solution: If you asked AI to incorporate server-side features (like databases) into your Astro site, this will prevent deployment, as Astro doesn't support these elements. If you want to add dynamic functionality, you can ask AI for alternative solutions. While this can be complex, depending on your requirements, database integration can be relatively straightforward.
Problem: JavaScript errors in console
Solution: AI-generated code might sometimes contain bugs. Copy the error message, paste it into Cursor AI (Cmd+K or Ctrl+K), and ask for help fixing it. You'd be surprised how easy most JS errors are to fix with AI assistance.
Problem: Images not displaying or loading slowly
Solution: Make sure to compress your images before adding them to your site (use free tools like TinyPNG). Check that your image paths are correct relative to your project structure. If needed, ask Cursor AI to optimize your image loading code.
Problem: Custom fonts not working
Solution: For beginners, Google Fonts is the easiest solution. Ask Cursor AI to help you implement the font you want, and it will provide the exact code needed for both the HTML and CSS portions. No more font headaches!
Problem: Form submissions going nowhere
Solution: Free form handlers like Formspree have usage limits. If forms stop working, check if you've hit those limits or if there are errors in your form HTML. Cursor can help debug both issues, just ask it to "check my form code for errors."
Problem: Site looks broken after adding a new section
Solution: AI-generated code sometimes has CSS conflicts when elements are combined. Ask Cursor AI to "fix CSS conflicts between the pricing table and the testimonials section" (or whatever sections are causing problems).
Problem: Can't figure out how to add a specific feature
Solution: Instead of googling for hours, ask Cursor AI directly: "How do I add a popup newsletter subscription form that appears after 5 seconds?" The AI will generate custom code for your specific need that fits with your existing design.
Problem: Astro build failing with cryptic errors
Solution: Copy the full error message from your terminal and ask Cursor AI to explain and fix it. Most Astro build errors are related to syntax issues in your templates that AI can quickly spot and correct. Problem: Having trouble with responsive images Solution: Ask Cursor AI to implement modern responsive image techniques using the picture element or srcset attributes. This allows your site to serve appropriately sized images for different devices.
Conclusion
Congratulations! You've just built a professional landing page using AI and deployed it to the web—all without writing a single line of code yourself and for less than the cost of lunch.
What used to take weeks and thousands of dollars now takes hours and pocket change. The best part? You have complete control to update and adapt your landing page as your business evolves.
Remember, this is just the beginning. As you get comfortable with this workflow, you can explore more advanced features and even build multi-page sites using the same techniques.
Happy launching!
Want More Help?
If you found this guide valuable, please consider:
- Share this free BSC guide with your friends and colleagues by sending them the BSC link. All they need to do is enter their email address.
- Following us on Instagram
- Participate in our free, exclusive workshops, uniquely designed by our team and top entrepreneurs. One strategy learned could revolutionize your business.
Or if you'd prefer professionals to take care of your website- we've got you covered. We collaborate with several Web-development firms and can help you make any website you wish, no matter how complex - reach directly to us relations@bsc-at.com