Learn how to work with new CSS features using PostCSS and cssnext to make them backwards compatible with older browsers. Use custom variables, nesting, advanced pseudo-classes, reduced variables in calculations, and more.
- [Instructor] Before we get started,…let's take a look at some of the features…that we're going to be working with in this project.…At first glance, this is a pretty simple,…single-page design that is designed in a responsive manner,…so you can see that as I make the window bigger and smaller,…these fonts will change in size…and the layout will change a little bit,…so if I get to a mobile website,…you can see that the navigation shifts over to the right…and the navigation links stack up.…I'm doing this using Flexbox to manage all the layouts.…
Notice that some of the text disappears at the smaller size.…There are some animations that will play as well as videos.…The animations do not play on the mobile size…but will play at a larger size.…You can see the animations coming in from the right…on this particular feature,…and when we go over to the next feature,…the animation doesn't play until…we scroll to a certain point…and the animation's coming in from the other side.…
Each feature uses a combination of SVG…with some built-in video…
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos
Skill Level Advanced
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. Getting Started
2. Headers and Footers
3. Featured Content
Next steps1m 6s
- 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.