There are many AI frameworks out there that when used can severely quicken up the time it takes to build a project. In this project we will focus on understanding what problems these frameworks address and build such a project ourselves.
AI frameworks are powerful tools that can dramatically accelerate your development process when building intelligent applications. Think of an AI framework as a comprehensive toolkit that provides pre-built components, standardized APIs, and intelligent abstractions to help you focus on solving problems rather than wrestling with low-level implementation details.
## Why a framework
In this lesson, you'll discover how frameworks like LangChain can transform complex AI integration tasks into manageable, readable code. You'll learn to handle real-world challenges like maintaining conversation context, implementing tool calling, and managing different AI models through a unified interface.
When it comes to using AI there are different approaches and different reasons for choosing these approaches, here are some:
By the end of this project, you'll understand when to choose frameworks over direct API calls, how to leverage their abstractions effectively, and how to build production-ready AI applications with confidence. Let's explore the world of AI frameworks and unlock their potential for your projects!
- **No SDK**, most AI models allows you to interact directly with the AI model via for example HTTP requests. That approach works and may sometimes be your only option if an SDK option is missing.
- **SDK**. Using an SDK is usually the recommended approach as it allows you to type less code to interact with your model. It usually is limited to a specific model and if using different models, you might need to write new code to support those additional models.
- **A framework**. A framework usually takes things to another level in the sense that if you need to use different models, there's one API for all of them, what differs is usually the initial set up. Additionally frameworks brings in useful abstractions like in the AI space, they can deal with tools, memory, workflows, agents and more while writing less code. Because frameworks are usually opinionated they can really be helpful if you buy into how they do things but may fall short if you try to do something bespoke that the framework isn't made for. Sometimes a framework can also simplify too much and you may therefore not learn an important topic that later may harm performance for example.
## Why choose a framework?
Generally, use the right tool for the job.
When building AI applications, you have several integration approaches available, each with distinct advantages and trade-offs. Understanding these options helps you make informed architectural decisions for your projects.
Let's explore the three main approaches to AI integration:
| Approach | Advantages | Best For | Considerations |
- **Unifies** multiple AI providers under a single API
- **Handles** conversation memory and context automatically
- **Provides** built-in tools for common tasks like embeddings and function calling
- **Manages** error handling and retry logic
- **Abstracts** complex workflows into simple method calls
> 💡 **Pro Tip**: Choose frameworks when you need to switch between different AI models or implement complex features like agents, memory, or tool calling. Use direct APIs when you're learning fundamentals or building simple, single-purpose integrations.
**Remember**: Use the right tool for the job. Frameworks excel at complex, multi-feature applications, while direct APIs work well for simple, focused use cases.
## Introduction
@ -20,13 +54,13 @@ In this lesson, we'll learn to:
- Address common problems like chat conversations, tool usage, memory and context.
- Leverage this to build AI apps.
## First prompt
## Your first AI prompt
In our first app example, we'll learn how to connect to an AI model and query it using a prompt.
Let's start with the fundamentals by creating a simple AI application that sends a prompt and receives a response. This example demonstrates how frameworks simplify what would otherwise require complex HTTP request handling.
### Using Python
### Setting up LangChain with GitHub Models
For this example, we'll use Langchain to connect to GitHub Models. We can use a class called `ChatOpenAI` and give it the fields `api_key`, `base_url` and `model`. The token is something that automatically is populated within GitHub Codespaces and if you're running the app locally, you need to set up a personal access token for this to work.
We'll use LangChain to connect to GitHub Models, which provides free access to various AI models. The setup requires just a few configuration parameters:
```python
from langchain_openai import ChatOpenAI
@ -38,32 +72,59 @@ llm = ChatOpenAI(
model="openai/gpt-4o-mini",
)
# works
response = llm.invoke("What's the capital of France?")
# Send a simple prompt
response = llm.invoke("What's the capital of France?")
print(response.content)
```
In this code, we:
**Here's what this code accomplishes:**
- **Creates** a LangChain client using the `ChatOpenAI` class
- **Configures** the connection to GitHub Models with your authentication token
- **Specifies** the AI model (`gpt-4o-mini`) for processing requests
- **Sends** a prompt using the `invoke()` method
- **Extracts** and displays the response content
- Call `ChatOpenAI` to create a client.
- Use `llm.invoke` with a prompt to create a response
- Print the response with `print(response.content)`.
You should see a response similar to:
> 🔧 **Setup Note**: In GitHub Codespaces, the `GITHUB_TOKEN` environment variable is automatically available. For local development, you'll need to create a personal access token with appropriate permissions.
**Expected output:**
```text
The capital of France is Paris.
```
## Chat conversation
```mermaid
sequenceDiagram
participant App as Your Python App
participant LC as LangChain
participant GM as GitHub Models
participant AI as GPT-4o-mini
App->>LC: llm.invoke("What's the capital of France?")
LC->>GM: HTTP request with prompt
GM->>AI: Process prompt
AI->>GM: Generated response
GM->>LC: Return response
LC->>App: response.content
```
In the preceding section, you saw how we used what's normally known as zero shot prompting, a single prompt followed by a response.
## Building conversational AI
However, often you find yourself in a situation where you need to maintain a conversation of several messages being exchanged between yourself and the AI assistant.
The previous example demonstrated zero-shot prompting—a single question with a single response. However, most real-world AI applications require maintaining context across multiple exchanges, just like human conversations.
### Using Python
LangChain provides message types that help structure conversations and define AI personality, making it easy to build sophisticated chat experiences.
In langchain, we can store the conversation in a list. The `HumanMessage` represents a message from a user, and `SystemMessage` is a message meant to set the "personality" of the AI. In below example you see how we instruct the AI to assume the personality of Captain Picard and for the human/user to ask "Tell me about you" as the prompt.
### Understanding message types
LangChain uses different message classes to represent conversation participants:
| Message Type | Purpose | Example Use Case |
|--------------|---------|------------------|
| `SystemMessage` | Defines AI personality and behavior | "You are a helpful coding assistant" |
| `HumanMessage` | Represents user input | "Explain how functions work" |
| `AIMessage` | Stores AI responses | Previous AI responses in conversation |
### Creating your first conversation
Let's build a conversation where the AI adopts a specific personality:
```python
messages = [
@ -72,6 +133,11 @@ messages = [
]
```
**Breaking down this conversation setup:**
- **Establishes** the AI's role and personality through `SystemMessage`
- **Provides** the initial user query via `HumanMessage`
- **Creates** a foundation for multi-turn conversation
The full code for this example looks like so:
```python
@ -155,15 +221,117 @@ I'll take that as a maybe ;)
## Streaming responses
TODO
Streaming responses provide real-time feedback as the AI generates content, creating a more interactive user experience similar to ChatGPT's typing effect. Instead of waiting for the complete response, you receive content as it's generated.
### Implementing streaming with LangChain
```python
from langchain_openai import ChatOpenAI
import os
llm = ChatOpenAI(
api_key=os.environ["GITHUB_TOKEN"],
base_url="https://models.github.ai/inference",
model="openai/gpt-4o-mini",
streaming=True
)
# Stream the response
for chunk in llm.stream("Write a short story about a robot learning to code"):
print(chunk.content, end="", flush=True)
```
**Key streaming concepts:**
- **Enables** real-time content delivery as the AI generates responses
- **Improves** user experience with immediate feedback
- **Reduces** perceived latency for longer responses
- **Allows** early response processing and display
> 💡 **User Experience Tip**: Streaming is particularly valuable for longer responses like code explanations, creative writing, or detailed tutorials where users benefit from seeing progress immediately.
## Prompt templates
TODO
Prompt templates help you create reusable, dynamic prompts by separating the structure from the variable content. Think of them as mad-libs for AI prompts—you define the template once and fill in different values as needed.
### Creating reusable prompts
```python
from langchain_core.prompts import ChatPromptTemplate
# Define a template for code explanations
template = ChatPromptTemplate.from_messages([
("system", "You are an expert programming instructor. Explain concepts clearly with examples."),
("human", "Explain {concept} in {language} with a practical example for {skill_level} developers")
- **Standardizes** prompt structure across your application
- **Enables** dynamic content insertion without string manipulation
- **Maintains** consistent AI behavior and output quality
- **Simplifies** prompt maintenance and updates
## Structured output
TODO
Structured output ensures AI responses follow a specific format, making them easier to parse and integrate into your applications. Instead of free-form text, you can request JSON, specific data structures, or formatted responses.
### Defining output schemas
```python
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import JsonOutputParser
from pydantic import BaseModel, Field
class CodeReview(BaseModel):
score: int = Field(description="Code quality score from 1-10")
strengths: list[str] = Field(description="List of code strengths")
improvements: list[str] = Field(description="List of suggested improvements")
- **Guarantees** consistent response format for reliable parsing
- **Enables** direct integration with databases and APIs
- **Validates** AI responses against predefined schemas
- **Simplifies** error handling and data processing
## Tool calling
@ -355,20 +523,340 @@ if(res.tool_calls):
print("CONTENT: ",res.content)
```
## Embedding
## Embeddings and document processing
vectorize content, compare via cosine similarity
Embeddings transform text into numerical vectors that capture semantic meaning, enabling similarity searches, content clustering, and retrieval-augmented generation (RAG). Think of embeddings as converting text into coordinates in a multi-dimensional space where similar meanings cluster together.
Now let's combine everything you've learned into a practical AI application. We'll create a coding assistant that can answer questions, execute tools, and maintain conversation context.
### Complete application example
```python
from langchain_openai import ChatOpenAI, OpenAIEmbeddings
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.messages import HumanMessage, SystemMessage, AIMessage
from langchain_community.vectorstores import FAISS
from typing_extensions import Annotated, TypedDict
import os
import requests
class CodingAssistant:
def __init__(self):
self.llm = ChatOpenAI(
api_key=os.environ["GITHUB_TOKEN"],
base_url="https://models.github.ai/inference",
model="openai/gpt-4o-mini"
)
self.conversation_history = [
SystemMessage(content="""You are an expert coding assistant.
Help users learn programming concepts, debug code, and write better software.
Use tools when needed and maintain a helpful, encouraging tone.""")
]
# Define tools
self.setup_tools()
def setup_tools(self):
class web_search(TypedDict):
"""Search for programming documentation or examples."""
query: Annotated[str, "Search query for programming help"]
print("🤖 Coding Assistant Ready! Type 'quit' to exit.\n")
while True:
user_input = input("You: ")
if user_input.lower() == 'quit':
break
response = assistant.chat(user_input)
print(f"🤖 Assistant: {response}\n")
```
**Application architecture:**
```mermaid
graph TD
A[User Input] --> B[Coding Assistant]
B --> C[Conversation Memory]
B --> D[Tool Detection]
B --> E[LLM Processing]
D --> F[Web Search Tool]
D --> G[Code Formatter Tool]
E --> H[Response Generation]
F --> H
G --> H
H --> I[User Interface]
H --> C
```
**Key features implemented:**
- **Maintains** conversation context across multiple exchanges
- **Integrates** tool calling for enhanced functionality
- **Provides** structured interaction patterns
- **Handles** complex workflows with proper error management
## Assignment: Build your own AI-powered study assistant
**Objective**: Create an AI application that helps students learn programming concepts by providing explanations, code examples, and interactive quizzes.
### Requirements
**Core Features (Required):**
1. **Conversational Interface**: Implement a chat system that maintains context across multiple questions
2. **Educational Tools**: Create at least two tools that help with learning:
- Code explanation tool
- Concept quiz generator
3. **Personalized Learning**: Use system messages to adapt responses to different skill levels
4. **Response Formatting**: Implement structured output for quiz questions
### Implementation Steps
**Step 1: Setup your environment**
```bash
pip install langchain langchain-openai
```
**Step 2: Basic chat functionality**
- Create a `StudyAssistant` class
- Implement conversation memory
- Add personality configuration for educational support
**Step 3: Add educational tools**
- **Code Explainer**: Breaks down code into understandable parts
- **Quiz Generator**: Creates questions about programming concepts
- **Progress Tracker**: Keeps track of topics covered
**Step 4: Enhanced features (Optional)**
- Implement streaming responses for better user experience
- Add document loading to incorporate course materials
- Create embeddings for similarity-based content retrieval
### Evaluation Criteria
| Feature | Excellent (4) | Good (3) | Satisfactory (2) | Needs Work (1) |
response = assistant.chat("Explain how Python functions work")
```
**Bonus Challenges:**
- Add voice input/output capabilities
- Implement a web interface using Streamlit or Flask
- Create a knowledge base from course materials using embeddings
- Add progress tracking and personalized learning paths
## Summary
Congratulations! You've mastered the fundamentals of AI framework development and learned how to build sophisticated AI applications using LangChain. Let's review the key concepts and skills you've acquired.
### What you've learned
**Core Framework Concepts:**
- **Framework Benefits**: Understanding when to choose frameworks over direct API calls
- **LangChain Basics**: Setting up and configuring AI model connections
- **Message Types**: Using `SystemMessage`, `HumanMessage`, and `AIMessage` for structured conversations
**Advanced Features:**
- **Tool Calling**: Creating and integrating custom tools for enhanced AI capabilities
- **Conversation Memory**: Maintaining context across multiple conversation turns
- **Prompt Templates**: Building reusable, dynamic prompts
- **Structured Output**: Ensuring consistent, parseable AI responses
- **Embeddings**: Creating semantic search and document processing capabilities
**Practical Applications:**
- **Building Complete Apps**: Combining multiple features into production-ready applications
- **Error Handling**: Implementing robust error management and validation
- **Tool Integration**: Creating custom tools that extend AI capabilities
### Key takeaways
> 🎯 **Remember**: AI frameworks like LangChain excel at abstracting complexity while providing powerful features. They're ideal for applications requiring conversation memory, tool calling, or multi-model support.
**Decision framework for AI integration:**
```mermaid
flowchart TD
A[AI Integration Need] --> B{Simple single query?}
B -->|Yes| C[Direct API calls]
B -->|No| D{Need conversation memory?}
D -->|No| E[SDK Integration]
D -->|Yes| F{Need tools or complex features?}
F -->|No| G[Framework with basic setup]
F -->|Yes| H[Full framework implementation]
C --> I[HTTP requests, minimal dependencies]
E --> J[Provider SDK, model-specific]
G --> K[LangChain basic chat]
H --> L[LangChain with tools, memory, agents]
```
### Next steps in your AI journey
**Immediate applications:**
- Apply these concepts to build your own AI-powered applications
- Experiment with different AI models through the unified LangChain interface
- Create tools that solve real problems in your domain
**Advanced topics to explore:**
- **AI Agents**: Building autonomous AI systems that can plan and execute tasks
- **Retrieval-Augmented Generation (RAG)**: Combining AI with your own knowledge bases
- **Multi-Modal AI**: Working with text, images, and audio in unified applications
- **Production Deployment**: Scaling AI applications with proper monitoring and error handling
**Community and resources:**
- Join the LangChain community for latest updates and best practices
- Explore GitHub Models for access to cutting-edge AI capabilities
- Practice with different use cases to deepen your understanding
You're now equipped with the knowledge to build intelligent, conversational applications that can truly assist users in meaningful ways. The future of AI development is in your hands!
## GitHub Copilot Agent Challenge 🚀
Use the Agent mode to complete the following challenge:
**Description:** Build an advanced AI-powered code review assistant that combines multiple LangChain features including tool calling, structured output, and conversation memory to provide comprehensive feedback on code submissions.
**Prompt:** Create a CodeReviewAssistant class that implements:
1. A tool for analyzing code complexity and suggesting improvements
2. A tool for checking code against best practices
3. Structured output using Pydantic models for consistent review format
4. Conversation memory to track review sessions
5. A main chat interface that can handle code submissions and provide detailed, actionable feedback
The assistant should be able to review code in multiple programming languages, maintain context across multiple code submissions in a session, and provide both summary scores and detailed improvement suggestions.
# Using a Code Editor: Mastering [VSCode.dev](https://vscode.dev)
**Welcome!**
This lesson takes you from the basics to advanced use of [VSCode.dev](https://vscode.dev)—the powerful, web-based code editor. You’ll learn how to confidently edit code, manage projects, track changes, install extensions, and collaborate like a pro—all from your browser, with zero installation required.
***
## Learning Objectives
By the end of this lesson, you’ll be able to:
- Efficiently use a code editor on any project, anywhere
- Seamlessly track your work with built-in version control
- Personalize and boost your development workflow with editor customizations and extensions
***
## Prerequisites
To get started, **sign up for a free [GitHub](https://github.com) account**, which lets you manage code repositories and collaborate worldwide. If you don’t have an account yet, [create one here](https://github.com/).
***
## Why Use a Web-based Code Editor?
A **code editor** like VSCode.dev is your command center for writing, editing, and managing code. With an intuitive interface, tons of features, and immediate access via the browser, you can:
- Edit projects on any device
- Avoid the hassle of installations
- Collaborate and contribute instantly
Once you’re comfortable with VSCode.dev, you’ll be prepared to tackle coding tasks from anywhere, anytime.
***
## Getting Started with VSCode.dev
Navigate to **[VSCode.dev](https://vscode.dev)**—no install, no downloads. Signing in with GitHub unlocks full access, including syncing your settings, extensions, and repositories. If prompted, connect your GitHub account.
After loading, your workspace will look like this:
, ⚙️ (Settings), files, source control, etc.
- **Sidebar:** Changes context based on the activity bar icon selected (defaults to *Explorer* to show files).
- **Editor/code area:** The largest section to the right—where you’ll actually edit and view code.
Click through the icons to explore features, but return to the _Explorer_ to keep your place.
***
## Opening a GitHub Repository
### Method 1: From the Editor
1. Go to [VSCode.dev](https://vscode.dev). Click **"Open Remote Repository."**
.
- **Disable:** Temporarily turn off an extension while keeping it installed
- **Uninstall:** Permanently remove it if no longer needed
Find the extension, hit the Gear icon, and select ‘Disable’ or ‘Uninstall,’ or use the blue buttons in the code area.
***
## Assignment
Test your skills: [Create a resume website using vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
***
## Further Exploration and Self-Study
- Dive deeper with [the official VSCode Web Docs](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza).
- Explore advanced workspace features, keyboard shortcuts, and settings.
***
**Now you’re ready to code, create, and collaborate—from anywhere, on any device, using VSCode.dev!**
# Using a Code Editor: Mastering VSCode.dev
Welcome to the world of web-based code editing! In this lesson, you'll discover how to use VSCode.dev, a powerful browser-based code editor that brings professional development tools directly to your web browser. Think of it as having a complete development environment that follows you everywhere – no downloads, no installations, just pure coding power at your fingertips.
Modern web development requires tools that are flexible, accessible, and powerful. VSCode.dev delivers all three by providing the same editing experience you'd get from a desktop application, but with the convenience of running entirely in your browser. This means you can code on any device, from anywhere, whether you're using a school computer, a friend's laptop, or even a tablet.
By the end of this lesson, you'll be confidently editing code, managing projects, tracking changes with version control, and customizing your development environment with extensions. These skills form the foundation of professional web development and will serve you throughout your coding journey.
## Learning Objectives
After completing this lesson, you'll be able to:
- Navigate and efficiently use VSCode.dev's interface for any coding project
- Open and edit GitHub repositories directly in your browser
- Track and commit changes using built-in Git version control
- Install and manage extensions to enhance your development workflow
- Create, edit, and organize files within web-based projects
## Prerequisites
Before starting this lesson, you'll need:
- A free [GitHub account](https://github.com) for managing code repositories and accessing VSCode.dev's full features
- Basic familiarity with web browsers and file management
- Completion of the GitHub Basics lesson (recommended)
> 💡 **Getting Started**: If you don't have a GitHub account yet, [create one here](https://github.com/). It's free and essential for modern web development collaboration!
## Understanding Web-Based Code Editors
A code editor serves as your primary workspace for writing, editing, and managing code. Unlike simple text editors, professional code editors provide syntax highlighting, error detection, file organization, and integration with development tools. VSCode.dev brings all these capabilities to your browser with several key advantages.
**Key benefits of web-based editing:**
| Benefit | Description | Impact |
|---------|-------------|---------|
| **Device Independence** | Works on any computer with a modern browser | Code from school, home, or anywhere |
| **Zero Setup** | No downloads or installations required | Start coding immediately |
| **Automatic Updates** | Always runs the latest version | Access newest features without manual updates |
| **Cloud Integration** | Direct connection to GitHub repositories | Seamless collaboration and backup |
**Here's why web-based editors are revolutionary:**
- **Eliminates** the traditional barrier of software installation
- **Provides** consistent experience across different devices and operating systems
- **Enables** instant collaboration and sharing with team members
- **Reduces** storage requirements on your local device
## Getting Started with VSCode.dev
Let's dive into VSCode.dev and explore its powerful interface. This web-based editor provides all the tools you need for professional development work, accessible through any modern web browser.
To begin, navigate to [vscode.dev](https://vscode.dev) in your browser. Notice that there's no download prompt or installation process – the editor loads directly in your browser tab.
### Connecting Your GitHub Account
For the best experience, sign in with your GitHub account when prompted. This connection unlocks powerful features including repository access, settings synchronization, and extension management.
**Signing in provides these benefits:**
- **Accesses** your GitHub repositories directly in the editor
- **Synchronizes** your settings and extensions across devices
- **Enables** direct commits and pull requests from the browser
- **Maintains** your personalized development environment
### Understanding the Interface
Once loaded, VSCode.dev presents a clean, organized workspace designed for efficient coding:
- **Activity Bar** (left edge): Contains icons for Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, and Settings ⚙️
- **Sidebar** (left panel): **Displays** contextual information based on your Activity Bar selection
- **Editor Area** (main space): **Provides** the primary workspace for viewing and editing your code files
**Getting familiar with the layout:**
- **Click** through different Activity Bar icons to explore available features
- **Observe** how the sidebar content changes based on your selection
- **Return** to the Explorer view (📁) to see your project files and folders
## Opening GitHub Repositories
One of VSCode.dev's most powerful features is its ability to open and edit GitHub repositories directly in your browser. This means you can contribute to projects, make quick fixes, or explore codebases without cloning anything to your local machine.
There are two efficient methods to open repositories, each suited for different workflows and use cases.
### Method 1: Using the Interface
This method works well when you're already in VSCode.dev and want to open a specific repository:
**Step-by-step process:**
1. **Navigate** to [vscode.dev](https://vscode.dev) in your browser
2. **Click** the "Open Remote Repository" button on the welcome screen
3. **Paste** your GitHub repository URL (for example: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. **Press** Enter to load the repository
**Alternative using Command Palette:**
For a faster approach, use the Command Palette (Ctrl+Shift+P on Windows/Linux, or Cmd+Shift+P on Mac):
**Here's what happens when you use the Command Palette:**
- **Opens** a search interface for all available VSCode.dev commands
- **Provides** quick access to "Open Remote Repository" functionality
- **Enables** keyboard-driven workflow for experienced developers
- **Displays** recently opened repositories for quick access
### Method 2: Direct URL Transformation
This method offers the fastest way to open any GitHub repository directly in VSCode.dev. It's perfect for quick edits or when someone shares a repository link with you.
**URL transformation technique:**
| Repository Type | Original GitHub URL | VSCode.dev URL |
- **Replaces**`github.com` with `vscode.dev/github` in any repository URL
- **Maintains** the same path structure for user and repository names
- **Works** with both public repositories and private ones you have access to
- **Provides** instant access without additional navigation steps
> 💡 **Pro Tip**: Bookmark the VSCode.dev version of repositories you frequently edit. This creates instant access to your most important projects!
**When to use each method:**
- **Interface method**: Best for browsing and exploring new repositories
- **URL transformation**: Ideal for quick access to known repositories or when clicking links from documentation
## Working with Files and Projects
Once you have a repository open in VSCode.dev, you can perform all the essential file operations needed for web development. The interface provides intuitive tools for creating, editing, organizing, and tracking changes to your code.
Let's explore the core file management capabilities that make VSCode.dev a complete development environment.
### Creating New Files
Adding new files to your project is straightforward and supports all common web development file types including HTML, CSS, JavaScript, and configuration files.
**To create a new file:**
1. **Navigate** to your desired folder location in the Explorer sidebar
2. **Click** the "New File" icon (📄+) that appears when hovering over folder names
3. **Type** your filename including the appropriate extension (e.g., `style.css`, `script.js`, `index.html`)
4. **Press** Enter to create the file
**Best practices for file creation:**
- **Uses** descriptive names that clearly indicate the file's purpose
- **Includes** proper file extensions for syntax highlighting and IntelliSense
- **Organizes** files into logical folder structures from the start
- **Follows** common naming conventions (lowercase, hyphens instead of spaces)
### Editing and Saving Files
VSCode.dev provides a full-featured editing experience with syntax highlighting, auto-completion, and error detection for web development languages.
**Editing workflow:**
1. **Click** any file in the Explorer to open it in the main editor area
2. **Make** your changes using the full-featured code editor
3. **Save** your work using Ctrl+S (Windows/Linux) or Cmd+S (Mac)
**Key editing features:**
- **Provides** syntax highlighting for HTML, CSS, JavaScript, and many other languages
- **Offers** intelligent code completion and suggestions as you type
- **Detects** errors and provides helpful error messages
- **Supports** multiple files open simultaneously in tabs
- **Includes** automatic saving that preserves your work as you type
> ⚠️ **Auto-Save Note**: VSCode.dev automatically saves your changes, but manually saving (Ctrl+S or Cmd+S) ensures your work is immediately preserved and triggers additional features like error checking.
### Version Control with Git
One of VSCode.dev's most powerful features is its integrated Git version control system. This allows you to track changes, create commits, and push updates directly to GitHub without leaving your browser.
**Understanding the Source Control interface:**
1. **Click** the Source Control icon (🌿) in the Activity Bar to view all changes
2. **Review** modified files, which appear in the "Changes" section
3. **See** additions highlighted in green and deletions in red
**The commit workflow:**
```mermaid
flowchart TD
A[Make changes to files] --> B[View changes in Source Control]
B --> C[Stage changes by clicking +]
C --> D[Write descriptive commit message]
D --> E[Click checkmark to commit]
E --> F[Changes pushed to GitHub]
```
**Step-by-step commit process:**
- **Stages** individual files by clicking the "+" icon next to each changed file
- **Reviews** all staged changes before committing
- **Writes** a clear, descriptive commit message explaining what changed
- **Commits** and pushes changes by clicking the checkmark button
- **Discards** unwanted changes using the undo icon if needed
**Writing effective commit messages:**
- **Describes** what the commit accomplishes in present tense
- **Keeps** the first line under 50 characters for readability
- **Uses** specific action verbs like "Add", "Fix", "Update", or "Remove"
- **Examples**: "Add responsive navigation menu", "Fix mobile layout issues", "Update color scheme for accessibility"
> 💡 **Navigation Tip**: Use the hamburger menu (☰) at the top left to return to your GitHub repository and see your committed changes online.
## Enhancing Your Workflow with Extensions
Extensions are one of VSCode.dev's most powerful features, allowing you to customize and enhance your development environment. Think of extensions as specialized tools that add new capabilities, from language support and themes to debugging tools and productivity enhancers.
The VSCode extension marketplace contains thousands of community-created tools designed to make web development more efficient, enjoyable, and powerful. By carefully selecting extensions, you can create a personalized development environment tailored to your specific needs and projects.
### Discovering and Managing Extensions
The Extensions marketplace in VSCode.dev provides easy access to tools that can transform your coding experience. The interface is designed to help you find exactly what you need, whether you're looking for specific functionality or browsing for inspiration.
**Accessing the Extensions marketplace:**
1. **Click** the Extensions icon (🧩) in the Activity Bar
2. **Browse** the different categories or use the search functionality
3. **Explore** extension details, ratings, and user reviews
| **Installed** | Extensions you've already added | Your personal toolkit |
| **Popular** | Most-downloaded extensions | Industry standards and favorites |
| **Recommended** | Suggestions based on your workspace | Tailored to your current project type |
**Key marketplace features:**
- **Displays** detailed information including ratings, download counts, and user reviews
- **Provides** screenshots and documentation for each extension
- **Shows** compatibility information and system requirements
- **Offers** related extensions and alternatives for comparison
### Installing Extensions
Adding new functionality to VSCode.dev is straightforward and immediate. Extensions install quickly and become available right away, often without requiring a restart.
**Installation process:**
1. **Search** for your desired extension using keywords or exact names
2. **Click** on the extension to view its details page
3. **Review** the description, features, and user ratings
- **Downloads** the extension files to your browser-based environment
- **Integrates** new features into the VSCode.dev interface
- **Activates** the extension automatically for immediate use
- **Syncs** with your GitHub account so the extension appears on other devices
**Recommended extensions for web development:**
- **Live Server**: **Provides** local development server with auto-refresh
- **Prettier**: **Formats** your code automatically for consistency
- **Auto Rename Tag**: **Updates** matching HTML tags simultaneously
- **Bracket Pair Colorizer**: **Highlights** matching brackets with colors
- **GitLens**: **Enhances** Git capabilities with advanced history and blame features
### Customizing Extension Settings
Most extensions provide customization options that allow you to tailor their behavior to match your workflow preferences. These settings help you optimize each tool for maximum productivity.
**Accessing extension settings:**
1. **Locate** your installed extension in the Extensions panel
2. **Click** the gear icon (⚙️) next to the extension name
3. **Select** "Extension Settings" from the dropdown menu
4. **Modify** settings according to your preferences
- **Adjusts** formatting rules and style preferences
- **Configures** keyboard shortcuts and trigger behaviors
- **Sets** file type associations and language preferences
- **Enables** or disables specific features within the extension
### Managing Your Extension Collection
As you discover more extensions, you'll want to organize and manage your collection effectively. VSCode.dev provides tools to help you maintain a clean, efficient development environment.
**Extension management options:**
| Action | Purpose | When to Use |
|--------|---------|-------------|
| **Disable** | Temporarily turn off without uninstalling | Testing conflicts or reducing clutter |
| **Uninstall** | Permanently remove from your environment | Extension no longer needed |
| **Update** | Get the latest version and features | Maintain security and functionality |
**Best practices for extension management:**
- **Reviews** your installed extensions periodically to remove unused ones
- **Keeps** extensions updated for the latest features and security patches
- **Disables** rather than uninstalls extensions you might use again
- **Reads** extension changelogs to understand new features and changes
> ⚠️ **Performance Tip**: While extensions are powerful, installing too many can impact performance. Focus on extensions that genuinely improve your workflow and disable any you're not actively using.
## GitHub Copilot Agent Challenge 🚀
Use the Agent mode to complete the following challenge:
**Description:** Create a comprehensive development workflow using VSCode.dev that demonstrates professional project management skills, from repository setup to collaborative features.
**Prompt:** Set up a complete web development project in VSCode.dev that includes:
1. Fork an existing repository or create a new one
2. Create a proper project structure with HTML, CSS, and JavaScript files
3. Install and configure at least 3 relevant extensions for web development
4. Make meaningful commits with descriptive messages
5. Create a feature branch and make changes
6. Document your workflow in a README.md file that explains your development process
Your final project should demonstrate mastery of VSCode.dev's interface, extension ecosystem, and version control integration.
## Assignment
Ready to put your new skills to the test? Complete this hands-on project: [Create a resume website using VSCode.dev](./assignment.md)
This assignment will guide you through creating a professional resume website entirely within your browser, demonstrating all the concepts covered in this lesson.
## Further Exploration and Self-Study
Continue building your expertise with these resources:
**Official Documentation:**
- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - Comprehensive guide to web-based editing
- [GitHub Codespaces](https://docs.github.com/en/codespaces) - Advanced cloud development environments
**Advanced Features to Explore:**
- **Keyboard Shortcuts**: Learn efficiency-boosting shortcuts for faster development
- **Workspace Settings**: Customize your environment for different project types
- **Multi-root Workspaces**: Work with multiple repositories simultaneously
- **Terminal Integration**: Access command-line tools directly in your browser
**Practice Suggestions:**
- **Contribute** to open-source projects using VSCode.dev
- **Experiment** with different extensions to find your optimal workflow
- **Create** templates for common project types you work on
- **Practice** Git workflows including branching, merging, and pull requests
---
**Congratulations!** You now have the skills to code professionally from anywhere, on any device, using VSCode.dev. This browser-based development environment opens up new possibilities for flexible, collaborative web development. Whether you're working on personal projects, contributing to open source, or collaborating with a team, you're equipped with a powerful, accessible development workflow.
_How cool would it be to have a recruiter ask for your resume and you send them a url?_ 😎
Transform your career prospects by building a professional resume website that showcases your skills and experience in an interactive, modern format. Instead of sending traditional PDFs, imagine providing recruiters with a sleek, responsive website that demonstrates both your qualifications and your web development capabilities.
<!----
TODO: add an optional image
> Sketchnote by [Author name](https://example.com)
---->
This hands-on assignment puts all your VSCode.dev skills into practice while creating something genuinely useful for your career. You'll experience the complete web development workflow – from repository creation to deployment – all within your browser.
By completing this project, you'll have a professional online presence that can be easily shared with potential employers, updated as your skills grow, and customized to match your personal brand. This is exactly the kind of practical project that demonstrates real-world web development skills.
## Objectives
## Learning Objectives
After this assignment, you'll learn how to:
After completing this assignment, you'll be able to:
- Create a website to showcase your resume
- **Create** and manage a complete web development project using VSCode.dev
- **Structure** a professional website using semantic HTML elements
- **Style** responsive layouts with modern CSS techniques
- **Implement** interactive features using basic web technologies
- **Deploy** a live website accessible via a shareable URL
- **Demonstrate** version control best practices throughout the development process
### Prerequisites
## Prerequisites
1. A GitHub account. Navigate to [GitHub](https://github.com/) and create an account if you haven't already.
Before starting this assignment, ensure you have:
## Steps
- A GitHub account (create one at [github.com](https://github.com/) if needed)
- Completion of the VSCode.dev lesson covering interface navigation and basic operations
- Basic understanding of HTML structure and CSS styling concepts
**Step 1:** Create a new GitHub Repository and give it a name `my-resume`
## Project Setup and Repository Creation
Let's start by setting up your project foundation. This process mirrors real-world development workflows where projects begin with proper repository initialization and structure planning.
**Step 2** Create an `index.html` file in your repository. We will add at least one file while still on github.com because you cannot open an empty repository on vscode.dev
### Step 1: Create Your GitHub Repository
Click the `creating a new file` link, type in the name `index.html` and select the `Commit new file` button
Setting up a dedicated repository ensures your project is properly organized and version-controlled from the beginning.
1. **Navigate** to [GitHub.com](https://github.com) and sign in to your account
2. **Click** the green "New" button or the "+" icon in the top-right corner
3. **Name** your repository `my-resume` (or choose a personalized name like `john-smith-resume`)
4. **Add** a brief description: "Professional resume website built with HTML and CSS"
5. **Select** "Public" to make your resume accessible to potential employers
6. **Check** "Add a README file" to create an initial project description
7. **Click** "Create repository" to finalize setup
> 💡 **Repository Naming Tip**: Use descriptive, professional names that clearly indicate the project's purpose. This helps when sharing with employers or during portfolio reviews.
**Step 3:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button
### Step 2: Initialize Project Structure
Copy the url to the repository you just created for your resume site and paste it in the input box:
Since VSCode.dev requires at least one file to open a repository, we'll create our main HTML file directly on GitHub before switching to the web editor.
_Replace `your-username` with your github username_
1. **Click** "creating a new file" link in your new repository
✅ If successful, you'll see your project and the index.html file open up on the text editor on the browser.
4. **Write** a commit message: "Add initial HTML structure"
5. **Click** "Commit new file" to save your changes
**Here's what this initial setup accomplishes:**
- **Establishes** proper HTML5 document structure with semantic elements
- **Includes** viewport meta tag for responsive design compatibility
- **Sets** a descriptive page title that appears in browser tabs
- **Creates** the foundation for professional content organization
## Working in VSCode.dev
Now that your repository foundation is established, let's transition to VSCode.dev for the main development work. This web-based editor provides all the tools needed for professional web development.
### Step 3: Open Your Project in VSCode.dev
1. **Navigate** to [vscode.dev](https://vscode.dev) in a new browser tab
2. **Click** "Open Remote Repository" on the welcome screen
3. **Copy** your repository URL from GitHub and paste it into the input field
*Replace `your-username` with your actual GitHub username*
4. **Press** Enter to load your project
✅ **Success indicator**: You should see your project files in the Explorer sidebar and `index.html` available for editing in the main editor area.
**Step 4:** Open the `index.html` file, paste in the code below on your code area and save
**What you'll see in the interface:**
- **Explorer sidebar**: **Displays** your repository files and folder structure
- **Editor area**: **Shows** the content of selected files for editing
- **Activity bar**: **Provides** access to features like Source Control and Extensions
- **Status bar**: **Indicates** connection status and current branch information
### Step 4: Build Your Resume Content
Replace the placeholder content in `index.html` with a comprehensive resume structure. This HTML provides the foundation for a professional presentation of your qualifications.
<details>
<summary><b>HTML code responsible for the content on your resume website.</b></summary>
<summary><b>Complete HTML Resume Structure</b></summary>
<p>Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.</p>
</section>
<section>
<h2>WORK EXPERIENCE</h2>
<divclass="job">
<h3>Job Title</h3>
<pclass="company">Company Name | Start Date – End Date</p>
<ul>
<li>Describe a key accomplishment or responsibility</li>
<li>Highlight specific skills or technologies used</li>
<li>Quantify impact where possible (e.g., "Improved efficiency by 25%")</li>
</ul>
</div>
<divclass="job">
<h3>Previous Job Title</h3>
<pclass="company">Previous Company | Start Date – End Date</p>
<ul>
<li>Focus on transferable skills and achievements</li>
<li>Demonstrate growth and learning progression</li>
<li>Include any leadership or collaboration experiences</li>
</ul>
</div>
</section>
<section>
<h2>PROJECTS</h2>
<divclass="project">
<h3>Project Name</h3>
<p>Brief description of what the project accomplishes and technologies used.</p>
<ahref="#"target="_blank">View Project</a>
</div>
</section>
</article>
</main>
</body>
</html>
```
</details>
Add your resume details to replace the _placeholder text_ on the html code
**Customization guidelines:**
- **Replace** all placeholder text with your actual information
- **Adjust** sections based on your experience level and career focus
- **Add** or remove sections as needed (e.g., Certifications, Volunteer Work, Languages)
- **Include** links to your actual profiles and projects
**Step 5:** Hover on the My-Resume folder, click the `New File ...` icon and create 2 new files in your project: `style.css` and `codeswing.json` files
### Step 5: Create Supporting Files
**Step 6:** Open the `style.css` file, paste in the code below and save
Professional websites require organized file structures. Create the CSS stylesheet and configuration files needed for a complete project.
<details>
<summary><b>CSS code to format the layout of the site.</b></summary>
**Step 6:** Open the `codeswing.json` file, paste in the code below and save
**Creating the configuration file (`codeswing.json`):**
{
```json
{
"scripts": [],
"styles": []
}
}
```
**Understanding the CSS features:**
- **Uses** CSS Grid for responsive, professional layout structure
- **Implements** modern color schemes with gradient headers
- **Includes** hover effects and smooth transitions for interactivity
- **Provides** responsive design that works on all device sizes
- **Adds** print-friendly styles for PDF generation
### Step 6: Install and Configure Extensions
Extensions enhance your development experience by providing live preview capabilities and improved workflow tools. The CodeSwing extension is particularly useful for web development projects.
**Installing the CodeSwing Extension:**
1. **Click** the Extensions icon (🧩) in the Activity Bar
2. **Search** for "CodeSwing" in the marketplace search box
3. **Select** the CodeSwing extension from the search results
4. **Click** the blue "Install" button
**What CodeSwing provides:**
- **Enables** live preview of your website as you edit
- **Displays** changes in real-time without manual refresh
- **Supports** multiple file types including HTML, CSS, and JavaScript
- **Provides** an integrated development environment experience
**Immediate results after installation:**
Once CodeSwing is installed, you'll see a live preview of your resume website appear in the editor. This allows you to see exactly how your site looks as you make changes.
**Understanding the enhanced interface:**
- **Split view**: **Shows** your code on one side and live preview on the other
- **Real-time updates**: **Reflects** changes immediately as you type
- **Interactive preview**: **Allows** you to test links and interactions
Now that your resume website is complete, use Git to save your work and make it available online.
**Committing your changes:**
1. **Click** the Source Control icon (🌿) in the Activity Bar
2. **Review** all the files you've created and modified in the "Changes" section
3. **Stage** your changes by clicking the "+" icon next to each file
4. **Write** a descriptive commit message, such as:
- "Add complete resume website with responsive design"
- "Implement professional styling and content structure"
5. **Click** the checkmark (✓) to commit and push your changes
**Effective commit message examples:**
- "Add professional resume content and styling"
- "Implement responsive design for mobile compatibility"
- "Update contact information and project links"
> 💡 **Professional Tip**: Good commit messages help track your project's evolution and demonstrate attention to detail – qualities that employers value.
**Accessing your published site:**
Once committed, you can return to your GitHub repository using the hamburger menu (☰) in the top-left corner. Your resume website is now version-controlled and ready for deployment or sharing.
**Step 7:** Install the `Codeswing extension` to visualize the resume website on the code area.
## Results and Next Steps
Click the _`Extensions`_ icon on the activity bar and type in Codeswing. Either click the _blue install button_ on the expanded activity bar to install or use the install button that appears on the code area once you select the extension to load additional information. Immediately after installing the extension, observe your code area to see the changes to your project 😃
**Congratulations! 🎉** You've successfully created a professional resume website using VSCode.dev. Your project demonstrates:
**Technical skills demonstrated:**
- **Repository management**: Created and organized a complete project structure
- **Web development**: Built a responsive website using modern HTML5 and CSS3
- **Version control**: Implemented proper Git workflow with meaningful commits
- **Tool proficiency**: Effectively used VSCode.dev's interface and extension system
- **Online presence**: A shareable URL that showcases your qualifications
- **Modern format**: An interactive alternative to traditional PDF resumes
- **Demonstrable skills**: Concrete evidence of your web development capabilities
- **Easy updates**: A foundation you can continuously improve and customize
This is what you will see on your on your screen after you install the extension.
### Deployment Options
To make your resume accessible to employers, consider these hosting options:
If you are satisfied with the changes you made, hover on the `Changes` folder and click the `+` button to stage the changes.
**GitHub Pages (Recommended):**
1. Go to your repository Settings on GitHub
2. Scroll to the "Pages" section
3. Select "Deploy from a branch" and choose "main"
4. Your site will be available at `https://your-username.github.io/my-resume`
Type in a commit message _(A description of the change you have made to the project)_ and commit your changes by clicking the `check`.Once done working on your project, select the hamburger menu icon at the top left to return to the repository on GitHub.
**Alternative platforms:**
- **Netlify**: Automatic deployment with custom domains
- **Vercel**: Fast deployment with modern hosting features
- **GitHub Codespaces**: Development environment with built-in preview
Congratulations 🎉 You have just created your resume website using vscode.dev in few steps.
## 🚀 Challenge
### Enhancement Suggestions
Open a remote repository you have permissions to make changes and update some files. Next, try creating a new branch with your changes and make a Pull Request.
Continue developing your skills by adding these features:
- **JavaScript interactivity**: Add smooth scrolling or interactive elements
- **Dark mode toggle**: Implement theme switching for user preference
- **Contact form**: Enable direct communication from potential employers
- **SEO optimization**: Add meta tags and structured data for better search visibility
**Content enhancements:**
- **Project portfolio**: Link to GitHub repositories and live demonstrations
- **Skills visualization**: Create progress bars or skill rating systems
- **Testimonials section**: Include recommendations from colleagues or instructors
- **Blog integration**: Add a blog section to showcase your learning journey
## GitHub Copilot Agent Challenge 🚀
Use the Agent mode to complete the following challenge:
**Description:** Enhance your resume website with advanced features that demonstrate professional web development capabilities and modern design principles.
**Prompt:** Building on your existing resume website, implement these advanced features:
1. Add a dark/light theme toggle with smooth transitions
2. Create an interactive skills section with animated progress bars
3. Implement a contact form with form validation
4. Add a projects portfolio section with hover effects and modal popups
5. Include a blog section with at least 3 sample posts about your learning journey
6. Optimize for SEO with proper meta tags, structured data, and performance
7. Deploy the enhanced site using GitHub Pages or Netlify
8. Document all new features in your README.md with screenshots
Your enhanced website should demonstrate mastery of modern web development practices including responsive design, JavaScript interactivity, and professional deployment workflows.
## Challenge Extension
Ready to take your skills further? Try these advanced challenges:
**📱 Mobile-First Redesign:** Completely rebuild your site using a mobile-first approach with CSS Grid and Flexbox
**🔍 SEO Optimization:** Implement comprehensive SEO including meta tags, structured data, and performance optimization
**🌐 Multi-language Support:** Add internationalization features to support multiple languages
**📊 Analytics Integration:** Add Google Analytics to track visitor engagement and optimize your content
**🚀 Performance Optimization:** Achieve perfect Lighthouse scores across all categories
## Review & Self Study
Read more about [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) and some of its other features.
Expand your knowledge with these resources:
**Advanced VSCode.dev Features:**
- [VSCode.dev Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - Complete guide to web-based editing
- [GitHub Codespaces](https://docs.github.com/en/codespaces) - Cloud development environments
**Web Development Best Practices:**
- **Responsive Design**: Study CSS Grid and Flexbox for modern layouts
- **Accessibility**: Learn WCAG guidelines for inclusive web design
- **Performance**: Explore tools like Lighthouse for optimization
- **Portfolio Building**: Create additional projects to showcase diverse skills
- **Open Source**: Contribute to existing projects to gain collaboration experience
- **Networking**: Share your resume website in developer communities for feedback
- **Continuous Learning**: Stay updated with web development trends and technologies
---
**Your Next Steps:** Share your resume website with friends, family, or mentors for feedback. Use their suggestions to iterate and improve your design. Remember, this project is not just a resume – it's a demonstration of your growth as a web developer!
chris
1 month ago