Beginner8 min readShare
Was this chapter helpful?
Share
Try these free tools
Build and publish your first website in 6 steps. No coding experience needed — just pick an AI tool, describe what you want, and deploy it.
Before you open any tool, decide what your first website will be. Keep it simple — you can always add more later.
A personal portfolio (your name, bio, and links)
A landing page for a project or idea
A simple blog or journal
A link-in-bio page (like Linktree)
Tip: Start with a portfolio. It is the most useful project you can build — you will use it to showcase everything else you create.
14 project ideas sorted by difficulty — each with an AI starter prompt you can copy and paste.
Perfect for your first builds. Focus on layout, styling, and basic interactivity. Need help writing better prompts? See our prompting guide.
A single-page site showcasing who you are — hero section, about blurb, project cards, and a contact form.
AI Starter Prompt
"Build me a personal portfolio website with a hero section (name, title, short bio), an About section, a Projects grid with 3 placeholder cards (image, title, description, link), and a Contact section with a simple form. Use Tailwind CSS, make it responsive, and use a clean modern design with a purple accent color."
A Linktree-style page with your photo, name, and a stack of links. Great for learning layout and hover effects.
AI Starter Prompt
"Create a Link in Bio page like Linktree. Centered layout with a profile image (circle), name, short bio, and 6 styled link buttons stacked vertically. Each button should have a hover effect. Use a gradient background and make sure it looks great on mobile. Use Tailwind CSS."
Recipe cards with images, ingredients, and step-by-step instructions. Learn card layouts and structured data.
AI Starter Prompt
"Build a recipe collection page with a grid of 6 recipe cards. Each card has an image, recipe name, cooking time, difficulty badge, and a short description. When clicked, show the full recipe with ingredients list and numbered steps. Use Tailwind CSS with a warm color palette."
A multiple choice quiz with score tracking and a results screen. Teaches state management and conditional rendering.
AI Starter Prompt
"Create a quiz app with 5 multiple choice questions. Show one question at a time with 4 answer options. Highlight correct/incorrect answers, track the score, show a progress bar, and display a results screen at the end. Use Tailwind CSS and React state."
Pick a target date and watch a live countdown. Great for learning intervals and date handling.
AI Starter Prompt
"Build a countdown timer app where users can enter a future date and event name. Display a live countdown showing days, hours, minutes, and seconds in large styled number boxes. Include a celebration animation when the countdown reaches zero. Use Tailwind CSS."
These add APIs, data persistence, and complex state management.
A blog with dynamic routes and markdown-rendered posts. Learn routing, markdown parsing, and content management.
AI Starter Prompt
"Build a blog using Next.js with markdown files for posts. Create a blog listing page showing cards with title, date, excerpt, and reading time. Each post should have its own page with rendered markdown. Add a table of contents sidebar. Use Tailwind CSS."
Search for a city and display current weather and a 5-day forecast. Learn API integration and loading states.
AI Starter Prompt
"Create a weather dashboard that lets users search for a city and displays current temperature, weather condition, humidity, wind speed, and a 5-day forecast. Use the OpenWeatherMap API. Show a loading spinner while fetching and handle errors gracefully. Use Tailwind CSS."
A product grid with filters, sorting, and an add-to-cart flow. Teaches complex state and filtering logic.
AI Starter Prompt
"Build an e-commerce product listing page with a grid of 12 products. Include filters (category, price range), sort options (price low-high, newest), a search bar, and an add-to-cart button on each card. Show a cart sidebar with items, quantities, and total. Use Tailwind CSS."
A full task manager with categories, priorities, and persistence. Learn CRUD operations and local storage.
AI Starter Prompt
"Build a task manager app with the ability to add, edit, delete, and mark tasks as complete. Include task categories (Work, Personal, Learning), priority levels (Low, Medium, High) with color coding, and a due date. Save tasks to localStorage so they persist on refresh. Use Tailwind CSS."
Save, tag, search, and organize your favorite links. Learn tagging, search/filter patterns, and data persistence.
AI Starter Prompt
"Create a bookmark manager where users can save links with a title, URL, description, and tags. Include a search bar that filters by title or tag, a tag cloud for quick filtering, and the ability to edit or delete bookmarks. Store data in localStorage. Use Tailwind CSS."
Full-stack challenges combining design, frontend, backend, and integrations.
A complete marketing site with hero, features, pricing, testimonials, FAQ, and footer. The ultimate layout challenge.
AI Starter Prompt
"Build a complete SaaS landing page with: (1) Hero with headline, subtext, and CTA button, (2) Logos bar, (3) 3-column features grid, (4) Pricing table with 3 tiers and monthly/annual toggle, (5) Testimonials carousel, (6) FAQ accordion, (7) CTA banner, (8) Footer. Use Tailwind CSS and make it fully responsive."
A social feed with profiles, posts, likes, and comments. Teaches authentication, relational data, and real-time updates.
AI Starter Prompt
"Build a social media dashboard with user authentication (sign up, log in), a feed of posts with text and images, the ability to like and comment, user profile pages, and notifications. Use Next.js, Tailwind CSS, and Supabase for the backend."
A ChatGPT-style interface with conversation history and streaming responses. Learn API streaming and complex state.
AI Starter Prompt
"Build an AI chat app with a sidebar showing conversation history, a main chat area with message bubbles, and a text input. Integrate the OpenAI API with streaming responses. Include a new chat button, delete conversations, and a typing indicator. Use Tailwind CSS with dark/light mode."
A full shopping experience: catalog, cart, checkout, and Stripe payments. The ultimate full-stack project.
AI Starter Prompt
"Build a multi-page e-commerce site with: (1) Home page with featured products, (2) Product catalog with filters, (3) Product pages with image gallery and size/color selectors, (4) Shopping cart with quantity updates, (5) Checkout with shipping form and Stripe payment. Use Next.js and Tailwind CSS."
You have a live website. Now make it amazing.
