Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of Next Generation CSS Design with PostCSS and CSSNext.
- [Instructor] The videos and graphics used in this project are only available as downloads from our exercise files, so before you get started, make sure you download the exercise files folder from the website. In the exercise files folder, there will be a single folder with the images and videos you need for this project. The code for this course is freely available in GitHub for all users at this URL. In GitHub, you'll see that the project is organized into different branches.
Each branch corresponds to a video in the course. They're named according to the video they correspond to. If you see a branch that starts with a name like 02_02 and b, that means that the branch corresponds to the second chapter and the second video in that chapter. If you see the b at the end of the name, those are how the files look at the beginning of the video. And if you see an e at the end of the name, that's how the files look at the end of the video. The best way to work with the project is to clone all the branches at once.
In order to do that, you'll need 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 to the GitHub repo and I'm going to click on this button and then right here to copy the link to the repo.
Then, I'm going to go over to my terminal application. That would be Git Bash on Windows. And I'm going to make sure that I am on the desktop. I'll do a cd ~/Desktop command, and I need to create a directory for this project so I'm going to issue an mkdir for make a directory and I'm going to call this one nextgen and then switch over to that directory, and now I can issue my git clone command.
It's going to be a little bit different than normal, so I'm going to do a git clone with a --bare option. This is going to download pretty much just the contents of the Git folder so I'm going to paste the URL from Git and add an additional .git at the end. This downloads the bare version of the repository. We need to convert that to a regular repository. I'm going to use the git config and change a variable called core.bare to false.
Now, if I issue a git reset --hard command it's going to reset the head pointer and this is going to give you all of the different branches. Let's go ahead and clear this out and issue a git branch command. Now you can see that I have all of the branches for this git hub repo available to me, which means that I can jump to any point in the course by switching to one of these branches. The next thing we need to do is install the project dependencies we'll need for this project to run properly, so I'll need to issue an npm install command.
Let's go ahead and clear this out. Now would be a good time to add our images folder into this folder, so I'm going to open up this nextgen folder, open up the builds folder. This is where everything gets output, and inside the nextgen folder I'm going to add the images folder into the nextgen folder. This will copy all of the images from my exercise files folder into the project. This project uses Gulp.js to create and run a server which is required for post CSS, so I'm going to issue a gulp command to run the automation.
And this will open up a browser with the finished version of my project. I can go ahead and hide my terminal, and I'll start each video with the project opened in my favorite text editor. In this course, I'm going to use Visual Studio Code. In this project, we'll be working mostly with the files inside the process folder.
My gulp.js process is going to take these files and push them into another folder in the builds folder, and the nextgen folder, and in the css folder. The style.css file is the file that I imported my index.html document. Now, we can easily switch between branches to see the project at different steps in the process. I'm going to open up another terminal and I'm going to list the branches by issuing a git branch command.
From here, I can switch to another version of the files at another one of the videos. Let's say I want to switch to how the files look at the beginning of chapter three, video four. I'll issue a git checkout command and check out that version like this. If I make some modifications to this code and I save them, I can always rewind it to how the files looked at the beginning of this video by issuing a git checkout . command.
Now that we're ready to get going, let's get started building our project.
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos