Join Ray Villalobos for an in-depth discussion in this video Preparing your header, part of Building a Responsive Single-Page Design with Sass.
In the last video, we implemented our first mixin.…In this video, we're going to flush out the rest of our header.…And right now, it doesn't look very good.…You can see that it's definitely not like what the final project looks like.…We're going to get it pretty close.…So what we're going to do is first make sure that our server is running.…If you don't have the gulp command running,…make sure that you pull up your Terminal or your Git Bash application,…and you run the gulp command in the folder where the workflow is.…And then you can go over here and start working on things.…
So what I'm going to do is inside full height,…I'm going to add some more element here.…And they're going to correlate to the items that are in build and…then in development in the index.html file.…If you look at that, you'll know that I have this header section and…that has this article right here, that has a class of full height.…This is right now where we are.…It's also got this navigation, which we're not going to worry about just yet.…
- 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.