Codes With Vic

The easiest way to learn coding directly in your VS Code environment.

Features

Project Rendering with Phases

The extension now supports a new enhanced project format that displays projects with multiple phases in interactive tabs. This format provides:

• Multi-phase project structure with clear progression
• Interactive tab navigation between phases
• Career impact and professional value sections
• Task lists and deliverables for each phase
• Responsive design that adapts to different screen sizes

New Project Format Example:

{
  "project": {
    "project": "🏪 Professional E-Commerce Backend API",
    "description": "Build a complete e-commerce backend system that handles product management, user authentication, and order processing.",
    "career_impact": "This project demonstrates backend development skills that are essential for roles at e-commerce companies, fintech startups, and enterprise software companies.",
    "phase_1": {
      "title": "🚀 Foundation: HTTP Server & Product Catalog API",
      "tasks": [
        "Create an HTTP server that serves JSON data for product listings",
        "Implement endpoints for /api/products, /api/categories, and /api/products/:id"
      ],
      "deliverable": "A working REST API that serves product data like major e-commerce platforms"
    },
    "phase_2": {
      "title": "📁 Data Management: File-Based Inventory System",
      "tasks": [
        "Implement file-based storage for products using JSON files",
        "Create functions to read/write product data asynchronously"
      ],
      "deliverable": "A complete inventory management system with persistent data storage"
    },
    "phase_3": {
      "title": "🔐 Professional Features: Authentication & Order Processing",
      "tasks": [
        "Implement user authentication with login/logout endpoints",
        "Create an order processing system that handles cart operations"
      ],
      "deliverable": "A production-ready e-commerce backend with authentication and order management"
    },
    "professional_value": "This project showcases your ability to build scalable backend systems that handle real business logic."
  }
}

Topic Navigation

When a learner scrolls to the last exercise of a topic, previous and next navigation buttons appear at the bottom of the screen. These buttons allow learners to:

• Navigate to the previous topic (if available)
• Navigate to the next topic (if available)
• Use keyboard shortcuts (left/right arrow keys) when navigation buttons are visible
• Automatically scroll to the top when navigating to a new topic

The navigation buttons are context-aware and only appear when:

• The learner has scrolled to or past the last exercise in the current topic
• There are previous or next topics available
• The current topic is completed

Study Aids

• Interactive Courses: Learn programming languages and frameworks with hands-on examples
• Offline Access: Continue learning even without internet connection
• Progress Tracking: Your progress is automatically saved and synced
• Integrated Quizzes: Test your knowledge directly in VS Code
• Real-time Feedback: Get immediate feedback on your code
• Project-Based Learning: Build real-world projects as you learn
• GitHub Integration: Sign in with your GitHub account to access all courses
• Multi-device Access: Access your courses from multiple devices with automatic synchronization

Requirements

For the best experience, we recommend installing:

• Language Extensions: Extensions for the language you're learning (Python, JavaScript, Go, C#, Java)
• Code Runner: For easily running code snippets
• Git: For version control and authentication

Extension Settings

• Login: Sign in with GitHub to access your courses
• Course Selection: Browse and download available courses
• Study Plan: Follow the structured learning path
• Settings: Customize your learning experience

Support

Need help? Contact us at info@codeswithvic.com

Codes With Vic - Learn coding the right way, right in VS Code.