Using the exercise files

If you're premium member of Lynda.com, you have access to the exercise files used throughout this title. Now, this project is different from most projects in the library. I'm using Git to manage this project. So, in the Exercise files folder, you'll find a folder labelled responsive with a copy of the finished project. To work with the project at any point in the course, we'll need to open up that folder inside either the Git Bash on Windows or the Terminal in OS X. I'm going to copy this folder first to the desktop and then open up my Terminal and navigate to that folder.

So I know this folder is on the desktop, so I can get to it by doing cd and then ~/Desktop. And if I list the files in there, I'll see my responsive folder. So I'll do a cd responsive to go to that folder. Now you can do a quick shortcut for all this. If we quit the Terminal and just drag this folder directly onto the Terminal icon. It's not going to work in a PC, but on a Mac, it's a quick way to get there.

Now, before you work with the exercise files, make sure you've gone through the Git installation on your machine. The copy of the project in the Exercise Files folder does not include the node_modules folder. So when you first copy the responsive folder, open it up in the Terminal and run the npm install command. That might take awhile. Once it's done, you should see a screen like this. I'm going to go ahead and clear it out. And if you open up the responsive folder, you'll now have the node_modules folder, which you need in order to run this project.

Now, if you want to try out the project at any specific video in the course, they're each saved as a separate branch. You can take a look at all the branches by issuing the git branch command. Again, make sure you've installed Git before you do this. You can see that we're at the master branch. That's the branch that has the finished project. You can see all the other branches by scrolling up and down this list. Now, let's say I want to go to chapter two, movie three. I can do a git checkout command with ch02_03.

And that switches to that branch, modifying what's in the responsive folder. So let me open this up in a text editor. So if we open up the components folder and the sass folder, you'll notice that there are some files in this folder that are empty. Now, if I fast forward by switching to another branch. I'll do another git checkout and do chapter four, movie five.

Almost at the end. We'll switch to this branch and we'll see that a lot of these files now have data in them. All you have to remember is that if you want to watch the movie on chapter three, movie 12, if you want to start with the assets as they were at the beginning, just load up the previous movie. You can always run the git branch command to find out where you are in the current series. If you also play around with some of these files. Let's say that I'm in this base.scss file and I'm just going to delete everything from there and save this.

You can always go back to the way that project used to look by issuing a git checkout period. When I do that and I go back into my text editor, you'll see all the changes have now been loaded up. So, that's a quick way to backtrack to the beginning of that branch. Now, the images folder is not tracked at all, so don't worry if you see an extra production folder in the builds folder. Anything we do inside the images folder will not change as we move through the different branches.

Getting GitHub are great ways to manage your projects, so learn it to be comfortable with that tool. It's going to help you become a better web developer. Now, if you're a monthly member or an annual member of Lynda.com, you don't have access to the exercise files. But almost all the files, except for the images, are available as a GitHub repository. You'll find that at this URL. Now, all the branches are still right here, so if you click on this list, you can find all the branches that we have for the project right here.

This repository also starts in the master branch, which is the finished version of the project. You can quickly switch to another branch by selecting it from this pop-up. Then we'll be able to see the files at that point. Let me switch back over to the master branch. If you don't have access to the exercise files, but you still want to download a specific branch, you can use a Git command. Again, make sure you've installed Git. So pull up the Terminal. See how you do that. Let's go ahead and issue a clear command and make sure that we're on the desktop.

So if I do a list, I've deleted the files that used to be at the desktop now, so that's empty. So we can run a git clone minus b for branch and then chapter two movie three. And then run the URL of the repository, which is github.com/planetoftheweb and /responsive.git, and hit Return. This will create a folder on your desktop called responsive with almost all the files except for the images folder.

Now, you'll still need to run the npm install command to install the node_modules folder. But before you do that, you actually need to get into that folder. So, let's go ahead and do a cd responsive and now we're ready to run the npm install command. Once that's done, let's go ahead and clear it out. And let's take a peek at the desktop. You see that because we made a small error, we have this extra file called npm debug.

So let's go ahead and get rid of that. You can see the responsive folder is right there and if we open it up, we'll see the node_modules folder and all the other files for the project. And remember, you don't have access to the images folder, but you can use your own images. Or you can use a website like placehold.it. Now, if you need more help working with Git or GitHub, make sure you check out Git Essential Training with Kevin Skoglund. So, let's get started building a responsive single page design.