Egghead Instructor Damon Bauer

Damon Bauer

Front End Developer from Nashville, TN. Pretend woodworker. Mountain bike poseur. Coffee snob.



Support Damon's Free Lessons
become a member today

Browse Damon Bauer's lessons.

showing 11 lessons...

Combine Objects with Object.assign and Lodash merge

Easily Reset Styles With a Single CSS value

Conditionally Apply Styles Using Feature Queries

Dynamically Size Elements with Pure CSS

Target Positional Elements Using *-Of-Type CSS pseudo-classes

Manipulate Images Using CSS Filter and Blend Modes

Control Image Aspect Ratio Using CSS

Target empty elements using the :empty pseudo-class

Create a fixed-fluid-fixed layout using CSS calc()

Layout Responsive Fluid Columns Using CSS

Manipulate the DOM with the classList API

js tutorial about Combine Objects with Object.assign and Lodash merge

Combine Objects with Object.assign and Lodash merge

2:28 js

Learn how to use Object.assign to combine multiple objects together. This pattern is helpful when writing libraries that have a set of default options where you want to allow a user to override specific options. You'll also learn how to use a third party library to recursively merge nested objects together.

css tutorial about Easily Reset Styles With a Single CSS value

Easily Reset Styles With a Single CSS value

1:13 css

There are times where you need to reset a an element’s styles. Instead of overwriting it with even more style declarations, you can simply reset them.

css tutorial about Conditionally Apply Styles Using Feature Queries

Conditionally Apply Styles Using Feature Queries

3:00 css

While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide different sets of styles depending on a browser’s support for them. Learn how to use CSS feature queries without JavaScript.

css tutorial about Dynamically Size Elements with Pure CSS

Dynamically Size Elements with Pure CSS

2:57 css

Learn how to size elements based on the dimensions of the viewport, even when the browser is resized - no JavaScript needed!

css tutorial about Target Positional Elements Using *-Of-Type CSS pseudo-classes

Target Positional Elements Using *-Of-Type CSS pseudo-classes

2:43 css

Learn how to target elements based on their position inside of a parent element in relation to its siblings.

css tutorial about Manipulate Images Using CSS Filter and Blend Modes

Manipulate Images Using CSS Filter and Blend Modes

2:24 css

Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of time spent back and forth between designers and developers.

Here's more information about filter, blend-mode, and mix-blend-mode.

css tutorial about Control Image Aspect Ratio Using CSS

Control Image Aspect Ratio Using CSS

2:14 css

Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.

css tutorial about Target empty elements using the :empty pseudo-class

Target empty elements using the :empty pseudo-class

0:58 css

You can target an element that has no child elements by using the :empty pseudo-class. With browser support down to IE9, it's solid, easy way to select empty elements without any additional markup.

Be aware that whitespace is considered a "child", so :empty will not work if the element has no children, but has space between the opening and closing tags.

css tutorial about Create a fixed-fluid-fixed layout using CSS calc()

Create a fixed-fluid-fixed layout using CSS calc()

0:59 css

CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you need to size elements but you have some unknown number that you have to account for.

css tutorial about Layout Responsive Fluid Columns Using CSS

Layout Responsive Fluid Columns Using CSS

3:03 css

Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.

Notes:

  • column-width operates like min-width, not width. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so.
  • column-span enables a specific element to ignore column-count and column-width. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the columns applied to it. That way, it remains outside of the automatic column flow.
  • column-fill allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference this browser support chart.
js tutorial about Manipulate the DOM with the classList API

Manipulate the DOM with the classList API

3:26 js

Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencies.

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