Skip to content
UdemyWeb DevelopmentPaid courseAll LevelsCertificate

Build Modern Web Layouts With CSS Flexbox (Udemy.com)

Get a hands-on, in-depth look at building CSS Flexbox layouts

Created by: Stone River eLearning

Last updated February 2017

icon
What you will 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.

How it compares

Against the other 815 rated Udemy courses in Web Development on CourseDuck:

  • Rating4.4 out of 5higher than 33% of them
  • Reviews135#583 of 816 by number of reviews
  • Length3.1 hoursshorter than 78% of them
  • Last updatedFebruary 2017earlier than 97% of them

icon
Course 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.

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Stone River eLearning

At Stone River eLearning, we teach IT, programming, development, business and soft skills - we have it all covered.

Check out our huge catalog of courses and join the over 4.2M students currently taking Stone River eLearning courses. We can provide all or part of this catalog to any business via API connection, or you can get Solara LMS completely free for up to 10 users.

icon
More courses by Stone River eLearning

$59.99

$64.99

$64.99

Free

$15.99

$44.99

icon
More Web Development courses

$19.99

$89.99

$89.99

$79.99

$10.99

$84.99

icon
Reviews

4.4

135 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Richard Gutierrez on 10/17/2019

This has been really great so far. I sort of skipped form HTML and CSS to React and never learned FlexBox. I'm not a coder either but my new job uses a lot of flex box and so it has some implications for design that I can set up so it can be easier for devs to replicate my designs. This course is helping me get there. Thanks!

By B. Comusi on 6/13/2019

Absolutely fantastic course! The instructor did a superb job keeping the instruction on point throughout. His voice, tempo and cadence are excellent and easy to follow. In this relatively brief course, I now have a strong grasp of Flexbox and the concept of it. I will need to do more work on the "nested" section of the content; but hopefully that will come with more time and effort from myself. Thank you for this excellent introduction into Flexbox.

By Donna Sander on 5/13/2019

long intro, didn't care about all that, you talk about yourself a LOT. Terminology went VERY slow also...maybe pictures would just speed it along some. Just my personal opinion. Not bad though...just not great. After getting through a few lessons, it still runs a little slow for me, ...but I'm learning, so it's good I guess. One part I was VERY dissapointed with was the explanation of flex-grow. You do realize you are teaching programmers here, yes? Blowing over stuff you either can't explain, or don't know the answer to, just doesn't cut it. So, for those who want to the answer to the question "how much" does the number affect the grow amount 'exactly' ? ...the answer is here: https://css-tricks.com/flex-grow-is-weird/ (very good pictorial explanation) I am well past 1/2 way...and this course is really dragging...it's taking a very long time to get through some rather basic information. But...when I registered, it was the only flexbox tutorial, so I'm going to finish it, ...no matter what. :-( OK, finished. It took like 12 hours to get through the videos, doing very little 'side play' ...but you get a 3 hour cert at the end...wow. ?? Something doesn't balance out here. But I do know flexbox now ...that's good.

By Jeff Easlick on 4/12/2018

I believe that this instructor could teach anything with excellent results. He speaks at a pace that is easy to follow, he explains everything, using just the right amount of repetition. He presents the material in a systematic fashion, building on each new concept. He makes sure that the student can keep up with the coding for each flexbox example. I would recommend this instructor and this course to anyone who wants to begin the process of learning flexbox.

By Byron Minick on 10/18/2017

This course promises to teach people how to "Build Modern Web Layouts With CSS Flexbox" as shown on the course introduction page. However, what we predominately learned how to do is to put colored boxes (elements) either in a single row or a column. Even more, this looks nothing like the advertised layout on the front of the course introduction! Personally, I don't feel that this course prepared me for doing layout work for a website.

By Kent S on 10/9/2017

An amazing course. Short and sweet. Straight to the point. I think it helped a little that I came in with CSS experience already, but regardless, the information presented was very helpful. I felt I learned what flexbox is, and how it works. The instructor's pace was excellent in my opinion, and the explanations were clear. Also, I felt he was very polite in his delivery, and as a result, very encouraging. I recommend this course to anyone interested in wanting to improve on their css skills. (very basic course, but still, worth your while if you've never used flexbox before)

By Ray Pelland on 5/21/2017

I appreciate the author starting off by creating a clear contextual overview of the topic he or she is going to teach - before they start providing the details. That context gives me conceptual "boxes" where I can start storing those coming details in terms of how they can help me solve my overall design problem. Even when I already know something about a topic and have experimented a bit it's good to hear an experienced person's views on just what that higher level context looks like to them now that they've become an expert. Just half way through this course I now know several things about Flexbox that I had not really grasped. That's even though I have incorporated Flexbox in several pages of the web app I'm currently building.

By Scott Kilbourn on 3/31/2017

I really enjoyed this class. It was very informative without being overly long. Coming into it, I had no idea what flexbox was. Now I understand enough about it to redo one of my awful float websites in flex. It took less than five minutes to redesign it. I can highly recommend this course to anyone who wants to know more about this subject. The instructor was very knowledgeable and did a great job of clearly explaining the subject manner. I will be looking at more courses by this group and instructor in the future.

By Daniel Cornwall on 2/9/2017

It's time to use Flexbox. It provides an effective way to create layouts and the browsers are ready. Finally, no more headaches caused by the alignments and the position of some elements. With this course you will learn Flexbox properly. Very well structured, great explanations and clear examples. There is just one issue: the resolution of the computer used by the teacher is slightly high in some videos and the letters are tiny. Anyway, it's not a big problem, you can follow the explanations.

By Darcy Cardinal on 2/5/2017

Thanks for this AWESOME course! As most who have worked with CSS/HTML we know that working with floats can be a hit or miss, trial and error when it comes to layouts. With Flexbox, that suddenly all changes for the better. Instructor was clear and was not too fast with the course material. Certificate earned!

Showing all 10 reviews on CourseDuck

Read all 135 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 88 / 100