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:

```css
: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:

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

### Adjusting Spacing

Modify these spacing variables:

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

### Adding New Products

Copy an existing product card in `shop.html`:

```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:

```html
<!-- 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](https://developer.mozilla.org/)
- **JavaScript Help**: [JavaScript.info](https://javascript.info/)
- **Web Hosting**: [Netlify](https://www.netlify.com/), [GitHub Pages](https://pages.github.com/)

### 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!*