g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Review - Flexbox Courses on Skillshare

Are you interested in Flexbox. In this article, I review two Skillshare courses that cover the same topic, the basics of Flexbox properties. As with other CSS3, you need a foundation of the CSS properties and values before you can start building websites with Flexbox.

CSS: Flexbox Fundamentals
Ismail Raji, Software Engineer, Web Developer and Instructor
Duration: 11 minutes

In this 11 minute course, Ismall Raji discusses the Flexbox propertis. Of course, this is not an in depth course but a quick summary and demonstration of the properties. Ismall uses a split view html editor to demonstrate each Flexbox property and their values. He then discusses how to use Flexbox without any media queries for responsive web design. Finally, he sends his viewers to Flexbox Froggy, a Flexbox online game.

CSS Flexbox: The Complete Class
Peter Sommerhoff, Learn coding without the fluff!
Duration: 2 hours

In this two-hour long Skillshare course, Peter Sommerhoff walks you through the basic Flexbox properties, the new and improved CSS3 for controlling the layout of your webpages and website.

Peter begins with an introduction of just what Flexbox is, how it can make your CSS coding much easier and the current browser support. Peter supplies one download zip containing one HTML, one JPG and two CSS files. He discusses the purpose of each. He then begins with a simple example of adding and styling a container box with four divs inside.

Using this example, Peter discusses the main properties for the Flex container, including flex-direction and justify-content and how they work better than the old CSS properties. He finishes with the suggestion of an online game, Flexbox Froggy, which will give you some practice using these properties. He refers back to this game several times throughout the course.

Moving on to other properties, Peter discusses the flex align-items, flex-wrap and flex-flow properties, which control the placement of each div in the container. He demonstrates each value option, showing the flexibility of Flexbox. Next, we learn how to control the behavior of rows inside the container, using the flex item properties - order, align-self and stretch.

Before discussing the three project examples, Peter discusses the three most important properties for responsive websites, which are the flex-grow, flex-shrink and flex-basis properties. The flex-grow and flex-shrink properties tell the divs in the container to grow/shrink to fill the container. But he also discusses how to control the grow/shrink amount for each individual div.

Once you've covered all the properties, you are ready to take a look at some examples. Peter begins with a simple gallery example and moves on to a more flexible gallery solution. He also discusses the vertical centering of content inside the divs and adding media objects. Finally, he covers the Holy Grail of layouts, which is a header at the top, content area between two sidebars in the center and a footer. He demonstrates how easy this layout is to markup with Flexbox.

Skillshare Course Reviews

Disclosure: As a participant in the Skillshare affiliate program, some of the links in this article are affiliate links. However, my opinions are completely my own based on my experience.

Add Review+%2D+Flexbox+Courses+on+Skillshare to Twitter Add Review+%2D+Flexbox+Courses+on+Skillshare to Facebook Add Review+%2D+Flexbox+Courses+on+Skillshare to MySpace Add Review+%2D+Flexbox+Courses+on+Skillshare to Del.icio.us Digg Review+%2D+Flexbox+Courses+on+Skillshare Add Review+%2D+Flexbox+Courses+on+Skillshare to Yahoo My Web Add Review+%2D+Flexbox+Courses+on+Skillshare to Google Bookmarks Add Review+%2D+Flexbox+Courses+on+Skillshare to Stumbleupon Add Review+%2D+Flexbox+Courses+on+Skillshare to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
How to Post Video to Instagram

Social Media Post Images & PSE Organizer

Photoshop Elements Color Overlay

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor