Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of jQuery: Building an Interface.
- [Instructor] All of the files for this course are freely available in GitHub for all the users, at this URL. In GitHub you'll see that the project is organized into branches. Each branch corresponds to a video in the course. They are named according to the video they correspond to. So if you see a branch that starts with a name like O2 O2 E, that means that the branch corresponds to the second chapter and refers to the second video in that chapter. If you see an E at the end of the name, that's how the files look at the end of the video.
If the branch doesn't have an E, that's how the files look at the beginning of the video. If you want to take a look at the code at the end of chapter two, video two, then we can click on this and take a look at the app folder, and you can see all the files that I'm using in that directory. Now the best way to work with the project is to clone all the branches at once. In order to do that, you need to have Node.js, as well as Git installed. You can find Node.js and download the installer at this URL.
And you can find git and download the installer for your platform at this URL. When you install git, make sure that you add the Git BASH terminal in Windows. It makes running the commands more consistent. So let me show you how to clone all the branches for this project. First, I'm going to go back to the GitHub repo and I'm going to click on this button, to copy the link to the repo. Once I do that, I'm going to switch over to a Terminal application.
On the Mac, I can just use the Terminal app. On a Windows you want to do this using the Git BASH application or a Linux-compatible application. First, I'm going to switch over to the desktop, by issuing a CD and then tilde slash desktop command. Now I need to create a directory, so I issue an mkdir command and create a folder for my project; I'll call it Jquery.
Next, I need to switch over to that directory, so I'll issue cd and then Jquery command. Now I need to clone the repo, so I'll issue a git clone command, this will need to have the minus minus bare option to create a bare repository. And now I'm going to paste the URL from GitHub and add a space, and add an additional dot git at the end. Now this creates a bare repository. So we'll need to convert it into a regular repository; that will happen in two parts.
First, I need to change a variable. So I'll issue a git config, minus minus bool, to change a boolean variable called core dot bare to false. To make this into a regular repository, I'm going to issue a git reset, minus minus hard command. And now my repository is a regular repository. Let's go ahead and issue a clear command, to clean the screen up.
And we can issue a git branch, to take a look at all the branches we have from the project. Your branches may look a little bit different than this. Let's clear this out. The next thing we need to do is install the project dependencies. This will give you the ability to run a live server, to make it easier to run your project. In order to do that, I need to issue an npm install command. Once that's done, we'll go ahead and clear this.
You should start the videos with the project open in your favorite text editor. Ill be using Visual Studio Code in this course. Now this is now showing you the code from the end of the course. If you want to watch a video at the beginning of chapter two, then you can use Visual Studio Code to click right here and switch to a different branch. Or if you want to, you can use the terminal and open up a new window. We'll make sure that we're in the Jquery folder.
And we can check out a different branch. If you've made some modifications to files when you do a git check out command, and you see an error, you can issue a git stash command so that it clears out any of the changes you've made. This will reset the files to their original state. You can see that it says no local changes to save because I haven't made any changes to the files. I'll start each video in the course with the gulf command already running in the terminal and the code opened inside our editor.
There will also be a copy of the application running in the browser. So now that you're ready to get going, lets get started building our application.
- Loading external data
- Managing events
- Sorting items
- Searching data
- Formatting, adding, and editing data
- Reviewing the Bootstrap template