The Swamp Shack
Complete Website Guide

Key Features

Technology Stack

What's Included

Recommended Hosting Options

Project Structure

Key Files Explained

Files You'll Most Likely Edit

Changing Colors & Branding

Your website uses CSS custom properties (variables) for easy color customization. All colors are defined at the top of the CSS file.

/* In assets/css/style.css - Line 1-20 */
:root {
    /* Primary Colors - Your main brand colors */
    --primary-color: #2e7d32;        /* Main green */
    --primary-dark: #1b5e20;         /* Darker green */
    --primary-light: #4caf50;        /* Lighter green */
    
    /* Secondary Colors - Accent colors */
    --secondary-color: #ff6b35;      /* Orange accent */
    --secondary-dark: #e55722;       /* Darker orange */
    
    /* Text Colors */
    --text-primary: #1a202c;         /* Main text */
    --text-secondary: #2d3748;       /* Secondary text */
    --text-muted: #4a5568;           /* Muted text */
    
    /* Background Colors */
    --bg-primary: #ffffff;           /* Main background */
    --bg-secondary: #f7fafc;         /* Section backgrounds */
    --bg-dark: #1a202c;              /* Dark sections */
}

Popular Color Schemes for Food Trucks

Changing Fonts

The website uses Google Fonts for professional typography. You can easily change fonts by updating the import and CSS rules.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">



<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">


<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">


<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Updating Images

Replace the default images with your own food truck photos for a personalized look.

Image Requirements & Best Practices

Updating Content

Most content updates happen in the index.html file. Here are the most common sections you'll want to customize:

Example: Updating Menu Items

<!-- In index.html - Menu section -->
<div class="menu-item">
    <div class="menu-item-image">
        <img src="assets/images/food/your-dish.jpg" alt="Your Dish Name">
    </div>
    <div class="menu-item-content">
        <div class="menu-item-header">
            <h3>Your Dish Name</h3>
            <span class="price">$12.99</span>
        </div>
        <p class="menu-item-description">
            Delicious description of your dish with key ingredients and what makes it special.
        </p>
        <div class="menu-item-tags">
            <span class="tag">Spicy</span>
            <span class="tag">Popular</span>
        </div>
    </div>
</div>

Adding New Menu Items

Follow this template to add new items to your menu. Each item should include an image, name, price, description, and optional tags.

<div class="menu-item" data-category="mains">
    <div class="menu-item-image">
        <img src="assets/images/food/new-item.jpg" alt="New Item Name" loading="lazy">
        <div class="menu-item-overlay">
            <button class="btn btn-primary" onclick="orderItem('new-item')">
                <i class="fas fa-shopping-cart"></i>
                Order Now
            </button>
        </div>
    </div>
    <div class="menu-item-content">
        <div class="menu-item-header">
            <h3>New Item Name</h3>
            <span class="price">$14.99</span>
        </div>
        <p class="menu-item-description">
            Mouth-watering description that highlights key ingredients, 
            cooking method, and what makes this dish special.
        </p>
        <div class="menu-item-tags">
            <span class="tag tag-popular">Popular</span>
            <span class="tag tag-spicy">Spicy</span>
            <span class="tag tag-new">New</span>
        </div>
        <div class="menu-item-nutrition">
            <small>
                <i class="fas fa-leaf"></i> Vegetarian Available
                <i class="fas fa-fire"></i> 650 cal
            </small>
        </div>
    </div>
</div>

Menu Categories & Organization

Organize your menu into logical categories to help customers find what they want quickly.

Pricing Strategy Tips

Food Photography Best Practices

Great photos can increase sales by up to 30%. Here's how to make your food look irresistible:

Menu Item Tags & Labels

Use tags to highlight special features and help customers with dietary restrictions or preferences.

/* Custom tag styles for different categories */
.tag-popular { background: #ff6b35; color: white; }
.tag-new { background: #4caf50; color: white; }
.tag-spicy { background: #f44336; color: white; }
.tag-vegetarian { background: #8bc34a; color: white; }
.tag-vegan { background: #689f38; color: white; }
.tag-gluten-free { background: #ff9800; color: white; }
.tag-healthy { background: #00bcd4; color: white; }
.tag-chef-special { background: #9c27b0; color: white; }

Netlify Deployment (Recommended)

Netlify offers the easiest deployment process with drag-and-drop functionality, perfect for beginners.

Traditional Web Hosting

For more control and features like email accounts, traditional hosting might be preferred.

Popular Hosting Providers

FTP Upload Process

# Typical FTP settings (provided by your host)
Host: ftp.yourdomain.com
Username: your-username
Password: your-password
Port: 21 (or 22 for SFTP)
Directory: /public_html/ or /www/

# Upload all files to the public_html directory
# Make sure index.html is in the root directory

Custom Domain Setup

A custom domain (like swampshack.com) makes your website look professional and is easier for customers to remember.

DNS Configuration

After purchasing a domain, you'll need to point it to your hosting provider:

# For Netlify
Type: CNAME
Name: www
Value: your-site-name.netlify.app

Type: A
Name: @
Value: 75.2.60.5

# For traditional hosting (example)
Type: A
Name: @
Value: 192.168.1.100 (your host's IP)

Type: CNAME
Name: www
Value: yourdomain.com

SSL Certificate Setup

SSL certificates encrypt data between your website and visitors, and are required for modern websites.

Mobile Optimization Check

After deployment, test your website on various devices and screen sizes to ensure optimal mobile experience.

Go-Live Checklist

Local SEO for Food Trucks

Local SEO is crucial for food trucks since customers search for nearby food options. Here's how to dominate local search results:

Keyword Optimization

Target keywords that hungry customers use when searching for food trucks in your area.

Primary Keywords for Food Trucks

On-Page SEO Implementation

<!-- Optimized title tag -->
<title>The Swamp Shack - Authentic Cajun Food Truck | Miami, FL</title>

<!-- Meta description -->
<meta name="description" content="Authentic Cajun cuisine from The Swamp Shack food truck. Serving gator bites, po'boys, and jambalaya in Miami. Catering available for events.">

<!-- Local business schema markup -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FoodTruck",
  "name": "The Swamp Shack",
  "description": "Authentic Cajun food truck serving Miami",
  "url": "https://swampshack.com",
  "telephone": "+1-305-555-0123",
  "servesCuisine": "Cajun",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Miami",
    "addressRegion": "FL",
    "addressCountry": "US"
  },
  "openingHours": "Mo-Fr 11:00-21:00, Sa-Su 12:00-22:00"
}
</script>

Link Building Strategies

Build authority and improve rankings through strategic link building:

Technical SEO

Ensure your website meets technical SEO requirements for better search engine crawling and indexing.

Essential Technical Elements

Sitemap.xml Example

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://swampshack.com/</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://swampshack.com/#menu</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://swampshack.com/#contact</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Content Marketing for Food Trucks

Create valuable content that attracts customers and improves search rankings:

Image Optimization

Images typically account for 60-80% of a website's file size. Proper optimization can dramatically improve loading speeds.

Responsive Images Implementation

<!-- Responsive image with multiple sizes -->
<img src="assets/images/food/gator-bites-800.jpg"
     srcset="assets/images/food/gator-bites-400.jpg 400w,
             assets/images/food/gator-bites-800.jpg 800w,
             assets/images/food/gator-bites-1200.jpg 1200w"
     sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="Crispy Gator Bites with Cajun Seasoning"
     loading="lazy">

<!-- Modern format with fallback -->
<picture>
  <source srcset="assets/images/food/gator-bites.webp" type="image/webp">
  <source srcset="assets/images/food/gator-bites.jpg" type="image/jpeg">
  <img src="assets/images/food/gator-bites.jpg" alt="Gator Bites" loading="lazy">
</picture>

Code Optimization

Clean, efficient code loads faster and provides better user experience across all devices.

CSS Optimization

/* Minimize CSS with efficient selectors */
/* Instead of: */
.menu .menu-item .menu-item-content .menu-item-title { }

/* Use: */
.menu-item-title { }

/* Combine similar rules */
.btn-primary, .btn-secondary, .btn-ghost {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Use CSS custom properties for consistency */
:root {
    --primary-color: #2e7d32;
    --border-radius: 0.5rem;
    --transition: all 0.3s ease;
}

JavaScript Optimization

// Efficient DOM queries
const menuItems = document.querySelectorAll('.menu-item');
const navLinks = document.querySelectorAll('.nav-link');

// Debounced scroll handler for better performance
let scrollTimeout;
window.addEventListener('scroll', () => {
    if (scrollTimeout) clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(handleScroll, 16); // ~60fps
});

// Lazy loading implementation
const observerOptions = {
    root: null,
    rootMargin: '50px',
    threshold: 0.1
};

const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            imageObserver.unobserve(img);
        }
    });
}, observerOptions);

Caching Strategies

Implement caching to reduce server load and improve repeat visitor experience.

Browser Caching Headers

# Enable compression
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

# Set cache headers
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

Mobile Performance

Mobile users expect even faster loading times. Optimize specifically for mobile devices.

Performance Testing Tools

Performance Goals

Google Analytics 4 Setup

Google Analytics provides essential insights into your website visitors, their behavior, and conversion patterns.

Google Analytics Implementation

<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID', {
    // Enhanced ecommerce for menu item tracking
    send_page_view: true,
    // Custom parameters for food truck business
    custom_map: {
      'custom_parameter_1': 'location',
      'custom_parameter_2': 'menu_category'
    }
  });
</script>

<!-- Event tracking for menu interactions -->
<script>
function trackMenuClick(itemName, category, price) {
  gtag('event', 'menu_item_click', {
    'item_name': itemName,
    'item_category': category,
    'value': price,
    'currency': 'USD'
  });
}

function trackContactForm() {
  gtag('event', 'contact_form_submit', {
    'event_category': 'engagement',
    'event_label': 'contact_form'
  });
}
</script>

Call Tracking

Track phone calls generated by your website to measure offline conversions and ROI from your online marketing efforts.

Call Tracking Implementation

// Dynamic number insertion for call tracking
function insertTrackingNumber() {
    const phoneElements = document.querySelectorAll('.phone-number');
    const trackingNumber = '+1-305-555-TRACK'; // Your tracking number
    
    phoneElements.forEach(element => {
        element.textContent = trackingNumber;
        element.href = `tel:${trackingNumber}`;
    });
}

// Track phone clicks in Google Analytics
document.querySelectorAll('a[href^="tel:"]').forEach(link => {
    link.addEventListener('click', function() {
        gtag('event', 'phone_call', {
            'event_category': 'contact',
            'event_label': 'phone_click',
            'value': 1
        });
    });
});

// Initialize tracking on page load
document.addEventListener('DOMContentLoaded', insertTrackingNumber);

Location-Based Analytics

For food trucks, understanding where your website visitors are located helps optimize your route planning and marketing efforts.

Key Location Metrics to Track

Menu Performance Tracking

Track which menu items generate the most interest and optimize your offerings based on data.

// Enhanced menu item tracking
class MenuAnalytics {
    constructor() {
        this.initializeTracking();
    }

    initializeTracking() {
        // Track menu item views
        this.trackMenuItemViews();
        
        // Track menu item clicks
        this.trackMenuItemClicks();
        
        // Track time spent viewing menu sections
        this.trackMenuSectionTime();
    }

    trackMenuItemViews() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const itemName = entry.target.querySelector('h3').textContent;
                    const category = entry.target.dataset.category;
                    
                    gtag('event', 'menu_item_view', {
                        'item_name': itemName,
                        'item_category': category,
                        'event_category': 'menu_engagement'
                    });
                }
            });
        }, { threshold: 0.5 });

        document.querySelectorAll('.menu-item').forEach(item => {
            observer.observe(item);
        });
    }

    trackMenuItemClicks() {
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', () => {
                const itemName = item.querySelector('h3').textContent;
                const price = item.querySelector('.price').textContent;
                const category = item.dataset.category;

                gtag('event', 'menu_item_click', {
                    'item_name': itemName,
                    'item_category': category,
                    'value': parseFloat(price.replace('$', '')),
                    'currency': 'USD'
                });
            });
        });
    }

    trackMenuSectionTime() {
        let sectionStartTime = {};
        
        const sectionObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                const sectionId = entry.target.id;
                
                if (entry.isIntersecting) {
                    sectionStartTime[sectionId] = Date.now();
                } else if (sectionStartTime[sectionId]) {
                    const timeSpent = Date.now() - sectionStartTime[sectionId];
                    
                    gtag('event', 'menu_section_time', {
                        'section_name': sectionId,
                        'time_spent': Math.round(timeSpent / 1000),
                        'event_category': 'engagement'
                    });
                    
                    delete sectionStartTime[sectionId];
                }
            });
        });

        document.querySelectorAll('.menu-section').forEach(section => {
            sectionObserver.observe(section);
        });
    }
}

// Initialize menu analytics
new MenuAnalytics();

Key Performance Indicators (KPIs)

Focus on metrics that directly impact your food truck's success and growth.

Email Marketing Integration

Connect your website analytics with email marketing to create a complete customer journey picture.

// Email signup tracking with customer segmentation
function trackEmailSignup(email, source, interests = []) {
    // Track in Google Analytics
    gtag('event', 'email_signup', {
        'event_category': 'lead_generation',
        'event_label': source,
        'value': 1
    });

    // Send to email marketing platform (example: Mailchimp)
    const signupData = {
        email: email,
        source: source,
        interests: interests,
        signup_date: new Date().toISOString(),
        page_url: window.location.href
    };

    // Track customer interests based on menu interactions
    const menuInteractions = JSON.parse(
        localStorage.getItem('menuInteractions') || '[]'
    );
    
    if (menuInteractions.length > 0) {
        signupData.menu_interests = menuInteractions;
    }

    // Send to your email marketing service
    sendToEmailService(signupData);
}

// Track menu interests for segmentation
function trackMenuInterest(category, item) {
    let interests = JSON.parse(
        localStorage.getItem('menuInteractions') || '[]'
    );
    
    interests.push({
        category: category,
        item: item,
        timestamp: Date.now()
    });
    
    // Keep only last 10 interactions
    interests = interests.slice(-10);
    
    localStorage.setItem('menuInteractions', JSON.stringify(interests));
}

Social Media Analytics Integration

Track social media traffic and engagement to understand which platforms drive the most business.

Custom Dashboard Creation

Create a custom dashboard to monitor all your key metrics in one place.

Common Issues & Solutions

Here are the most frequently encountered problems and step-by-step solutions to resolve them quickly.

<!-- Correct path structure -->
<img src="assets/images/food/gator-bites.jpg" alt="Gator Bites">

<!-- Common mistakes to avoid -->
<!-- Missing folder: src="gator-bites.jpg" -->
<!-- Wrong case: src="assets/Images/Food/gator-bites.jpg" -->
<!-- Extra slash: src="assets//images/food/gator-bites.jpg" -->

.menu-item img {
    width: 100%;
    height: 250px;
    object-fit: cover; /* Maintains aspect ratio */
    object-position: center;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Ensure buttons are touch-friendly */
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
}

/* Prevent horizontal overflow */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

/* Responsive text sizing */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(0.9rem, 2vw, 1.1rem); }

<form name="contact" method="POST" data-netlify="true" data-netlify-recaptcha="true">
    <input type="hidden" name="form-name" value="contact">
    <!-- form fields -->
    <div data-netlify-recaptcha="true"></div>
</form>

function validateForm(form) {
    const email = form.querySelector('input[type="email"]');
    const message = form.querySelector('textarea');
    
    if (!email.value || !email.value.includes('@')) {
        alert('Please enter a valid email address');
        return false;
    }
    
    if (!message.value || message.value.length < 10) {
        alert('Please enter a message with at least 10 characters');
        return false;
    }
    
    return true;
}

# Enable compression
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/css application/javascript
</IfModule>

# Set cache headers
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType text/css "access plus 1 year"
</IfModule>

Debugging Tools & Techniques

Use these tools to identify and fix issues quickly:

Getting Help

When you need additional support, here are the best resources:

Prevention Checklist

Follow this checklist to prevent common issues before they occur:

Quick Fix Reference

What's Next?

Now that your website is live, here are the next steps to maximize your online success:

Pro Tips for Long-term Success

Bonus Resources

Here are additional resources to help you continue growing your online presence: