From the course: CSS: Animation

Using GitHub Codespaces with this course - CSS Tutorial

From the course: CSS: Animation

Using GitHub Codespaces with this course

- [Ray] This is Ray Villalobos, Senior Staff Instructor at LinkedIn Learning, and I'm going to show you how to work with LinkedIn Learning courses using GitHub Codespaces. Codespaces is a code editor in the cloud with the full power of Visual Studio Code. It allows for real world, hands-on practice that mirrors software development in the workplace. This course was created using GitHub Codespaces. Using Codespaces, you have everything you need to get going without needing complex installations or build tools. One click and you're ready to go. First, make sure you've signed up for a free GitHub account and that you've logged in. You just see your profile icon right here. When you go to the repository for one of our courses, look for the Code button. Click on Create codespace. The first time you open up a codespace, it might take a few minutes to create the virtual machine. Once it's done, you'll enter the code editor environment. If you're familiar with Visual Studio Code, this is a special version of that editor running on GitHub's servers. The cloud editor's menu lives in a hamburger icon inside the activity bar. The menu will let you see the keyboard shortcuts for your operating system. Let's find the shortcut for the Command Palette. Look in the hamburger menu, under View, and then look for the keyboard shortcut for your operating system. The activity bar has the most common tools you'll need to work with projects. You can, for example, show or hide the Explorer, do a search and replace for content, manage features of the repository, and much more. By the way, if for any reason you lose the activity bar, you can get it back using the Command Palette. Your course can have one or more extensions pre-installed, based on the course you're taking. Those can be found in the Extensions panel. Because this is a browser, it's easy to inadvertently close the browser window and lose the editor. If you do that, don't panic. Codespaces saves everything you're doing on a virtual machine. You can always get the codespace back for this repo by going to the Code menu and finding your codespace right here. Notice that it even remembered that I had opened the Extensions panel. This is a sample of what a multi-branch repository looks like, which is more common when you're working with web frameworks. If you go to the Branch icon on the status bar, you can see that there's more than one branch. You can switch to the different branches using this menu. The branches are named with the chapter and the video number you're watching. If you see a b at the end of the branch, that's how the the code looked at the beginning. If you see an e, that's how the code looked at the end. Let's switch to how the code looked on chapter two and the third video. I'll choose the beginning branch. As you work through a course, you might make some changes on a branch. I'm going to make a minor edit on the index.html file right here. I'm going to go ahead and save that, and you can see that I've modified this file, because there's an M right here and the branch name now has an asterisk on it. If I try to switch to another branch that causes major changes, like, say, 0703e, I may see a dialog box like this. If you don't care about saving your changes, you can simply hit the Force Checkout button. It will let you switch to that branch. You can then choose to discard the changes on this file. Forking lets you create your own copy of the repository on your account, so that you can keep any changes that you've made, even if you've deleted the codespace. To create your own fork, you can click on the Fork button on the repository. I'm going to hit Create fork. I now have my own copy of this repository, and if I want to, I can start a new codespace on that fork. This fork version is almost exactly like the original repository, but it will let you push your own changes. Notice that the URL of the repository is slightly different. Let's go ahead and make a simple change to this file right here. I'm going to save it. You'll note that there's an M right here, as well as an asterisk on this branch. In the Source Control panel, you can also see a one for the change that we just made. Let's go ahead and try to commit this change. I'm going to hit the Commit button, and I'll ask it to go ahead and stage the changes, and then I'm going to hit this button here to commit this onto my own version of the repo. I'll hit OK. You can also let it go ahead and run git fetch. That way it'll automatically sync with your forked repo. Now that change will be stored in your own version of this repository. Don't worry if you forget to fork a repo and then try to push changes. Codespaces will also ask you if you want to create a fork automatically. Some courses will let you work with live previews or create other ports so that you can have a web view of what you're doing. This is managed through the Ports panel in the status bar. Right now, there are no ports forwarded, but if I open up the Live Server extension, you can see a preview of that file. Now, if we go back to the codespace to manage ports, you can click on the icon in the status bar and take a look at the currently available ports. If you want to open this up in a browser, you can click right here. Look for additional course specific tips from the instructor. Now, let's get back to the course.

Contents