In order to work with this project, we're going to need to do some installations. Now first, we need to make sure that we have copies of Git and Node. If you watched the previous video, those were the installation instructions for Mac. I'm going to walk you through doing that on a Windows machine. Now, Git is a version control system that let's you manage changes to a site by creating commits and branches. In this course we're going to use Git to download a template for our projects. And if you want to learn more about Git, we've got a great course from Kevin Skoglund called: Git Essential Training.
Now, to download Git you need to go to the Git website at this URL. And click on the Downloads for Windows. Then wait for the application to download. And I'm going to hit Run right here. And go through the installation prompts. Now here I want to make sure that I install something called Git Bash. So the default options should be fine. And I'm going to hit Next. And here I'll select: Use Git from Git Bash Only. And then click on Next.
And the first default is fine for this one. So we'll wait until this installation is done. I don't need to see the release notes, so I'm going to click that off and hit Finish. Now next, I need to install a copy of Node.js. To do that, we need to go to this URL and click on this Install button. Go ahead and run the installation.
When you install Node you'll also get something called the Node.js command prompt, but it's actually a little bit better if you use Git Bash because if you're looking at a tutorial that was done on a Unix work station which is most of the web tutorials, Git Bash is going to be a little bit closer in the commands that you're going to type in. So it's a little bit better to use Git Bash instead of the node.js command prompt, although they work pretty much similarly, and the node.js command prompt you'll end up typing dir, whereas in the Git Bash application you'll type in ls, just like you would on a Linux machine.
Now let's check to see if we've got Git and Node installed. We'll run a Git minus minus version, and you should get a version of Git back. And we'll do a Node minus minus version command, and you should see a version for Node as well. Installing Git and Node is real common on modern web projects. They'll give you some capabilities that are essential to work in with an efficient workflow
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling