SkyArtShop/Sky_Art_shop/SETUP-GUIDE.md

🚀 Sky Art Shop Website - Quick Start Guide

Welcome! This guide will help you get your Sky Art Shop website up and running quickly.

✅ What's Included

Your website includes:

• ✨ 8 fully functional HTML pages
• 🎨 Complete responsive CSS styling
• 💻 Interactive JavaScript features
• 📁 Organized file structure
• 📖 Comprehensive documentation

📋 Step-by-Step Setup

Step 1: View Your Website

Option A: Using Live Server (Recommended)

1. Open Visual Studio Code
2. Install "Live Server" extension if not already installed:
   • Click Extensions icon (or press Ctrl+Shift+X)
   • Search for "Live Server"
   • Click Install
3. Right-click on index.html
4. Select "Open with Live Server"
5. Your website will open in your default browser!

Option B: Open Directly in Browser

1. Navigate to your project folder
2. Double-click index.html
3. The website will open in your default browser

Step 2: Add Your Images

Important: The website currently references image files that don't exist yet. You need to add them!

1. Read the IMAGE-GUIDE.md file for complete image requirements

2. Create the necessary folders:

   assets/images/
   assets/images/products/
   assets/images/portfolio/
   assets/images/portfolio/displays/
   assets/images/portfolio/personal-crafts/
   assets/images/portfolio/card-making/
   assets/images/portfolio/scrapbook-albums/
   assets/images/blog/
   

3. Add your images to these folders

4. Or use placeholder images temporarily (see IMAGE-GUIDE.md)

Step 3: Customize Your Content

Update Business Information

1. Open contact.html
2. Update:
   • Phone number
   • Email address
   • Business hours
   • Social media links

Update About Page

1. Open about.html
2. Customize:
   • Your story
   • Mission statement
   • Product offerings

Add Your Products

1. Open shop.html
2. Find the product cards
3. Update:
   • Product names
   • Prices
   • Descriptions
   • Images

Step 4: Customize Colors & Branding

1. Open assets/css/main.css
2. Find the :root section at the top
3. Change the color variables:

:root {
    --primary-color: #6B4E9B;      /* Your brand's main color */
    --secondary-color: #E91E63;    /* Accent color */
    --accent-color: #FF9800;       /* Highlight color */
}

4. Save and refresh your browser to see changes

🎯 Key Pages Explained

1. Home Page (index.html)

• Main landing page with hero section
• Features products and promotions
• Links to all other sections

2. Portfolio Page (portfolio.html)

• Showcases your creative work
• Links to 4 category pages
• Great for displaying past projects

3. Shop Page (shop.html)

• Displays all products
• Has filtering by category
• Sorting by price functionality

4. About Page (about.html)

• Tell your story
• Explain your mission
• Build trust with customers

5. Contact Page (contact.html)

• Contact form (currently client-side only)
• Business information
• Social media links

6. Blog Page (blog.html)

• Share tips and tutorials
• Build community
• Improve SEO

🎨 Customization Tips

Changing Fonts

In main.css, update these variables:

--font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-heading: 'Georgia', serif;

Adjusting Spacing

Modify these spacing variables:

--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 3rem;
--spacing-xl: 4rem;

Adding New Products

Copy an existing product card in shop.html:

<div class="product-card" data-category="your-category">
    <div class="product-image">
        <img src="assets/images/products/your-product.jpg" alt="Product Name">
    </div>
    <h3>Your Product Name</h3>
    <p class="product-description">Product description</p>
    <p class="price">$XX.XX</p>
    <button class="btn btn-small">Add to Cart</button>
</div>

📱 Testing Your Website

Test on Different Devices

1. Desktop: Full features and layout
2. Tablet (768px): Adjusted grid layouts
3. Mobile (480px): Mobile menu and stacked layout

Test in Different Browsers

• Chrome
• Firefox
• Safari
• Edge

Use Browser Developer Tools

1. Press F12 in your browser
2. Click the device toolbar icon
3. Test different screen sizes

🔧 Common Issues & Solutions

Issue: Images Don't Show

Solution:

• Check file paths are correct
• Ensure image files exist in the right folders
• Check file names match exactly (case-sensitive)

Issue: Navigation Menu Doesn't Work on Mobile

Solution:

• Make sure main.js is properly linked
• Check browser console for JavaScript errors (F12)
• Clear browser cache and reload

Issue: Styles Not Applying

Solution:

• Verify main.css is in assets/css/ folder
• Check the CSS file is linked in your HTML
• Clear browser cache (Ctrl+Shift+R)

Issue: Contact Form Doesn't Submit

Note: The contact form currently works client-side only (shows notification but doesn't actually send emails). To make it functional:

1. Set up a backend server (PHP, Node.js, etc.)
2. Or use a service like Formspree or Netlify Forms
3. Or integrate with an email API

🌐 Next Steps: Going Live

Option 1: Traditional Web Hosting

1. Choose a hosting provider (Bluehost, HostGator, etc.)
2. Upload files via FTP
3. Point your domain to the hosting

Option 2: GitHub Pages (Free)

1. Create a GitHub account
2. Create a new repository
3. Upload your files
4. Enable GitHub Pages in settings

Option 3: Netlify (Free)

1. Create a Netlify account
2. Drag and drop your project folder
3. Get a free subdomain or connect your own

Before Going Live

• Add all your images
• Update all content
• Test all links
• Add meta descriptions for SEO
• Set up a contact form backend
• Add Google Analytics (optional)
• Get an SSL certificate (HTTPS)

📊 Adding Analytics

To track visitors, add Google Analytics:

1. Create a Google Analytics account
2. Get your tracking code
3. Add it before the closing </head> tag in all HTML files:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR-ID');
</script>

🛒 Adding E-commerce Features

The current site has basic "Add to Cart" buttons. To make them functional:

Option 1: Shopify Buy Button

• Easy to integrate
• Handles payments securely
• No coding required

Option 2: WooCommerce

• Works with WordPress
• Full e-commerce features
• Requires more setup

Option 3: Custom Solution

• Build shopping cart in JavaScript
• Set up payment gateway (Stripe, PayPal)
• Requires programming knowledge

📞 Need Help?

Resources

• HTML/CSS Help: MDN Web Docs
• JavaScript Help: JavaScript.info
• Web Hosting: Netlify, GitHub Pages

Documentation Files

• README.md - Complete project overview
• IMAGE-GUIDE.md - Image requirements and tips
• SETUP-GUIDE.md - This file!

✨ Tips for Success

1. Start Simple: Don't try to add everything at once
2. Test Often: Check your changes in the browser frequently
3. Use Version Control: Consider using Git to track changes
4. Backup Regularly: Keep copies of your work
5. Get Feedback: Show friends/family and get their input
6. Stay Organized: Keep your files and folders well-organized

🎉 You're Ready

Your Sky Art Shop website is ready to customize and launch. Take it step by step, and don't hesitate to experiment!

Remember:

• The website is fully responsive and mobile-friendly
• All code is well-commented and organized
• You can customize colors, fonts, and content easily
• Images need to be added before going live

Good luck with your Sky Art Shop! 🎨✨

---

Need to make changes? Just edit the HTML, CSS, or JavaScript files and refresh your browser!