The Flexbox Module is one of the newest features of CSS3, and in my opinion one of the best. The ability to layout web pages without having to use floats and the CSS Box Model, takes much of the aggravation of CSS page layout away. Flexbox Concept. The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fit in the available space on any display device. ... Block layout is vertically-biased; inline layout is horizontally-biased. Flexbox module layout permits both. It is a great addition to CSS3 and the module has support of over 98% of the browsers currently in use, and growing stronger daily.
This course consists of almost 10 hours of HD video recorded in 1280x720 format. There are 5 sections, 36 chapters, and 9 projects to the video series. It is recoded in mp4 format so it can be viewed on your portable devices as you work through the exercises.
This video series covers all the properties and values associated with the Flexbox Module and then takes you step-by-step as we build 9 projects using Flexbox, CSS, HTML and Media Queries. This is an excellent source of information for anyone wanting to learn the newest techniques in laying out web pages and working with responsive design using Flexbox and Media Queries.
A complete section listing of the topics covered and a brief description of each chapter is listed below.
As with all my courses this course also includes all the slide presentations that I use throughout the training. The presentation are included in PDF format so that you can follow along with the discussions and make notes on the slides as you work through the training. I also include all the exercise files for the application and I have made a property and value cheat sheet for the Flexbox module included with the course.
A complete Chapter Listing is listed below.
A basic understanding of HTML and CSS would be helpful while completing these exercises. I do take you step by step through them, but there are a lot of concepts covered.
Mastering the CSS3 Flexbox Module
Section 1 - Introduction
|Browser Support for Flexbox||8:09|
|Tools for Developing Flexbox Web Pages||4:36|
Section 2 - Beginning the Flexbox Module
|Our First Flex Container||16:43|
|Wrapping Items with Flexbox||13:32|
|Spacing and Aligning in Flexbox||15:37|
|Vertical Spacing in Flexbox||9:12|
|Working with Margins||9:33|
|Cross Axis Spacing||13:05|
|Aligning Individual Items||8:57|
|Spacing Wrapped Items||13:03|
|The Order Property||14:37|
Section 3 - View Port Responsiveness
|Understanding Flex Basis||13:24|
|Understanding Flex Grow||14:00|
|Understanding Flex Shrink||12:51|
|Using Shorthand Notation||9:53|
|Project 1 - Part 1||28:42|
|Project 1 - Part 2||26:29|
Section 4 - Nesting Flex Items
|Getting Started Nesting Items||13:37|
|Wrapping Nested Child Items||13:34|
|Working with Display Order||20:26|
Section 5 - Flexbox Projects
|Card with Multiple Images||24:37|
|Image Gallery with Flip Effect||37:24|
|Item Cards with Grow Transition||27:06|
|Building a Grid System - Part 1||19:51|
|Building a Grid System - Part 2||26:42|
|Media Objects using Flexbox||21:59|
|Working with Form Elements||23:35|
|Building a News / Information Site - Part 1||41:11|
|Building a News / Information Site - Part 2||17:51|
Accepts credit cards whether you have PayPal account or not. PayPal acts as the gateway to get your purchase completed quickly. It is fast, convenient and secure.
PayPal is trusted by over 190 million users around the world. This gives you peace of mind throughout the purchasing process knowing your payment will be made quickly and your information is secure.