🚀 Skill-Orbit

Master Web Development Through Interactive Learning

Skill-Orbit is an interactive web development tutorial platform that teaches HTML and CSS from scratch. Built for complete beginners with in-depth explanations and a unique interactive playground feature (coming in Phase 2!).

---

📋 What's Built So Far (Phase 1 - Day 1)

✅ Complete Tutorial Website Foundation

• Homepage with lesson list
• Individual lesson pages with full content
• Progress tracking system
• Previous/Next navigation
• 5 comprehensive HTML lessons
• Professional, responsive design
• Mobile-friendly interface

---

🛠️ Installation

Prerequisites

• XAMPP (Apache + PHP)
• Any modern web browser

Setup Steps

1. Copy files to XAMPP

   Copy the entire 'skill-orbit' folder to:
   C:\xampp\htdocs\skill-orbit\
   

2. Start XAMPP

   • Open XAMPP Control Panel
   • Start Apache

3. Access the website

   • Open your browser
   • Go to: http://localhost/skill-orbit

That's it! No database setup needed for Phase 1.

---

📁 Project Structure

skill-orbit/
├── index.php              # Homepage with lesson list
├── lesson.php             # Individual lesson display
├── config.php             # Site configuration
├── lessons/
│   └── lessons-data.php   # All lesson content
├── css/
│   └── main.css           # All styling
├── js/
│   └── progress.js        # Progress tracking
└── assets/
    └── icons/             # (Icons will go here)

---

🎯 Current Features

1. Homepage

• Welcome section with site description
• Grid of all available lessons
• Progress bar showing completion percentage
• Visual indicators for completed lessons

2. Lesson Pages

• Clean, readable content layout
• Code examples with syntax highlighting
• Mark as Complete functionality
• Previous/Next navigation
• Breadcrumb navigation

3. Progress Tracking

• Uses cookies to save progress
• Persists across browser sessions
• Visual checkmarks on completed lessons
• Progress percentage calculation

4. 5 HTML Lessons

1. HTML Introduction - What is HTML?
2. HTML Editors - Tools to write code
3. HTML Basic - Document structure
4. HTML Elements - Understanding tags
5. HTML Attributes - Adding properties

---

🎨 Features

• Responsive Design - Works on desktop, tablet, and mobile
• Clean UI - Professional color scheme and typography
• Smooth Animations - Hover effects and transitions
• Celebration Effects - Confetti when completing lessons!
• Notification System - User feedback for actions

---

🚀 What's Next (Coming in Phase 2)

Interactive Playground (Days 3-5)

• Floating playground button on lesson pages
• Full-screen playground overlay
• Click any element to edit it live
• Context-aware editor (HTML lessons = HTML editor, CSS lessons = CSS editor)
• Playground state persistence
• Reset functionality

---

💡 How to Use

1. Visit the homepage: See all available lessons
2. Click a lesson: Read the content and examples
3. Mark as Complete: Click the completion button when done
4. Navigate: Use Previous/Next buttons to move between lessons
5. Track Progress: Your progress bar updates automatically!

---

🎓 Learning Path

The lessons follow the same order as W3Schools for familiarity:

HTML Basics (Current - 5 lessons)

1. Introduction
2. Editors
3. Basic Structure
4. Elements
5. Attributes

Coming Soon

• More HTML lessons (Headings, Paragraphs, Links, Images, etc.)
• CSS tutorials
• JavaScript lessons

---

🔧 Customization

Adding More Lessons

Edit lessons/lessons-data.php and add new lesson arrays following this structure:

6 => [
    'id' => 6,
    'title' => 'Your Lesson Title',
    'category' => CATEGORY_HTML,
    'description' => 'Brief description',
    'content' => 'HTML content here',
    'examples' => [...],
    'playground_elements' => [...]
]

Changing Colors

Edit css/main.css and modify the CSS variables at the top:

:root {
    --primary-color: #6366f1;  /* Main color */
    --secondary-color: #10b981; /* Success color */
    --accent-color: #f59e0b;    /* Accent color */
}

---

📱 Browser Compatibility

• ✅ Chrome (Recommended)
• ✅ Firefox
• ✅ Edge
• ✅ Safari
• ✅ Opera

---

🐛 Troubleshooting

Apache won't start in XAMPP?

• Check if another program is using port 80
• Try changing Apache port in XAMPP config

Styles not loading?

• Clear browser cache
• Check file paths in browser console (F12)

Progress not saving?

• Make sure cookies are enabled in browser
• Check browser privacy settings

---

🎯 Development Roadmap

• Phase 1: Foundation (Current)

  • File structure
  • Lesson system
  • Navigation
  • Progress tracking
  • First 5 lessons

• Phase 2: Interactive Playground (Next)

  • Floating button
  • Playground overlay
  • Element click detection
  • Live editing

• Phase 3: Smart Context System

  • Lesson type detection
  • Context-aware editor
  • State persistence

• Phase 4: Content Expansion

  • 20+ HTML lessons
  • CSS tutorials
  • UI polish

---

📄 License

This is a personal learning project. Feel free to use and modify for your own learning!

---

🙏 Credits

Built with ❤️ by a passionate learner using vibecoding with Claude AI.

Tech Stack:

• PHP 8.x
• HTML5
• CSS3
• Vanilla JavaScript
• No frameworks - Pure code!

---

📞 Support

Having issues or suggestions? This is a learning project, so feel free to experiment and break things - that's how we learn! 🚀

---

Happy Learning! 🎓