Before we get too far on this project, we're going to need to do some installations. And we'll start off by making sure that we have copies of Git and Node. In this video I'll walk you through doing that on a Mac. If you have a PC, just go ahead and check the next video. Now, Git is a version control system that lets you manage changes to a website by creating commits and branches. And in this course, we're going to use it to download a template for our project. If you want to learn more about Git, we've got a great course from Kevin Skoglund called Git Essential Training.
Now, to download and install Git, go to this website. I'm going to click on this Downloads for Mac, here. And it'll download a copy of Git onto my device. Now, once the installation is done, I'm going to run the DMG file. And this will run an installer. Now, I'm just going to go through the installation procedure here. And you may have to type in the password for your device.
Once the installation finishes, just run the package, and go through the different prompts. You may have to type in your password. Once you finish your installations, you can check to see if Git and Node are installed using your Mac's Terminal application. So I'm going to type in git --version, and it should return a version number. And if I type in node --version, it should also return a version number for Node. Now, installing Git and Node is real common on modern web projects.
They'll give you some abilities that are essential to working in 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