logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Florida
Cosmetics
Distance Learning
Reading
Crochet
Marriage
Cooking for Kids


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
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


g features
Rebelle Stencil Feature and Digital Watercolors

Review - Digital Illustration Basics: Painterly

SketchBook Pro Review - The Price & Resources

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor