diff --git a/.github/.keep b/.github/.keep new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 3d0c1fe..b95969a 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-22041afd0340ce965d47ae6ef1cefeee28c7c493a6346c4f15d667ab976d596c.svg)](https://classroom.github.com/a/XoLGRbHq) +[![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-2e0aaae1b6195c2367325f4f02e2d04e9abb55f0b24a779b69b11b9e10269abc.svg)](https://classroom.github.com/online_ide?assignment_repo_id=15378208&assignment_repo_type=AssignmentRepo) # SE-Assignment-5 Installation and Navigation of Visual Studio Code (VS Code) Instructions: diff --git a/assignment-submission.md b/assignment-submission.md new file mode 100644 index 0000000..e447b5e --- /dev/null +++ b/assignment-submission.md @@ -0,0 +1,190 @@ +# Questions and Answers + +## Installation of VS Code + +### Steps to Download and Install Visual Studio Code on Windows 11 + +1. **Download VS Code**: + - Visit the Visual Studio Code download page: [Visual Studio Code Download](https://code.visualstudio.com/Download). + - Click on the Windows download link to download the installer. + +2. **Run the Installer**: + - Once the download is complete, open the installer file (`VSCodeSetup.exe`). + - Follow the installation wizard steps: + - Accept the license agreement. + - Choose the installation location. + - Select additional tasks (e.g., creating a desktop icon, adding to PATH). + +3. **Complete Installation**: + - Click on the "Install" button. + - Once the installation is complete, click on the "Finish" button to launch Visual Studio Code. + +### Prerequisites +- **Operating System**: Windows 11. +- **Administrator Access**: Required for installation. +- **Internet Connection**: Necessary to download the installer and any additional extensions. + +## First-time Setup + +### Initial Configurations and Settings +1. **Welcome Page**: + - Close the welcome page or follow the guided tour for an introduction to VS Code. + +2. **Settings**: + - Open settings by clicking the gear icon in the lower-left corner and selecting "Settings". + +3. **Extensions**: + - Install essential extensions by clicking the Extensions view icon on the Activity Bar. + +### Important Settings and Extensions +- **Settings**: + - Theme: Choose a preferred theme (e.g., Dark+, Light+). + - Font Size: Adjust font size for better readability. + - Auto Save: Enable auto-save to avoid losing work. + +- **Extensions**: + - **Python**: Provides Python language support. + - **ESLint**: Linting utility for JavaScript and TypeScript. + - **Prettier**: Code formatter. + - **GitLens**: Enhances Git capabilities within VS Code. + - **Live Server**: Launches a development local server with live reload feature. + +## User Interface Overview + +### Main Components of the VS Code User Interface +1. **Activity Bar**: + - Located on the far left. + - Provides access to different views such as Explorer, Search, Source Control, Run and Debug, and Extensions. + +2. **Side Bar**: + - Displays the content of the selected view from the Activity Bar. + - E.g., file explorer, search results, version control operations. + +3. **Editor Group**: + - The main area where files are opened and edited. + - Supports multiple tabs and split views for side-by-side editing. + +4. **Status Bar**: + - Located at the bottom. + - Displays information about the current workspace, such as line/column number, Git branch, and running processes. + +## Command Palette + +### What is the Command Palette? +- The Command Palette is a powerful tool that allows users to execute commands and perform tasks without leaving the keyboard. + +### How to Access the Command Palette +- Press `Ctrl+Shift+P` (or `F1`). + +### Examples of Common Tasks +- **Open Settings**: Type "Preferences: Open Settings". +- **Install Extensions**: Type "Extensions: Install Extensions". +- **Open Terminal**: Type "Terminal: Create New Integrated Terminal". + +## Extensions in VS Code + +### Role of Extensions +- Extensions enhance the functionality of VS Code by adding new features, tools, and support for additional languages and frameworks. + +### How to Find, Install, and Manage Extensions +1. **Find Extensions**: + - Click the Extensions view icon on the Activity Bar or press `Ctrl+Shift+X`. + - Search for extensions by name or functionality. + +2. **Install Extensions**: + - Click the "Install" button next to the desired extension. + +3. **Manage Extensions**: + - Disable, enable, or uninstall extensions from the Extensions view. + +### Examples of Essential Extensions for Web Development +- **HTML CSS Support**: Adds support for HTML and CSS. +- **JavaScript (ES6) code snippets**: Provides code snippets for JavaScript development. +- **Debugger for Chrome**: Debugs JavaScript code running in the Google Chrome browser. +- **IntelliSense for CSS class names in HTML**: Autocompletes CSS class names. + +## Integrated Terminal + +### How to Open and Use the Integrated Terminal +1. **Open Terminal**: + - Press `Ctrl+` ` (backtick) or select "Terminal: Create New Integrated Terminal" from the Command Palette. + +2. **Using the Terminal**: + - Execute commands just like in a regular terminal. + - Switch between multiple terminals using tabs. + +### Advantages of Using the Integrated Terminal +- **Convenience**: Access the terminal directly within VS Code without switching windows. +- **Integration**: Seamless integration with the editor for running and debugging code. +- **Multiple Terminals**: Support for multiple terminal sessions. + +## File and Folder Management + +### How to Create, Open, and Manage Files and Folders +1. **Create Files/Folders**: + - Right-click in the Explorer view and select "New File" or "New Folder". + +2. **Open Files/Folders**: + - Click on the file or folder in the Explorer view. + - Use `Ctrl+O` to open a file and `Ctrl+K Ctrl+O` to open a folder. + +3. **Manage Files/Folders**: + - Drag and drop to move files. + - Right-click for options like rename, delete, or copy path. + +### Navigating Between Files and Directories +- **Quick Open**: Press `Ctrl+P` and type the name of the file. +- **Go to Definition**: Press `F12` to jump to the definition of a symbol. +- **Navigate Back/Forward**: Use `Ctrl+Alt+-` and `Ctrl+Alt+=` to navigate backward and forward. + +## Settings and Preferences + +### Where to Find and Customize Settings +- Open the settings by clicking the gear icon in the lower-left corner and selecting "Settings" or press `Ctrl+,`. + +### Examples of Customizations +1. **Change Theme**: + - Search for "Color Theme" and select the desired theme. + +2. **Font Size**: + - Search for "Font Size" and adjust the value. + +3. **Keybindings**: + - Open keybindings by selecting "Keyboard Shortcuts" from the gear icon or press `Ctrl+K Ctrl+S`. + +## Debugging in VS Code + +### Steps to Set Up and Start Debugging a Simple Program +1. **Open the Program**: + - Open the file you want to debug. + +2. **Set Breakpoints**: + - Click in the gutter next to the line numbers to set breakpoints. + +3. **Start Debugging**: + - Open the Run and Debug view from the Activity Bar or press `F5`. + - Configure a debug configuration if prompted. + +### Key Debugging Features +- **Breakpoints**: Set and manage breakpoints. +- **Watch Variables**: Monitor variables during execution. +- **Call Stack**: View the call stack at any point. +- **Step Through Code**: Step over, into, or out of functions. + +## Using Source Control + +### Integrating Git with VS Code for Version Control +1. **Initialize a Repository**: + - Open the folder in VS Code. + - Click the Source Control view icon and click "Initialize Repository". + +2. **Making Commits**: + - Stage changes by clicking the `+` icon next to the files. + - Enter a commit message and click the checkmark icon to commit. + +3. **Pushing Changes to GitHub**: + - Click the "Publish to GitHub" button in the Source Control view. + - Follow the prompts to authenticate and push the repository to GitHub. + +--- +