Sample Website - Web Development Environment

A complete web development environment setup with VSCode, GitHub CLI, and CI/CD pipeline.

🚀 Quick Start

1. Open in VSCode: code .
2. Start development server: npm start
3. Open browser: Visit http://localhost:3000

🛠️ Tools Included

• VSCode with essential extensions
• GitHub CLI for seamless Git operations
• Live Server for real-time preview
• Prettier for code formatting
• ESLint for code linting
• CI/CD Pipeline with GitHub Actions

📋 Available Scripts

• npm start - Start development server with live reload
• npm run build - Build and validate the project
• npm run format - Format code with Prettier
• npm run lint - Lint JavaScript code
• npm run preview - Preview built site

🎨 VSCode Extensions

The following extensions are installed for optimal web development:

• Live Server - Real-time preview
• Prettier - Code formatting
• ESLint - JavaScript linting
• Auto Rename Tag - HTML tag synchronization
• GitHub Pull Requests - GitHub integration
• HTML CSS Support - Enhanced HTML/CSS support
• CSS Peek - CSS class navigation
• Path Intellisense - File path autocompletion

🔄 CI/CD Pipeline

The project includes a GitHub Actions workflow that:

1. Lints your code
2. Formats code with Prettier
3. Builds the project
4. Deploys to GitHub Pages automatically

📁 Project Structure

sample-website/
├── index.html          # Main HTML file
├── styles.css          # CSS styles
├── script.js           # JavaScript functionality
├── package.json        # Dependencies and scripts
├── .prettierrc         # Prettier configuration
├── .eslintrc.json      # ESLint configuration
└── .github/
    └── workflows/
        └── deploy.yml  # GitHub Actions workflow

🌐 WYSIWYG Experience

• Live Preview: Changes appear instantly in browser
• Hot Reload: Automatic refresh on file changes
• Visual Editing: VSCode provides rich editing experience
• Real-time Feedback: Immediate error detection and formatting

🚀 Deployment

Push to main branch to automatically deploy to GitHub Pages via the CI/CD pipeline.

---

This environment is ready for modern web development with all tools configured and integrated.