Build Modern Web Layouts With CSS Flexbox

Discover the ins and outs of building CSS Flexbox layouts with this hands-on course! Learn to create responsive designs easily.

  • Overview
  • Curriculum
  • Instructor
  • Review

Brief Summary

This online course is your ticket to mastering CSS Flexbox! Perfect for those who know HTML and CSS and want to create stunning, responsive layouts without all the fuss. Dive into hands-on exercises and quizzes that make learning easy and fun!

Key Points

  • Hands-on practical training on CSS Flexbox.
  • Learn to build responsive layouts with minimal code.
  • Get familiar with essential concepts and terminology.

Learning Outcomes

  • Understand the core concepts of Flexbox.
  • Create flexible layouts efficiently.
  • Test designs on multiple devices for responsiveness.

About This Course

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

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.

  • 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.

Instructor

Profile photo of Stone River eLearning
Stone River eLearning

At Stone River eLearning, technology is all we teach. If you're interested in IT, programming, development, business or soft skills - we have it covered. Check out our huge catalog of courses and join the over 3.2M students currently taking Stone River eLearning courses. We can provide all or part of this catalog to any business via API connection, or...

Review
4.9 course rating
4K ratings
ui-avatar of Chuck Coughlin
Chuck C.
3.5
3 years ago

Hard to hear when he is speaking on intros

  • Helpful
  • Not helpful
ui-avatar of David Goodman
David G.
5.0
5 years ago

I am learning a lot at an appropriate pace.

  • Helpful
  • Not helpful
ui-avatar of Richard Gutierrez
Richard G.
5.0
5 years ago

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!

  • Helpful
  • Not helpful
ui-avatar of B. Comusi
B. C.
5.0
6 years ago

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.

  • Helpful
  • Not helpful
ui-avatar of Donna Sander
Donna S.
3.0
6 years ago

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.

  • Helpful
  • Not helpful
ui-avatar of Jason Dodd
Jason D.
4.5
6 years ago

Good course covers all the basics in an easygoing style.

  • Helpful
  • Not helpful
ui-avatar of Ricardo Manenti
Ricardo M.
4.0
7 years ago

The course is really good as a starting point to understand flexbox. The teacher knows his way around and creates a concise tutorial. However, a real world example as a final compound of all that is shown during the course would be most welcome.

  • Helpful
  • Not helpful
ui-avatar of Jeff Easlick
Jeff E.
5.0
7 years ago

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.

  • Helpful
  • Not helpful
ui-avatar of Eddie Webber
Eddie W.
5.0
7 years ago

Great information presented in a concise, very understandable delivery. Top notch!

  • Helpful
  • Not helpful
ui-avatar of Luis Enriquez
Luis E.
5.0
7 years ago

The pace is good and the concepts are very clear. The instructor makes sure there are no mixups in the definitions and terminology used.

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published. Required fields are marked *

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses