Join Carrie Dils for an in-depth discussion in this video Adding a hero section, part of Responsive CSS Workflow with Sass, Bourbon, and Susy.
- [Instructor] The next thing I want to do here…is add a hero section underneath my header,…and to do that I've already got a bit of HTML ready to go,…and this will be available to you…as your exercise files as well.…So I'm going to go ahead and copy that,…and I'll paste it into my document here.…Let's fix the alignment.…Now, let's walk through exactly what's going on here.…So I've got my section, and I've given it a class of hero,…and inside of that, I've got this class called wrap,…and I'll tell you why I do that.…
That's so that this outer class can span full width,…and this inner class of wrap can go ahead…and keep the content wrapped at a smaller width…in the middle of the screen.…And as we start putting some styles on this,…that'll make more sense, but I did want to point it out,…and also I totally forgot to do that…when I was scaffolding the header and the footer,…so let's go back and add that in.…So right inside of my header class I'm going to add that wrap.…We'll scoot this over.…
And then right before my ending header class,…
- Reviewing what Sass is and how it works
- Analyzing workflow options
- Setting up a folder structure
- Adding version control
- Working with package managers
- Setting up a workflow with Grunt
- Scaffolding HTML
- Modularizing a Sass with partials
- Creating a color palette with variables
- Using Font Awesome
- Creating a mobile-first layout
Skill Level Intermediate
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
CSS to Sass: Converting an Existing Sitewith John Riviello2h 31m Intermediate
1. Getting Started
2. Working with Package Managers
3. Setting Up a Workflow with Grunt.js
4. Scaffolding Your HTML
5. Sass Principles
6. Styling with Sass and Bourbon
7. Responsive Layout Grids with Susy
- 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.