@ -20,10 +20,11 @@ In this lesson, you'll learn how to:
- Use a code editor in a code project
- Keep track of changes with version control
- Customize the editor for development
- And by the end of the lesson, you will have written out your own resume site
### Prerequisites
Before you begin, you'll need to create an account with [GitHub](https://github.com). Navigate to [GtiHub](https://github.com/) and create an account if you haven't already.
Before you begin, you'll need to create an account with [GitHub](https://github.com). Navigate to [GitHub](https://github.com/) and create an account if you haven't already.
### Introduction
@ -62,18 +63,21 @@ You can also use the command palette. The command palette is an input box where
Once the menu opens, type _open remote repository_, and then select the first option. Multiple repositories that you are part of or that you've opened recently will show up. You can also use a full GitHub URL to select one. Use the following URL and paste into the box:
Once the menu opens, type _open remote repository_, and then select the first option. Multiple repositories that you are part of or that you've opened recently will show up. You can also use a full GitHub URL to select one.
Copy the url to the repository you just created for your resume site:
✅ If succesful, you'll see all files for this repository loaded in the text editor.
✅ If successful, you'll see all files for this repository loaded in the text editor.
### 2. Using the URL
You can also use a url directly to load a repository. For example, the full URL for the current repo is [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), but you can swap the GitHub domain with `VSCode.dev/github` and load the repository directly. The resulting URL would be [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
You can also use a url directly to load a repository. For example, the full URL for the resume project repo is https://github.com/your-username/repository-name, but you can swap the GitHub domain with `VSCode.dev/github` and load the repository directly. The resulting URL would be https://vscode.dev/your-username/repository-name
## Edit files
@ -83,7 +87,9 @@ Once you have opened the repository on the browser/ vscode.dev, the next step wo
You can either create a file inside an existing folder, or create it in the root directory/folder. To create a new file, open a location/directory to which you want the file to be saved and select the _'New file ...'_ icon on the activity bar _(left)_, give it a name and hit enter.
For this project, hover on the root folder name, select _'New file ...'_ icon and give your file the name **'codeswing.json'**
### 2. Edit and save a file on the repository
@ -91,23 +97,30 @@ Using vscode.dev is helpful whenever you want to make quick updates to your proj
To update your code, click the 'Explorer' icon, also located on the activity bar to view files & folders in the repository.
Select a file to open it on the screen and make your changes.
a) Select the index.html file to open it on the screen and add your resume details.
b) Select the codeswing.json file and add the following code in the code area;
{
"scripts": [],
"styles": []
}
Once you are done updating your project, select the _'source control'_ icon which contains all the new changes you have made to your repository.
To view the changes you made to your project, select the file(s) in the 'Changes' folder. This will open a 'Working Tree' for you to visually see the changes you made to the file. Red shows an ommission to the project, while green signifies an addition.
To view the changes, you made to your project, select the file(s) in the 'Changes' folder. This will open a 'Working Tree' for you to visually see the changes you made to the file. Red shows an omission to the project, while green signifies an addition.
If you are safisfied with the changes you made, hover on the 'Changes' folder and click the + button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.
If you are satisfied with the changes you made, hover on the 'Changes' folder and click the + button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.
If however you are not comfortable with some changes and you want to discard them, hover on the 'Changes' folder and select the undo icon.
Then, type in a commit message _(A description of the change you have made to the project)_ and commit your changes by clicking the 'tick'.
Once done working on your project, select the hamburger menu icon at the top left to return to the repository on GitHub.
Then, type in a commit message _(A description of the change you have made to the project)_ and commit your changes by clicking the 'tick'.Once done working on your project, select the hamburger menu icon at the top left to return to the repository on GitHub.
Extensions installed on VSCode allow you to add new features and customized development environment options on your editor to improve your development workflow. These extensions also help you add support for multiple programming languages and are often either generic extensions or language-based extensions.
Julia
3 years ago
