Build Modern Web Layouts With CSS Flexbox
4.6 (63 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
416 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build Modern Web Layouts With CSS Flexbox to your Wishlist.

Add to Wishlist

Build Modern Web Layouts With CSS Flexbox

Get a hands-on, in-depth look at building CSS Flexbox layouts
Best Seller
4.6 (63 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
416 students enrolled
Last updated 2/2017
English
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 2 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Get a hands-on, in-depth look at building CSS Flexbox layouts.
  • See how you can quickly and easily build even intricate layouts with minimal code.
  • Create flexible, responsive layouts without the need for code hacking or media queries.
View Curriculum
Requirements
  • Students should have a basic understanding of HTML and CSS, and be comfortable coding by hand and navigating through code.
Description

Once upon a time building functional, responsive web layouts required hacking, lots of JavaScript, and more than a few CSS floats. Then came Flexbox, a layout mode for CSS that got rid of all the headaches. This online course will get you up to speed on the latest version, introduce you new even better features, and help you get to grips with Flexbox in a hands-on, practical way.

  Create and Manage CSS Flexbox Layouts 

  • 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

 Learn Fundamental Flexbox Concepts

 This course is intended for those who have a working knowledge of HTML and CSS, and who are comfortable coding by hand and navigating through code. With an emphasis on in-depth, hands-on training, you'll learn the latest techniques for building and managing functional CSS-based web layouts.

 To start off, you'll be introduced to fundamental Flexbox concepts and terminology, as well as the other essential knowledge you'll need to know before going further. From there, the lessons get progressively more hands-on and challenging. You'll cover flex containers, flow axis directions, flex widths, axis spacing and alignment, establishing element flexibility, working with nested flex containers, and more. Each section includes a practical exercise to put your skills to the test, and a quiz to help compound your knowledge.

If you want to push your HTML, CSS and web design skills further, if you want to learn the latest in CSS web layout techniques, or if you just want to know the secret to building responsive, mobile layouts with minimal code, then this online course is a must.

 About Flexbox

 Flexbox, or the CSS Flexible Box, is a layout mode in CSS that allows designers to build and manage website layouts quickly and easily. Arrange each page element and test on different screen sizes (i.e. desktop, mobile, tablet) and display devices to ensure your code behaves accordingly. It was created to replace float and table layout hacks, making life much easier for designers and developers everywhere.

Who is the target audience?
  • This course is suited for students wanting to push their HTML, CSS, and web design skills further.
  • This course is ideal for users who want to discover the latest techniques for building responsive, mobile layouts with minimal code.
  • This course is perfect for web designers who want to learn the latest CSS web layout techniques.
  • This course is targeted towards those who want a hands on approach to learning CSS Flexbox.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
42 Lectures
03:08:31
+
Introduction to the course
1 Lecture 02:24

Discover what this CSS Flexbox course is all about.

Preview 02:24
+
Introduction To CSS Flexbox
6 Lectures 25:16

Discover what you’ll learn in this section.

Introduction
00:27

Find out what Flexbox is all about, and what it can do for you.

Preview 07:37

Find out how well supported Flexbox is in the major browsers.

Flexbox Terminology
05:02

Find out how well supported Flexbox is in the major browsers.

Current Browser Support For Flexbox
09:20

See what tools we’ll need before we start building Flexbox-based web layouts.

Tools We'll Need
02:18

Let’s review what we’ve learned.

Section Summary
00:32

Quiz
5 questions
+
Getting Started With Flexbox
8 Lectures 43:36

See what you’ll learn in this section.

Introduction
00:29

See how easy it is to set up your first parent flex-container.

Creating Our First Flex Container
10:21

Understanding Flexbox Flow Axis Directions
03:41

See how to set Flexbox flow axis directions.

Setting Flow Directions
05:28

Get a handle on how widths work with flex-items.

Preview 11:37

Controlling How Child Flex Items Wrap
07:16

Learn how to code your layouts faster with CSS shorthand.

Shorthand For Faster Coding
04:13

Section Summary
00:31

Quiz
5 questions
+
Controlling Element Alignment
9 Lectures 53:40

Find out what you’ll learn in this section.

Introduction
00:34

Discover how you can adjust spacing and alignments along the main Flexbox axis.

Main Axis Spacing & Alignment
09:28

Vertical Spacing & Alignment
04:46

Margins play an interesting role when spacing and alignments are introduced. Learn how it works.

How Margins Are Impacted By Spacing & Aligning
03:55

See how to align and space apart your flex-items along the flow’s cross axis.

Cross Axis Spacing And Alignment
08:19

Learn how to override Flexbox alignments to set individual flex-item positioning.

Controlling Alignment Of Individual Flex-Items On The Cross Axis
08:06

Get a handle on how to adjust spacing within wrapped Flexbox layouts.

Handling Spacing With Wrapped Flex-Items
06:24

Adjust and control the display order of your flex-items.

Controlling Flex Item Order
11:45

Let’s review what we’ve learned.

Section Summary
00:23

Quiz
5 questions
+
Establishing Element Flexibility
6 Lectures 27:44

Discover what you’ll learn in this section.

Introduction
00:36

See how to set a starting point for your flexible, responsive layout.

Establishing A Flexible Starting Point
07:30

Control how flex-items will adjust and behave when the layout expands to fit larger displays.

Preview 06:25

Determine how flex-items should behave and adjust when displayed on a smaller display.

Determining How Flex Items Will Shrink In Size
06:12

Speed up your work by making use of CSS Flexbox shorthand.

Using Flex Shortcode
06:20

Let’s review what we’ve learned.

Section Summary
00:41

Quiz
5 questions
+
Working With Nested Flex Containers
8 Lectures 30:01

See what you’ll learn in this section.

Introduction
00:38

Getting Set Up For Nested Containers
06:41

Force nested flex-items to wrap on to additional lines, giving a result similar to a photo gallery.

Wrapping Nested Child Flex-Items
03:02

Set nested flex-items to scale and adjust themselves automatically.

Setting Nested Child Flex-Items To Scale
02:59

Set independent sort orders for your groups of nested child flex-items.

Setting Nested Child Flex-Item Display Order
09:33

Test your Flexbox skills with this hands-on project.

Exercise
01:35

See exactly how you can achieve the results in the hands-on project, and how to push it further.
Preview 05:05

Let’s review what we’ve learned.


Section Summary
00:28

Quiz
5 questions
+
Conclusion
2 Lectures 04:36

Learn about how you can take Flexbox even further.

Preview 03:53

Thanks for watching!

Closing Message
00:43
+
Bonus Material
2 Lectures 01:18
Bonus Lecture: Certificate of Completion
01:04

Bonus Lecture: Course Discounts
00:14
About the Instructor
Stone River eLearning
4.2 Average rating
17,160 Reviews
285,086 Students
203 Courses
280,000+ Happy Udemy Students

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 450,000 students currently taking Stone River eLearning courses. We currently offer 100+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.