Using GitHub Codespaces with this course - CSS Tutorial

- This is Rave Del Lobos senior staff instructor at LinkedIn Learning, and I'm going to show you how to work with LinkedIn Learning courses using GitHub Code Spaces. Code Spaces 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 has been adopted for use with GitHub code Spaces. Using code Spaces, 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 Code Space. The first time you open up a code space 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 pallet. (keyboard clicking) 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, code spaces saves everything you're doing on a virtual machine. You can always get the code space back for this repo by going to the code menu and finding your code space 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. (keyboard clicking) 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 oh 7 0 3 E, 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 code space. To create your own fork, you can click on the fork button on the repository. I'm going to hit Create fork. I'll have my own copy of this repository, and if I want to I can start a new code space on that fork. This forked 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 is an M right here, as well as an asterisk on this branch. In the source control panel you can also see a 1 for the change that we just made. Let's go ahead and try to commit this change. (keyboard clicking) I'm going ahead 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 okay. 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 the 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 code space 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 core specific tips from the instructor. Now, let's get back to the course.