From planning to implementation - creating a fully functional website with AI assistance
Start by clearly understanding what you want to achieve:
Think from your visitors' perspective with these questions:
Real example: A photography portfolio website might have these goals:
Organize your project for easy management:
my-website/
├── index.html # Homepage
├── about.html # About page
├── contact.html # Contact page
├── assets/
│ ├── css/ # Stylesheets
│ │ └── style.css
│ │
│ ├── js/ # JavaScript files
│ │ └── main.js
│ │
│ ├── images/ # Image files
│ └── fonts/ # Custom fonts
└── components/ # Reusable HTML parts
├── header.html
└── footer.htmlAI structure prompt: "Create a simple file structure for a 5-page personal portfolio website. Include places for HTML, CSS, JavaScript, images, and project files."
Track changes and protect your work:
# First-time setup (in your project folder)
git init
git add .
git commit -m "Initial project setup"
# Connect to GitHub (after creating a repository there)
git remote add origin https://github.com/username/project-name.git
git push -u origin mainMap out your website's structure and connections:
AI sitemap prompt: "Create a sitemap for a beginner yoga teacher's website. Include all essential pages and any specialized pages that would help attract new students."
Even small projects need consistent design:
Headings: Inter Bold
Body text: Inter Regular - Easy to read and works well on all devices. Keep it simple!
Simple card example with consistent padding and styling.
AI design system prompt: "Create a simple design system for my personal website. I'm a photographer who loves minimalist design. Include colors, typography, and basic component styles."
Sketch your layout before writing code:
A simple homepage wireframe showing basic layout
Think of your website as a set of building blocks that fit together:
A good navigation system guides visitors through your site:
<!-- Navigation Component -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Your Brand</a>
<!-- Mobile Toggle Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation Links -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Ask AI: "Create a responsive Bootstrap 5 navigation bar with logo, main links (Home, About, Services, Contact), where Services has a dropdown, and it collapses to a hamburger menu on mobile."
Your hero section is your website's first impression:
<!-- Hero Section with Bootstrap -->
<section class="hero bg-primary text-white py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-4 fw-bold">Your Powerful Headline</h1>
<p class="lead">A supporting message that explains your value
proposition in simple terms.</p>
<div class="d-flex gap-3 mt-4">
<a href="#" class="btn btn-light btn-lg">Primary Action</a>
<a href="#" class="btn btn-outline-light btn-lg">Learn More</a>
</div>
</div>
<div class="col-lg-6 d-none d-lg-block">
<img src="hero-image.jpg" alt="Hero visual" class="img-fluid rounded shadow">
</div>
</div>
</div>
</section>Feature cards help organize and highlight your content:
Brief description of this amazing feature.
Brief description of this amazing feature.
Brief description of this amazing feature.
<!-- Feature Card Component -->
<div class="card h-100 shadow-sm hover-lift">
<!-- Card Image -->
<img src="feature-image.jpg" class="card-img-top" alt="Feature">
<!-- Card Body -->
<div class="card-body">
<!-- Icon (optional) -->
<div class="icon-box bg-primary text-white rounded-circle mb-3">
<i class="fas fa-star"></i>
</div>
<!-- Title and Description -->
<h5 class="card-title">Feature Title</h5>
<p class="card-text">A brief description of this feature and how
it benefits the user.</p>
<!-- Card Link/Button -->
<a href="#" class="btn btn-outline-primary mt-2">Learn More</a>
</div>
</div>Ask AI: "Create a feature cards section with 3 cards showcasing benefits of my design services. Each card should have an icon, heading, brief description, and subtle hover effect."
Forms allow visitors to interact with your website:
<!-- Contact Form with Validation -->
<form class="needs-validation" novalidate>
<!-- Name Field -->
<div class="mb-3">
<label for="name" class="form-label">Your Name</label>
<input type="text"
class="form-control"
id="name"
placeholder="John Doe"
required>
<div class="invalid-feedback">
Please enter your name
</div>
</div>
<!-- Email Field -->
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email"
class="form-control"
id="email"
placeholder="name@example.com"
required>
<div class="invalid-feedback">
Please enter a valid email address
</div>
</div>
<!-- Message Field -->
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control"
id="message"
rows="4"
placeholder="Your message here..."
required></textarea>
<div class="invalid-feedback">
Please enter your message
</div>
</div>
<!-- Terms Checkbox -->
<div class="mb-3 form-check">
<input type="checkbox"
class="form-check-input"
id="terms"
required>
<label class="form-check-label" for="terms">
I agree to the <a href="#">terms and conditions</a>
</label>
<div class="invalid-feedback">
You must agree to the terms before submitting
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-primary">
<i class="fas fa-paper-plane me-2"></i>Send Message
</button>
</form>Design for small screens, then expand:
AI mobile-first prompt: "Create a mobile-first navigation component that collapses into a hamburger menu on small screens and shows horizontal links on larger screens."
Creating layouts that adapt to screen size:
<!-- Responsive Grid Example -->
<div class="container">
<div class="row">
<!-- Full width on mobile, half width on tablets,
third width on desktop -->
<div class="col-12 col-md-6 col-lg-4 mb-4">
<div class="card">
<img src="image1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Feature One</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<!-- Same pattern for other cards -->
<div class="col-12 col-md-6 col-lg-4 mb-4">
<!-- Card content -->
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4">
<!-- Card content -->
</div>
</div>
</div>This Bootstrap grid example shows:
Making visual content adapt to any screen:
<!-- Basic Responsive Image -->
<img src="image.jpg" class="img-fluid" alt="Description">
<!-- Advanced Responsive Image with srcset -->
<img srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
sizes="(max-width: 600px) 500px,
(max-width: 1200px) 1000px,
1500px"
src="fallback.jpg"
alt="Description">AI responsive media prompt: "Create HTML for a responsive image gallery with 6 images that displays in 1 column on mobile, 2 columns on tablets, and 3 columns on desktop."
Making text readable on every device:
clamp(min, preferred, max)
/* Responsive Typography with CSS */
html {
font-size: 16px;
}
h1 {
/* Fluid typography that scales with viewport */
font-size: clamp(2rem, 5vw, 3.5rem);
}
p {
font-size: 1rem; /* Base size */
line-height: 1.5; /* Good for readability */
max-width: 70ch; /* Optimal line length */
}
@media (min-width: 768px) {
html {
font-size: 18px; /* Larger base size on bigger screens */
}
}AI typography prompt: "Create CSS for responsive typography with a scale that works well from mobile to desktop, including headings and body text with optimal readability."
Designing for fingers, not just mouse pointers:
/* Touch-friendly button example */
.touch-button {
min-width: 44px; /* Minimum width for touchable element */
min-height: 44px; /* Minimum height for touchable element */
padding: 12px 16px;
margin: 8px; /* Space between buttons */
}
/* Visual feedback on touch */
.touch-button:active {
transform: scale(0.98); /* Slight size reduction */
background-color: #e9ecef; /* Background change */
}Ensuring your responsive design works everywhere:
Free built-in options:
Always test on actual devices:
Expanded device coverage:
Making your website fast and responsive:
<!-- Lazy loading images -->
<img src="image.jpg" alt="Description" loading="lazy">
<!-- Async script loading -->
<script src="script.js" async></script>Essential checks before going live:
AI checklist prompt: "Create a comprehensive pre-launch checklist for a small business website, including functionality, content, SEO, and technical aspects."
Making your site usable by everyone:
<img src="logo.png">
<div onclick="...">Click</div>
<img src="logo.png" alt="Company Logo">
<button type="button">Click</button>
Adding polish with subtle animations:
/* Simple hover animation */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* Pulse animation */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse-element {
animation: pulse 1.5s infinite;
}
/* Fade-in animation */
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-in.visible {
opacity: 1;
}
/* Respecting user preferences */
@media (prefers-reduced-motion: reduce) {
/* Disable animations for users who prefer reduced motion */
.card, .pulse-element, .fade-in {
transition: none !important;
animation: none !important;
}
}AI animation prompt: "Create subtle CSS animations for a card component that activates on hover and another animation for elements that fade in when scrolled into view."
prefers-reduced-motion media query. About 3% of users have vestibular disorders that can make animations disorienting or nauseating.
Setting clear goals, creating sitemaps, defining style guides, and wireframing layouts.
Creating modular components, navigation systems, hero sections, and interactive forms.
Using mobile-first strategies, flexible grids, responsive images, and adaptive typography.
Optimizing performance, conducting pre-launch checks, ensuring accessibility, and adding subtle animations.
Now that you've learned how to build a complete website, it's time to prepare for deployment: