Learn how to build responsive single-page websites (with animation and scrolling effects) using frameworks like Compass, Susy, and Breakpoint.
- [Voiceover] Hey there, this is Ray Villalobos, staff author at Lynda.com. And I want to welcome you to building a responsive single-page design. In this course, I'm gonna show you how to build a website with features like navigation that docks and highlights as you move through your projects. Responsive layouts with multiple columns that adjusts to the size of your screen without cluttering your HTML markup. And scrolling effects like tweens that can be controlled by the use of your mouse scroller. We'll start by working with a great template that's the designed to help you process Sass automatically.
And it's easy to read while developing your site. And compress as much as possible when deployed to your server. Then we'll explore how to use the compass framework with Sass. So that we can take advantage of mixins that take care of things like browser prefixes and let you use some of the newest CSS features, like flex box easily. I'll then add Susy 2, a framework that takes the math out of responsive grids. And also breakpoint which makes it easier to handle media queries. Then, I'll use a jQuery framework called ScrollMagic to achieve different types of scrolling effects and show you how to control which features are adequate for mobile devices.
If you learn best by tackling realistic projects, and want to explore some exciting CSS and jQuery features. Then let's get started building a responsive single-page design.
- 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