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 20 lessons...

Inform the User of Interactions with CSS Transitions

Use Media Queries to Make an Existing Application Responsive

Draw Simple Icons with CSS

Reduce Ambiguity in Class Names using a Naming Convention

Understand Semantic Markup in relation to CSS

Style a Form with Plain CSS

Use CSS to Inform Users of Interactivity

Keep Styles Portable and Maintainable with Basic Classes

Prep HTML for Styling with Flat Class Names

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 Inform the User of Interactions with CSS Transitions

Inform the User of Interactions with CSS Transitions

3:33 css

Animations and transitions, when used appropriately, can help inform users how they are interacting with an application and how the user interface is responding. This video takes a simple example of adding a transition to this React/Redux application using React's CSSTransitionGroup.

css tutorial about Use Media Queries to Make an Existing Application Responsive

Use Media Queries to Make an Existing Application Responsive

4:17 css

If you have an existing desktop-friendly application you can make it mobile-friendly as well using responsive design and media queries.

css tutorial about Draw Simple Icons with CSS

Draw Simple Icons with CSS

3:12 css

Using pseudo-elements like ::before and ::after we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.

css tutorial about Reduce Ambiguity in Class Names using a Naming Convention

Reduce Ambiguity in Class Names using a Naming Convention

5:54 css

A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a variation of the BEM (Block Element Model) naming convention. OOCSS and SMACSS offer similar methodologies. I also use the class attribute selector to target multiple modifier classes.

css tutorial about Understand Semantic Markup in relation to CSS

Understand Semantic Markup in relation to CSS

3:43 css

Although it is possible to use javascript and CSS to make a div or span act like any other element, there are a lot of advantages to starting with semantic markup. It helps keep code readable, making it easier to maintain, and it is a big part of making our project more accessible to devices like screen readers. In this video, I replace generic markup with something that is closer to the expected functionality to make it more semantic. I'm also using a variation of the BEM (Block Element Model) naming convention for CSS class names.

css tutorial about Style a Form with Plain CSS

Style a Form with Plain CSS

5:57 css

Forms and interactive DOM elements are the fundamental building blocks of an application, but that doesn't mean they need to look like every other form on the web. In this lesson, I'm styling a simple input form to drastically change the way it appears without making any unnecessary changes to the DOM itself.

css tutorial about Use CSS to Inform Users of Interactivity

Use CSS to Inform Users of Interactivity

4:34 css

There are certain cues that users are looking for to be informed that elements are interactive, like hover states and cursor changes. In this video, I make a list of radio button labels easier to identify as interactive and style them to react to user behavior.

css tutorial about Keep Styles Portable and Maintainable with Basic Classes

Keep Styles Portable and Maintainable with Basic Classes

3:28 css

Although it is possible to target just about any DOM element with complex CSS selectors, it is important to reduce specificity to make CSS easy to override if needed. The best way to do this is with single classes for each stylable element. In this video, I add some basic classes to the fundamental React generated DOM elements.

css tutorial about Prep HTML for Styling with Flat Class Names

Prep HTML for Styling with Flat Class Names

6:35 css

In this course, I'm showing the process of styling an app from start to finish. In this video, I'm changing the basic HTML to make it easier to style by using flat class names. I'm also starting the basic styling of the html and body elements that sets the foundation for the rest of the application styles.

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?