Create a complete multi-page website with navigation, styling, and responsive design - all by describing what you want.
Before you start building, think about what pages you need and how they connect. A typical website includes:
Start simple. You can always add more pages later. It's better to launch with 3 great pages than 10 mediocre ones.
Let's start by creating the basic structure for your website. Claude will set up the folder structure, HTML files, and basic styling.
<!-- Basic HTML structure -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sarah Chen Photography</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Navigation goes here -->
</header>
<main>
<!-- Page content goes here -->
</main>
<footer>
<!-- Footer goes here -->
</footer>
</body>
</html>A good navigation menu helps visitors find their way around your site. Let's create a navigation bar that appears on every page.
<nav class="navbar">
<a href="/" class="logo">Sarah Chen</a>
<button class="mobile-menu-btn" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-links">
<li><a href="/" class="active">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>CSS brings your website to life. Let's add colors, fonts, and visual effects.
/* Base styles */
:root {
--bg-dark: #0a0a0a;
--text-light: #ffffff;
--accent: #d4af37;
}
body {
background: var(--bg-dark);
color: var(--text-light);
font-family: 'Inter', sans-serif;
}
a {
color: var(--accent);
transition: opacity 0.2s;
}
a:hover {
opacity: 0.8;
}
.button {
background: var(--accent);
color: var(--bg-dark);
padding: 12px 24px;
border-radius: 6px;
transition: transform 0.2s;
}
.button:hover {
transform: translateY(-2px);
}Your website needs to look great on phones, tablets, and desktops. Responsive design adjusts the layout based on screen size.
/* Mobile first approach */
.portfolio-grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
/* Tablet */
@media (min-width: 768px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.mobile-menu-btn {
display: none;
}
}
/* Desktop */
@media (min-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}
}Now let's add meaningful content to each page.
<section class="about-hero">
<div class="about-content">
<img src="/images/headshot.jpg" alt="Sarah Chen">
<div>
<h1>About Sarah</h1>
<p>With over a decade behind the lens...</p>
</div>
</div>
</section>
<section class="awards">
<h2>Awards & Recognition</h2>
<ul>
<li>Best Portrait Photographer 2024</li>
<li>Wedding Photography Excellence Award</li>
</ul>
</section><div class="portfolio-filters">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="portraits">Portraits</button>
<button class="filter-btn" data-filter="weddings">Weddings</button>
</div>
<div class="portfolio-grid">
<div class="portfolio-item" data-category="portraits">
<img src="/images/portrait-1.jpg" alt="Portrait">
</div>
<!-- More items... -->
</div>Let visitors get in touch with you through a contact form.
<form class="contact-form" action="/api/contact" method="POST">
<div class="form-group">
<label for="name">Name *</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="event">Event Type *</label>
<select id="event" name="event" required>
<option value="">Select...</option>
<option value="portrait">Portrait</option>
<option value="wedding">Wedding</option>
</select>
</div>
<button type="submit">Send Message</button>
</form>Check out our Sending Emails & SMS tutorial for detailed instructions on setting up email delivery for your contact form.
Your website is built on ClodHost, so it's already live at your yourname.clodhost.com subdomain! If you want to use your own domain name:
sarahchenphotography.com)See our Setting Up Custom Domains tutorial for detailed step-by-step instructions.
Now that you have a website, consider: