Flexbox Course

£199.00

Our ‘Flexbox Course’ is here to get you up to speed with the latest version of Flexbox, and get you to grips with it in a practical, hands-on way! 

Learn how to develop flexible, responsive layouts without code hacking or media queries, gain a new perspective on CSS and web development and much more.

Sign up now! 

Category:

Our ‘Flexbox Course’ is here to get you up to speed with the latest version of Flexbox, and get you to grips with it in a practical, hands-on way! 

Learn how to develop flexible, responsive layouts without code hacking or media queries, gain a new perspective on CSS and web development and much more. You will learn the fundamental Flexbox terminology and concepts, and other essential knowledge.

Our 3.5 hours long online course is here to introduce you to the new and even better features of Flexbox, and up your skillset for your current or future career! 

This course will:

  • Take an in-depth look at building CSS Flexbox layouts
  • Build intricate layouts with minimal code, quickly and easily
  • Develop flexible, responsive layouts without code hacking or media queries
  • Control flex spacing, alignments and positioning
  • Gain a new perspective on CSS and web development

What will I learn? 

Starting off you will be introduced to the essential knowledge you need before going further and learn about the fundamental Flexbox terminology and concepts. 

From there we will cover flex containers, flow axis directions, flex widths, axis spacing and alignment, establishing element flexibility, working with nested flex containers, and more. 

A practical exercise to put your skills to the test, alongside a quiz to help compound your knowledge is included in each section. 

Who is this course for? 

This course is for those who ideally have working knowledge of CSS & HTML, and are comfortable to navigate through code and code by hand. 

This course is for anyone who wants to push their web design, CSS, and HTML skills further! 

If you want to know all of the secrets of how to build a responsive mobile layout (with minimum code), and learn the latest in CSS web layout techniques, then this course is for you. 

About Flexbox

Flexbox is a layout mode in CSS, that lets you manage website layouts quickly and easily. Flexbox allows you to arrange each page element and test it on different screen sizes (tablet, mobile, desktop) and lets you display devices to ensure that your code behaves accordingly.

Flexbox was designed to make life easier for designers and developers everywhere, and was created to replace float and table layout hacks.

Sign up now and become a Flexbox expert!

What’s Included?

Wiki_tick  Unlimited lifetime access
Wiki_tick  Access anywhere, any time
Wiki_tick  Fast effective training, written and designed by industry experts
Wiki_tick  Unlimited support
Wiki_tick  Save money, time and travel costs
Wiki_tick  Learn at your own pace and leisure
Wiki_tick  Easier to retain knowledge and revise topics than traditional methods

£199.00Add to cart

Modules

Introduction to the course

Course Introduction (2:24)

Introduction To CSS Flexbox

Section Introduction (0:27)
Understanding Flexbox Improved Web Layouts (7:37)
Flexbox Terminology (5:02)
Current Browser Support For Flexbox (9:20)
Tools We’ll Need (2:18)
Section Summary (0:32)

Getting Started With Flexbox

Section Introduction (0:29)
Creating Our First Flex Container (10:21)
Understanding Flexbox Flow Axis Directions (3:41)
Setting Flow Directions (5:28)
Understanding Flex Widths (11:37)
Controlling How Child Flex Items Wrap (7:16)
Shorthand For Faster Coding (4:13)
Section Summary (0:31)

Controlling Element Alignment

Section Introduction (0:34)
Main Axis Spacing & Alignment (9:28)
Vertical Spacing & Alignment (4:46)
How Margins Are Impacted By Spacing & Aligning (3:55)
Cross Axis Spacing And Alignment (8:19)
Controlling Alignment Of Individual Flex-Item (8:06)
Handling Spacing With Wrapped Flex-Items (6:24)
Controlling Flex Item Order (11:45)
Section Summary (0:23)

Establishing Element Flexibility

Section Introduction (0:36)
Establishing A Flexible Starting Point (7:30)
Determining How Flex Items Will Increase In Size (6:25)
Determining How Flex Items Will Shrink In Size (6:12)
Using Flex Shortcode (6:20)
Section Summary (0:41)

Working With Nested Flex Containers

Section Introduction (0:38)
Getting Set Up For Nested Containers (6:41)
Wrapping Nested Child Flex-Items (3:02)
Setting Nested Child Flex-Items To Scale (2:59)
Setting Nested Child Flex-Item Display Order (9:33)
Excercise (1:35)
Exercise Solution (5:05)
Section Summary (0:28)

Conclusion

Resources (3:53)
Closing Message (0:43)