Bucket List for CSS

Watch User Created Playlist (20)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

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

P

CSS Media Queries

CSS Display Property: Block, Inline-Block, and Inline

P

CSS Transitions: Easing and Other Timing Functions

P

CSS :not Selector

P

CSS Transitions: Delays and Multiple Properties

Introduction to CSS Transitions

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

Basic CSS Selectors

Flexbox Fundamentals

Defining dimensions on flexbox children using flex-basis

P

Demystifying alignment in flexbox children

P

Using order to rearrange flexbox children

P

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

P

Combining the flexbox sizing properties using the flex shorthand

P

CSS :target Selector

P

Using CSS Combinators to Identify Siblings and Descendants in CSS

P

Using flex-direction to layout content horizontally and vertically

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 CSS Media Queries

CSS Media Queries

5:05 css

Using CSS media queries allows you to design responsive layout in your web apps and website. We will go over the media query basics in this lesson.

css tutorial about CSS Display Property: Block, Inline-Block, and Inline

CSS Display Property: Block, Inline-Block, and Inline

2:51 css PRO

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest.

css tutorial about CSS Transitions: Easing and Other Timing Functions

CSS Transitions: Easing and Other Timing Functions

3:55 css PRO

Learn how to apply timing functions to CSS transitions. We'll talk about pre-defined functions like 'ease-in', 'ease-out' and 'step', and then look at how to specify a custom function capturing the exact transition effect you're looking for.

css tutorial about CSS :not Selector

CSS :not Selector

0:53 css PRO

The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this example we refactor two selectors down to one using the CSS :not() selector.

css tutorial about CSS Transitions: Delays and Multiple Properties

CSS Transitions: Delays and Multiple Properties

3:33 css

Learn how to spice up your CSS Transitions using delays and compound transition rules that specify independently varying rules for transitions to multiple properties on the same object.

css tutorial about Introduction to CSS Transitions

Introduction to CSS Transitions

2:27 css

Learn how to use native CSS transitions to automagically add motion to your application. By specifying a simple transition rule, changes to the values of specific properties can be interpolated over time to give a graceful, polished look and feel to what used to be a jarring and sudden transition.

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.

css tutorial about Basic CSS Selectors

Basic CSS Selectors

2:23 css

The first step to styling a website or application is correctly defining CSS selectors. Garth breaks down the anatomy of a basic CSS ruleset to lay the foundation for more complex selectors.

css tutorial about Flexbox Fundamentals

Flexbox Fundamentals

9:55 css

In this lesson we'll look at all of the properties available to us with the CSS3 Flexible Box, or flexbox.

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 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 CSS :target Selector

CSS :target Selector

1:52 css PRO

The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

css tutorial about Using CSS Combinators to Identify Siblings and Descendants in CSS

Using CSS Combinators to Identify Siblings and Descendants in CSS

4:37 css PRO

CSS combinators allows us to reference the DOM relationship between two or more elements in CSS.

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.

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