Make an small static website

October 16, 2025
tech beginners
#claude #static-website
Also available in: fr

How to build a beautiful marketing site for your knitting fair in under an hour

Planning a local event like a knitting fair? You need a simple, attractive website to share details, build excitement, and provide essential information to attendees. In this guide, I’ll show you how to create a professional-looking event website using Claude (AI assistant) and Netlify (free hosting), even if you have zero coding experience.

What You’ll Build

By the end of this tutorial, you’ll have:

  • A responsive, mobile-friendly website
  • Event details, schedule, and location information
  • Vendor/exhibitor showcase section
  • Contact form for inquiries
  • Free hosting with a custom domain option

Requirements

  • Time: 30-60 minutes
  • Cost: €17 for Claude Pro (1 month) + free hosting (optional: €10-15/year for custom domain)
  • Technical skills needed: None, but willingness to learn a bit of technical concepts

Prerequisites

You’ll need:

  1. A Claude Pro account and Claude Code installed (installation guide)
  2. A Netlify account (free sign-up at netlify.com)
  3. Your event information of course (dates, location, description, what makes it special)

Step 1: Plan Your Website Structure

Before asking Claude to build anything, outline what your website needs. For a knitting fair, consider:

Essential Pages:

  • Home: Hero image, event tagline, date/location, quick highlights
  • About: What makes this knitting fair special? History, mission
  • Schedule: Daily events, workshops, demonstrations
  • Vendors: Who’s exhibiting? Showcase sponsors
  • Visit: Venue details, parking, accessibility, tickets
  • Contact: Email form, social media links

Design preferences:

  • Warm, inviting colors (yarn-inspired palette)
  • Clean, readable typography
  • Mobile-first approach

Step 2: Set Up Your Local Workspace

Before asking Claude to generate anything, let’s set up a simple workspace on your computer:

  1. Create a new folder in your Documents called knitting-fair-website
  2. Open a text editor (Notepad on Windows, TextEdit on Mac, or any code editor)
  3. Create a new file and type: Hello World
  4. Save the file as index.html inside your knitting-fair-website folder
  5. Find the index.html file in your folder and double-click it to open in your browser

You should see “Hello World” displayed in your browser. The URL in the address bar will be a file path (something like file:///C:/Users/YourName/Documents/knitting-fair-website/index.html or file:///home/YourName/Documents/knitting-fair-website/index.html). This confirms everything is working and you’re ready to replace this simple content with the full website Claude will generate.

Step 3: Use Claude to Generate Your Website

Now comes the fun part. Open Claude Code in your project folder:

On Windows: 1. Open File Explorer and navigate to your Documents/knitting-fair-website folder 2. Right-click inside the folder (not on a file) 3. Select “Open with Code” or “Open in Terminal” 4. In the terminal, type: claude

On Mac/Linux: 1. Open Terminal 2. Navigate to your folder: cd ~/Documents/knitting-fair-website 3. Type: claude

This opens Claude Code with access to your project folder.

Important: Make sure Claude is using the Sonnet model. You can check/change the model in the Claude Code interface settings. The Sonnet model provides the best balance of quality and speed for this task.

Now give it this prompt (replacing “Website Topic” with your actual event):

I want to create a static website for Website Topic.

Create a CLAUDE.md file in my project folder to document this website project.
Before creating it, ask me questions to understand what I want to build.

Ask me about:
- The essential pages I need
- My design preferences and color scheme
- The overall aesthetics and vibe
- My event details (name, date, location, etc.)
- Any specific features I want

Then, create a comprehensive CLAUDE.md file that includes:
- My answers to your questions
- Technical specifications: Tailwind CSS (CDN), Alpine.js (CDN)
- Design approach: Responsive, mobile-first, modern aesthetic
- Page structure and navigation
- All content requirements
- SEO requirements: Descriptive page titles, meta descriptions, Open Graph tags
- Accessibility requirements: Alt text for images, proper heading hierarchy, sufficient color contrast

Important: This is a static website (HTML/CSS/JS only). No backend forms or
databases. Only built-in browser features like mailto: links for contact.

After creating the CLAUDE.md, generate all the HTML files for my website.

What happens next:

Claude will ask you questions. For our knitting fair example, the conversation might look like:

● I'd love to help you create a website for your knitting fair! Let me gather the information I need to build something perfect for you.

Questions about your Knitting Fair Website:

1. Essential Pages

What pages do you need for the website? For example:
- Home page
- About the fair
- Schedule/Program
- Vendors/Exhibitors
- Workshops/Classes
- Location/Venue information
- Contact page
- Registration/Tickets
- Gallery (past events)
- Any others?

2. Event Details

- What's the name of your knitting fair?
- When is it happening? (dates and times)
- Where is it located? (venue name, address)
- Is this a recurring event or one-time?
- What's the admission cost (free, ticketed, donation-based)?
- Who can attend? (all ages, skill levels, etc.)

3. Design Preferences & Color Scheme

- What colors do you envision? (warm/cozy, bright/vibrant, pastel/soft, modern/minimalist?)
- Any specific color palette in mind? (yarn-inspired colors, brand colors?)
- Do you have a logo or branding already?

4. Overall Aesthetics & Vibe

- What feeling should the site convey? (cozy/warm, professional/modern, playful/creative, elegant/artisanal?)
- Any websites you admire or want to emulate?
- Prefer clean and minimal or rich and detailed?

5. Specific Features

- Do you need a contact form?
- Should there be vendor/exhibitor profiles or listings?
- Do you want a newsletter signup?
- Social media integration/links?
- Map integration for venue location?
- Photo gallery functionality?
- Countdown timer to the event?
- Any special interactive elements?

Please answer these questions, and I'll create a comprehensive CLAUDE.md documentation file followed by all the HTML pages for your knitting fair website!

How to respond:

You have two options for answering Claude’s questions:

Option 1: Answer one by one Claude will update the remaining questions as you answer each one. For example:

I need: Home, About, Schedule, Vendors, and Contact pages.

Claude will then ask the next question about event details, and so on.

Option 2: Give essentials and let Claude decide Tell Claude the basics (pages you need, event details) and then say:

The event is called "Woolworth Valley Knitting Festival 2025", happening June 14-15
at Riverside Community Center. I need Home, About, Schedule, Vendors, and Contact pages.

For design and features, go for what you think will look best for a warm,
welcoming knitting fair website.

Claude will make good design decisions and generate a complete website based on your core requirements.

What happens next:

After you provide your answers, Claude will: 1. Create a summary of your requirements 2. Ask permission to create and edit files in your project folder

You’ll see a prompt like this:

❯ 1. Yes
  2. Yes, allow all edits during this session (shift+tab)
  3. No, and tell Claude what to do differently (esc)

Choose option 2: “Yes, allow all edits during this session”

This lets Claude create the CLAUDE.md file and all your HTML files without asking for permission each time. It saves you from approving each individual file creation.

Claude will then: 1. Create the CLAUDE.md documentation file 2. Generate all HTML files (index.html, about.html, schedule.html, etc.) 3. Tell you about what it created

Be patient, it will take a few minutes to generate all the files.

Here’s an example of what Claude will tell you after completing the task:

● Perfect! Your Woolworth Valley Knitting Festival website is complete! Here's what I've created for you:

  Files Created:

  1. CLAUDE.md - Comprehensive project documentation including:
    - Event details (Woolworth Valley Knitting Festival 2025, June 14-15, Riverside Community Center)
    - Technical specs (Tailwind CSS & Alpine.js via CDN)
    - Design system with warm, yarn-inspired colors (sage green, terracotta, purple, cream)
    - Full page structure and content requirements
  2. index.html - Home page featuring:
    - Hero section with event name, dates, and location
    - Three highlight cards (Meet Local Artisans, Learn New Skills, Shop Unique Yarns)
    - Quick info section (when, where, admission)
    - Call to action
  3. about.html - About page with:
    - Festival story and mission
    - What to expect (workshops, vendor marketplace, demonstrations, community)
    - Who should attend section
    - FAQ with accordion functionality
  4. schedule.html - Schedule page including:
    - Tabbed interface (Saturday/Sunday)
    - Detailed schedule for both days
    - Workshop descriptions, times, and locations
    - Color-coded event types
  5. vendors.html - Vendors page showcasing:
    - 12 sample vendor cards with emoji icons
    - Categories: yarns, patterns, tools, finished goods
    - Call for vendors section
    - Vendor categories overview
  6. contact.html - Contact page with:
    - Working contact form with Alpine.js validation
    - Contact information (email, phone, location)
    - Social media links
    - Newsletter signup
    - Map section with directions and parking info

  Design Features:

  - Warm, cozy color palette perfect for a knitting fair
  - Fully responsive (mobile-first design)
  - Interactive elements (mobile menu, accordions, tabs, form validation)
  - Consistent header/footer across all pages
  - Smooth hover effects and transitions
  - Accessibility-friendly markup

  All pages are ready to go! Open index.html in a browser to see your beautiful knitting festival website.

Step 4: Review and Test Locally

Once Claude finishes generating your files, they’re already saved in your project folder! Now test them:

  1. Navigate to your knitting-fair-website folder in File Explorer (Windows) or Finder (Mac)
  2. You should see: CLAUDE.md, index.html, and the other pages you asked for ending with .html
  3. Double-click index.html to open it in your browser
  4. Test navigation between pages by clicking the menu links
  5. Test on mobile using your browser’s developer tools:
    • Chrome: Press F12, then click the device toggle icon (or Ctrl+Shift+M / Cmd+Shift+M) - Chrome DevTools docs
    • Firefox: Press F12, then click the responsive design mode icon (or Ctrl+Shift+M / Cmd+Shift+M) - Firefox Responsive Design Mode docs
    • This lets you see how your site looks on different screen sizes
  6. Check for errors or warnings:
    • Press F12 to open developer tools
    • Go to the “Console” tab
    • Look for any red errors or yellow warnings
    • If you see any, copy and paste them into Claude - it will help fix them

Testing checklist:

  • All pages display correctly with consistent styling
  • Navigation links work across all pages
  • Mobile menu opens and closes properly
  • Contact page has email links (not complex forms)
  • Colors and fonts look good
  • Works well on phone screens

Step 5: Make Changes and Iterate

If you want to adjust anything, just ask Claude! You can change both the design and the content. For example:

Design changes:

Can you make the header bigger on the home page?

Change the color scheme to blue and orange instead.

Add a photo gallery section to the about page.

Content changes:

Rewrite the about page to sound more professional.

Add a FAQ section with 5 common questions about the event.

Make the vendor descriptions more exciting and engaging.

The iteration process: 1. Ask Claude to make a change (design or content) 2. Claude will update the file and tell you what it changed 3. Refresh the page in your browser to see the update 4. Repeat until you’re happy with the result

This back-and-forth lets you perfect your website step by step.

Example of a detailed request:

You can be very specific about what you want. For instance:

On mobile view, I'd like the site title in the navbar to display just
"Knitting Festival" instead of "Woolworth Valley Knitting Festival."
On larger screens it should still show the full title.

Claude will respond with something like:

● Perfect! I've updated all five HTML pages. Now the navbar will display:
  - Mobile view (screens < 768px): "Knitting Festival"
  - Desktop view (screens ≥ 768px): "Woolworth Valley Knitting Festival"

  This gives mobile users more room in the header while keeping the full
  branding visible on larger screens.

Before:

Before responsive title change

After:

After responsive title change

Advanced features with third-party integrations:

Claude can also help you add more complex features like maps, contact forms, or booking systems. Since this is a static website, these features require third-party services. For example:

I want to add a Google Map showing the venue location.

Can you add a working contact form that sends me emails?

I need a way for vendors to register for the event.

These features often require signing up for a service and some configuration steps. Claude will guide you through the entire process - from choosing the right service to configuring it and integrating it into your website. Just ask, and Claude will walk you through it step by step.

When you’re happy with what you have locally, it’s time to make it available over the internet!

Step 6: Deploy to Netlify

Netlify makes deployment incredibly simple. While there are other deployment methods that professionals prefer (like using Git repositories with automatic deployments), the drag-and-drop approach is by far the easiest and fastest for non-technical users. We’ll cover more advanced deployment methods in future blog posts.

Simple Deployment:

  1. Go to app.netlify.com and log in
  2. Drag your entire knitting-fair-website folder onto the deployment zone
  3. Wait 30 seconds for deployment
  4. Get your live URL: random-name-12345.netlify.app
  5. All your pages will be accessible: /, /about.html, /schedule.html, etc.

Step 7: Enhance with Images

Your website needs visual appeal. Add real photos:

  1. Gather 5-10 high-quality images (past events, yarn close-ups, venue photos)
  2. Optimize images for the web
  3. Ask Claude to modify the HTML to include images:
Add a photo gallery section with 8 images from past events.
Use a responsive grid layout with hover effects. Include placeholder
image URLs that I'll replace with my actual photos.
  1. Replace placeholder URLs with your image URLs:
    • Upload images to the same Netlify site

Step 8: More Things You Can Add

Your website is live, but you can enhance it further! You have two main options:

Option 1: Paid Netlify Features Netlify offers premium features that integrate seamlessly:

Option 2: Third-Party Integrations Use free or low-cost external services:

As said before, Claude will guide you through setup and integration for any service you choose.

Step 9: Final Polish

Before launching, complete these finishing touches:

Add Real Content:

  • Replace placeholder text with your actual event information
  • Add testimonials from past attendees or vendor quotes
  • Ensure important links are prominent and repeated

Test Everything:

  • Click through all pages and links
  • Test the contact email links
  • Verify social media links work
  • Check on real mobile devices if possible

If Something Isn’t Working:

  • Copy and paste any error messages into Claude
  • Describe the problem in plain language
  • Follow Claude’s guidance to fix it
  • If you get stuck, you can always call a professional - you’ll already have a solid base to work from

Your website is ready to share!

Going Further

This tutorial covered building a static website - perfect for simples pages. In future blog posts, we’ll explore how to go further by creating dynamic web applications with more complex features.

Stay tuned!

Conclusion

Building a professional event website doesn’t require coding skills or expensive tools. With Claude’s AI assistance and Netlify’s free hosting, you can create and deploy a beautiful, functional site in under an hour.

The key is starting with a clear plan, using detailed prompts with Claude, and iterating based on what you see. Don’t be afraid to ask Claude for changes—that’s what makes this workflow so powerful.

Whether you’re organizing a knitting fair, community festival, creating a personal portfolio, or building a small business marketing website - this approach works for any simple web presence. The result is a polished website that serves your needs and reaches your audience.

Ready to build your event website? Start by outlining your pages and content, then open Claude and begin creating!

About the Author

This guide is brought to you by Blue-Lila, a platform for building robust web applications. Learn more about Blue-Lila products and services.