Join Ray Villalobos for an in-depth discussion in this video Finishing your layouts, part of Building a Responsive Single-Page Design with Sass.
We have just a couple of simple layouts to finish up.…First off, we've got this Local Attractions section and…then we've got the footer.…We'll go ahead and take care of Local Attractions first.…That section is all the way down here at the end, right before the footer.…You can see that underneath main, we have this section called Attractions.…And it's pretty easy.…Barely.…any content just an article with a headline and a paragraph.…And of course, it's got the class of scene.…Also the class of fullheight that's actually why it's showing up so…large over here with no content.…
And then an id of attractions.…So we need to open that sass file up > sass > modules > attractions.…Right now it's empty.…And it's going to be pretty much like what we've been doing before.…So, attractions and what we'll do is include a clear fix.…That's going to prevent any errors from happening with the next section.…Otherwise, when you do kind of floating effects, the other sections tend…to kind of come up and be on top of some of this content here.…
- 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.