In the world of software development, Visual Studio Code (VS Code) and GitHub are essential tools that streamline coding, collaboration, and version control. Whether you’re a beginner or an experienced developer, mastering these tools can significantly enhance your productivity. This guide walks you through setting up and using VS Code and GitHub, highlighting key features, including AI-powered prompts and automation.
As students we get access to an amazing set of developer resources for FREE!
Microsoft offers all registered students world wide $100 of Azure Credit and over 25 FREE services with Microsoft Azure for Student.
GitHub offers all students FREE Codespaces and GitHub Copilot with the GitHub Education Pack so let walk through how you can get started with these resources.
1. Setting Up VS Code
Installing VS Code
- Download VS Code from official site.
- Install it on your system (Windows, macOS, or Linux).
- Open VS Code and customize your settings.
Essential Extensions
Extensions enhance productivity by adding new functionalities. Some must-have extensions are:
- GitHub Copilot – AI-powered code suggestions.
- Prettier – Code formatter for clean and consistent code.
- Live Server – For real-time web development preview.
- Python / Java Extensions – For language-specific enhancements.
- Debugger for Chrome – Helps debug web applications.
Customizing VS Code
- Themes & Icons: Go to File → Preferences → Color Theme to personalize the editor.
- Keyboard Shortcuts: Access shortcuts via Ctrl + K, Ctrl + S.
- Snippets & IntelliSense: Use built-in IntelliSense for code completion and hints.
2. Hosting Your First Website Locally
Creating Project Files
- Open VS Code and create a new folder for your project.
- Inside the folder, create three files:
- index.html – The main HTML file.
- style.css – The stylesheet.
- script.js – The JavaScript file.
Writing Basic Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<button onclick="showMessage()">Click Me</button>
<script src="script.js"></script>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
script.js
function showMessage() {
alert("Hello, welcome to my website!");
}
Viewing the Website Locally
- Install the Live Server extension in VS Code.
- Right-click on index.html and select Open with Live Server or Click 'Go Live' in Bottom right.
- Your website will open in a browser at http://127.0.0.1:5500/.
3. Getting Started with GitHub
Creating a GitHub Repository
- Sign up at GitHub.
- Click New Repository, name it, and choose Public or Private.
- Initialize with a README file and select a .gitignore template.
Cloning a Repository in VS Code
- Open VS Code and press Ctrl + Shift + P.
- Type “Git: Clone” and enter the GitHub repo URL.
- Select a local folder to store the project.
Committing & Pushing Changes
- Make changes in your files.
- Open Source Control Panel (Ctrl + Shift + G).
- Write a commit message and click the ✓ (Commit) button.
- Click Sync Changes to push code to GitHub.
4. Using VS Code’s AI-Powered Prompts & Features
GitHub Copilot for Code Assistance
- Copilot suggests code snippets based on comments and existing code.
- Example: Type // function to sort an array and Copilot generates the function.
- Enable Copilot from Extensions and sign in to GitHub.
VS Code AI-Powered Chat
- Access AI chat by pressing Ctrl + Shift + P and searching “Copilot Chat”.
- Use it to explain, debug, or generate code snippets.
Autocomplete & IntelliSense
- VS Code’s IntelliSense suggests variable names, function calls, and methods dynamically.
- Press Ctrl + Space to trigger suggestions.
5. Advanced Git & GitHub Features
Branching & Merging
- Create a branch for new features
git checkout -b branch_name.
- Merge using
git merge branch_name.
- Use Pull Requests to collaborate on GitHub.
GitHub Actions for Automation
- Automate CI/CD workflows with GitHub Actions.
- Example: Auto-deploy code when changes are pushed to main.
Syncing with Remote Repository
-
Pull updates: git pull origin main.
-
Push changes: git push origin main.
Conclusion
VS Code and GitHub are powerful tools that, when used effectively, boost productivity, collaboration, and code quality. By leveraging AI-powered features like GitHub Copilot, IntelliSense, and GitHub Actions, you can streamline your development workflow. Whether you’re a beginner or an experienced developer, integrating these tools into your daily coding practice will significantly enhance your efficiency.
Start coding smarter today with VS Code and GitHub!
Final Tips for Success
Having a competitive partner is essential for consistency and long-term success. The eagerness and love for building projects will drive you forward. Based on my experience, engaging in healthy competition and discussions with peers keeps you motivated and sharp.
If you found this blog useful, feel free to add comments below.
