[_done20160226] css

Watch User Created Playlist (25)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Get up and running with CSS Grid Layout

P

Describe a grid layout using named grid lines

P

Create a tab component using vanilla CSS

P

Conditionally Apply Styles Using Feature Queries

P

Creating visual skip links in HTML and CSS

P

Manipulate Images Using CSS Filter and Blend Modes

P

Reuse Flexbox Styles With A Sass Mixin

P

Use Generated Content to Augment Information

P

Use CSS Counters to Create Pure CSS Dynamic Lists

P

Create CSS Selectors in Chrome DevTools from Selection

P

Focus management using CSS, HTML, and JavaScript

P

Targeting Elements with CSS Attribute Selectors

P

Using CSS Combinators to Identify Siblings and Descendants in CSS

P

CSS :target Selector

P

CSS Media Queries

P

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

P

CSS :not Selector

P

CSS Transitions: Easing and Other Timing Functions

P

CSS Transitions: Delays and Multiple Properties

P

Introduction to CSS Transitions

P

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

P

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

P

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

P

Flexbox Fundamentals

P
css tutorial about Get up and running with CSS Grid Layout

Get up and running with CSS Grid Layout

2:15 css PRO

We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then, let’s jump in at the deep end by putting together a simple grid layout in a flash.

CSS Grid Layout will not work unless upgrading
The Grid Layout is a new feature in CSS coming in Firefox 52 and Chrome 57.

Another option to enable the Grid Layout is to enable the Experimental Web Platform features flag in chrome://.

css tutorial about Describe a grid layout using named grid lines

Describe a grid layout using named grid lines

4:45 css PRO

We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-template-columns and grid-template-rows, and how to refer to these from our grid items.

css tutorial about Create a tab component using vanilla CSS

Create a tab component using vanilla CSS

3:09 css PRO

Learn how to create tabs with nothing more than good ole' CSS. Look Ma, No Javascript!

note: This approach has some accessibility issues. To make a tab component that is properly accessible, it requires some JavaScript.

css tutorial about Conditionally Apply Styles Using Feature Queries

Conditionally Apply Styles Using Feature Queries

3:00 css PRO

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 Creating visual skip links in HTML and CSS

Creating visual skip links in HTML and CSS

5:51 css PRO

Skip links are an extremely helpful navigation pattern for keyboard and screen reader users, since they let you skip past sections of content. Learn how to create skip links in HTML and CSS that show on focus, and you'll benefit all users!

css tutorial about Manipulate Images Using CSS Filter and Blend Modes

Manipulate Images Using CSS Filter and Blend Modes

2:24 css PRO

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.

scss tutorial about Reuse Flexbox Styles With A Sass Mixin

Reuse Flexbox Styles With A Sass Mixin

4:54 scss PRO

This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the need for tables for all time. Need a column with each item evenly spaced but starting their alignment on the top? No problem! How about a row with the items evenly spaced out as well as equal spacing around the edges? We have you covered!

css tutorial about Use Generated Content to Augment Information

Use Generated Content to Augment Information

0:43 css PRO

When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.

css tutorial about Use CSS Counters to Create Pure CSS Dynamic Lists

Use CSS Counters to Create Pure CSS Dynamic Lists

1:19 css PRO

CSS counters let you create dynamic lists without JavaScript. In this lesson, we will create a multi-level table of contents using the CSS counter-reset and counter-increment properties with the counter attribute.

css tutorial about Create CSS Selectors in Chrome DevTools from Selection

Create CSS Selectors in Chrome DevTools from Selection

1:32 css PRO

Chrome dev tools allow you to generate css selectors based on you your mouse selection. This lesson shows you how to leverage the dev tools to generate css selectors and then revise them to match your needs.

css tutorial about Focus management using CSS, HTML, and JavaScript

Focus management using CSS, HTML, and JavaScript

8:34 css PRO

Something important to consider when coding a web application is managing the user's focus. For keyboard and screen reader users, we must ensure their focus is not dropped as content is deleted or shown in new contexts. Skip links also provide a way for users to get past a lot of content. In this lesson, you'll learn HTML, CSS and JavaScript techniques for focus management that can be applied to many situations.

css tutorial about Targeting Elements with CSS Attribute Selectors

Targeting Elements with CSS Attribute Selectors

5:00 css PRO

Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In this lesson we'll look at selecting elements based on attributes and using CSS modifiers to identify variations of those values

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

CSS Media Queries

5:05 css PRO

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 :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: 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 Transitions: Delays and Multiple Properties

CSS Transitions: Delays and Multiple Properties

3:33 css PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 Flexbox Fundamentals

Flexbox Fundamentals

9:55 css PRO

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

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