Join Ray Villalobos for an in-depth discussion in this video Working with Github templates, part of Building a Responsive Single-Page Design with Sass.
In this course, I've created a template to get you started working with…the different tools quickly.…Now, I've explained how to work with this template on the movie on using…the exercise files.…But sometimes when I watch these courses, I skip that particular movie.…So in this video,…I'm going to show you how to work with a starter version of this template.…Now this template is everything you need,…including a nice workflow and all of the libraries preinstalled and ready to go.…And I'm using GitHub to manage the project.…And GitHub has different branches.…So if I click on this pop-up menu, you should see a list of branches.…
Now, because I haven't recorded all the videos, I'm only seeing three right here.…You'll probably see a lot more when you're watching the video.…And right now, I have the master branch, which is the one that I'm on.…And I have the branch that says ch01, that means the branch for…the project as it was seen in Chapter One.…And then I have another branch called start.…I'm going to go ahead and click on that.…
- 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
Skill Level Advanced
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.