Lesson 8. Practical project: Creating a Landing Page from scratch
In this lesson, you will see a real result: a professional landing page created from scratch using AI. Hero section, features, pricing, FAQ, and footer — all responsive and modernly designed. This will be your first portfolio project.
Topic breakdown
A landing page is a single-page website that serves one goal: to prompt the user to action (click a button, fill out a form, make a purchase). It is a core marketing tool for business.
Traditionally, creating a landing page takes 3-7 days: design (Figma), frontend (HTML/CSS/JS), responsiveness (mobile view), deployment (hosting). With vibe coding, it can be done in 1-2 hours — the AI handles all technical work.
In this lesson, we will step-by-step: 1) Create the project structure, 2) Hero section, 3) Features block, 4) Pricing table, 5) FAQ accordion, 6) Footer, 7) Mobile responsiveness, 8) Deployment. We work with the AI at every stage.
Technology: HTML + CSS + JavaScript (no frameworks). This is the simplest and fastest option. You will learn React and Next.js in upcoming lessons. The goal right now is to see the result and grasp the process.
What you'll learn
- Create a professional landing page from scratch
- Properly describe design and layout requirements to AI
- Implement responsive design (mobile + desktop) using AI
- Master the iterative approach — step-by-step improvement
- Deploy the finished website to the internet
Deep dive
When creating a landing page, clear user direction is key. Every block leads the user down (scroll) and towards action (CTA — Call to Action). The AI knows this structure, but you need to explicitly dictate: which button is primary, which text should catch the eye first.
Responsive design ensures the page displays correctly on various screen sizes. Mobile-first approach: design for 320-375px screens first, then tablets (768px), and desktops (1024px+). The AI writes CSS media queries, but you must test the result in DevTools on different sizes.
Deployment options: 1) Netlify Drop — the easiest; drag your folder into the browser and the site is live in 30 seconds. 2) Vercel — connects to GitHub, automatically deploys on every push. 3) GitHub Pages — free, but only for static sites. For beginners, Netlify Drop is the best choice.
The iterative approach in practice: with the first prompt, you get 70-80% of the result. Then 3-5 additional prompts for refinements: 'change the gradient', 'add animation on FAQ open', 'add a hover effect to the button'. This is normal — professionals work this way too. Do not expect perfection on the first try.
Ready prompt template
Copy and adaptCreate a professional landing page. Topic: AI course platform. Page sections: 1) Hero: headline 'Build the future with AI', short description, 'Get Started' button, 2) Features: 4 cards (free, practice, in English, certificate), 3) Pricing: 3 plans (free, pro, premium), 4) FAQ: 5 Q&A accordion, 5) Footer: logo, social links, copyright. Design: dark theme, gradient accent, Inter font, mobile-first responsive.
Why it works
Topic: 'AI course platform' — AI adapts content to the topic
Structure: 5 blocks clearly listed — AI knows the sequence
Content: specifies what must be in each block
Design: 'dark theme, gradient, Inter font, mobile-first' — visual rules
Responsiveness: 'mobile-first' — mobile first, then desktop version
Practice
- Create a new folder: 'my-landing-page'
- In Cursor Agent mode (Cmd+I) enter the prompt above
- Watch Agent create the files and Accept them
- Open index.html in a browser — review the result
- If you want changes, ask in Chat (Cmd+L): 'Make the Hero button larger and change the gradient color'
- Check the mobile view via browser DevTools (F12) — toggle device mode
- Upload the folder to Netlify Drop (app.netlify.com/drop) for deployment
Common mistakes
- Expecting perfect results on the first try — vibe coding is iterative: generate -> review -> improve -> repeat
- Forgetting mobile responsiveness — 70%+ of traffic is mobile, always verify it
- Not specifying design requirements — don't just say 'make a site', state colors, fonts, and layout
- Not deploying — having the site just on your computer is not enough, put it on the internet
- Ignoring SEO — title, meta description, and alt tags are important
Lesson FAQ
How long does it take to create a landing page?
With vibe coding, 30-60 minutes. Traditionally, 3-7 days. The bulk of the time goes to choosing design and tweaking content — the AI handles the coding in 5 minutes.
Is a framework (React, Vue) mandatory?
For a simple landing page — no. HTML + CSS + JavaScript is sufficient and the fastest way. Frameworks are needed for large projects (10+ pages, dynamic content).
What is needed for SEO?
Tell the AI: 'Use title, meta description, heading hierarchy (h1->h2->h3), alt texts, and semantic HTML'. Cursor knows how to do this well.
Is hosting free?
Yes, Netlify and Vercel have free plans — 100GB traffic/month and unlimited static sites. It's completely enough for a standard landing page.