Egghead Instructor Garth Braithwaite

Garth Braithwaite

Front End Developer at Adobe working on the PhoneGap team.



Unlock all of Garth's PRO Lessons
click for instant access!

Browse Garth Braithwaite's lessons.

showing 11 lessons...

Using Flexbox in Websites and Applications

P

Turning a flexbox into a grid using flex-wrap and align-content

P

Combining the flexbox sizing properties using the flex shorthand

P

Using flex-shrink and flex-grow to make flexbox children resize correctly

P

Defining dimensions on flexbox children using flex-basis

P

Demystifying alignment in flexbox children

P

Using order to rearrange flexbox children

P

Using flex-direction to layout content horizontally and vertically

DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

Form Pseudo Classes :focus :disabled :checked :invalid :required

Interactive Pseudo-Classes :link :visited :hover :active

css tutorial about Using Flexbox in Websites and Applications

Using Flexbox in Websites and Applications

3:29 css PRO

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

css tutorial about Turning a flexbox into a grid using flex-wrap and align-content

Turning a flexbox into a grid using flex-wrap and align-content

1:47 css PRO

Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.

css tutorial about Combining the flexbox sizing properties using the flex shorthand

Combining the flexbox sizing properties using the flex shorthand

1:39 css PRO

The flex shorthand makes it easier to declare flex-shrink, flex-grow, and flex-basis, but it sometimes has unexpected results because the defaults differ.

css tutorial about Using flex-shrink and flex-grow to make flexbox children resize correctly

Using flex-shrink and flex-grow to make flexbox children resize correctly

2:36 css PRO

Flex-basis lets us set the ideal dimensions for a flexbox child, but flex-shrink lets us define what should happen if there isn't enough room, and flex-grow can define what happens when there is too much room.

css tutorial about Defining dimensions on flexbox children using flex-basis

Defining dimensions on flexbox children using flex-basis

1:38 css PRO

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

css tutorial about Demystifying alignment in flexbox children

Demystifying alignment in flexbox children

3:35 css PRO
css tutorial about Using order to rearrange flexbox children

Using order to rearrange flexbox children

1:17 css PRO

Using the order property we alter the order in which flexbox children appear on the page, without making changes to the dom.

css tutorial about Using flex-direction to layout content horizontally and vertically

Using flex-direction to layout content horizontally and vertically

2:05 css

The Flexbox css spec allows for more adjustable layouts. The flex-direction property allows you to easily change the layout on the children of an element without making any changes to the dom, which is particularly useful when combined with media queries.

css tutorial about DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

3:00 css

DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use :nth-child to target custom element patterns, like every other element.

css tutorial about Form Pseudo Classes :focus :disabled :checked :invalid :required

Form Pseudo Classes :focus :disabled :checked :invalid :required

4:00 css

Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without frustration.

css tutorial about Interactive Pseudo-Classes :link :visited :hover :active

Interactive Pseudo-Classes :link :visited :hover :active

4:33 css

The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what elements on the page are interactive and that they can use them to navigate the website.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?