Egghead Instructor Rory Smith

Rory Smith

Rory is a front end developer from Leeds, UK.



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

Browse Rory Smith's lessons.

showing 24 lessons...

Create scrollable DOM elements with Greensock

Re-order the appearance of grid items using the order property

P

Specify many grid properties at once with the grid shorthand

P

Specify grid columns, rows, and areas at once with the grid-template shorthand

P

Specify the sizes of implicitly created grid tracks

P

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

P

Nest a grid within a grid

P

Describe a grid layout using grid-template-areas

P

Change the auto-placement behaviour of grid items with grid-auto-flow

P

Use the repeat function to efficiently write grid-template values

P

Use the minmax function to specify dynamically-sized tracks

P

Refer to fractions of available space with the fr unit

P

Place grid items on a grid using grid-column and grid-row

P

Specify a grid gutter size with grid-gap

P

Make a request to an API with Axios in Vue

Render lists of data in Vue with v-for

Get up and running with CSS Grid Layout

P

Describe a grid layout using named grid lines

P

Use Scoped CSS in Vue

Get Started with Vue Components

Get up and running with vue-router

Use basic event handling in Vue

Use git add --patch for better commit history and mitigating bugs

Break up components into smaller pieces using Functional Components

js tutorial about Create scrollable DOM elements with Greensock

Create scrollable DOM elements with Greensock

4:19 js

In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable <div> container and explore some options available.

css tutorial about Re-order the appearance of grid items using the order property

Re-order the appearance of grid items using the order property

2:05 css PRO

As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and the appearance of our grid.

css tutorial about Specify many grid properties at once with the grid shorthand

Specify many grid properties at once with the grid shorthand

4:09 css PRO

Using the grid shorthand property, we can set all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), and the gutter properties (grid-column-gap and grid-row-gap) in a single declaration.

css tutorial about Specify grid columns, rows, and areas at once with the grid-template shorthand

Specify grid columns, rows, and areas at once with the grid-template shorthand

3:33 css PRO

We can specify grid columns, rows, and areas in one property using the grid-template shorthand.

css tutorial about Specify the sizes of implicitly created grid tracks

Specify the sizes of implicitly created grid tracks

2:22 css PRO

What happens if our grid items are in implicitly created tracks? Let’s learn how to handle the situation in which we may not have accounted for grid items to show.

css tutorial about Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

2:10 css PRO

What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; auto-fill and auto-fit. We’ll explore what each one does and why we would need to use them on our grid-tracks.

css tutorial about Nest a grid within a grid

Nest a grid within a grid

1:56 css PRO

A grid item can also be a grid container! Let’s see how to specify a grid within a grid.

css tutorial about Describe a grid layout using grid-template-areas

Describe a grid layout using grid-template-areas

4:40 css PRO

We can describe the nature of a grid in an ‘ASCII-art’ way with grid-template-areas. Let’s see how to specify the nature of our grid so that it’s instantly recognisable to anyone else what our layout is going to look like.

css tutorial about Change the auto-placement behaviour of grid items with grid-auto-flow

Change the auto-placement behaviour of grid items with grid-auto-flow

2:39 css PRO

We can change the automatic behaviour of what order our grid items appear. We can even re-order the items in our grid to fill available space using the dense keyword. How do we approach this using grid-auto-flow?

css tutorial about Use the repeat function to efficiently write grid-template values

Use the repeat function to efficiently write grid-template values

3:14 css PRO

We can use the repeat() function if we have repeating specifications for columns and rows. With the minmax() function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.

css tutorial about Use the minmax function to specify dynamically-sized tracks

Use the minmax function to specify dynamically-sized tracks

2:21 css PRO

Using minmax() is an amazingly useful way to specify boundaries for the smallest and largest size a grid track can be. Let’s find out how to apply it.

css tutorial about Refer to fractions of available space with the fr unit

Refer to fractions of available space with the fr unit

1:54 css PRO

There’s an unfamiliar fr unit pertinent to CSS Grid, which allows us to specify a fractional unit of space. Let’s see how to apply it.

css tutorial about Place grid items on a grid using grid-column and grid-row

Place grid items on a grid using grid-column and grid-row

3:13 css PRO

It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid-template-columns and grid-template-rows, and to the grid items, we’ll pass grid-column and grid-row some numeric values.

css tutorial about Specify a grid gutter size with grid-gap

Specify a grid gutter size with grid-gap

1:13 css PRO

It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.

vue tutorial about Make a request to an API with Axios in Vue

Make a request to an API with Axios in Vue

2:05 vue

Let's see how to use the vue-axios NPM package to make a request to an API, and make use of the data returned.

vue tutorial about Render lists of data in Vue with v-for

Render lists of data in Vue with v-for

1:40 vue

Let's write some example data and render it to our page with v-for, and then see how we can use the same directive to render the same component multiple times.

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.

vue tutorial about Use Scoped CSS in Vue

Use Scoped CSS in Vue

2:09 vue

Let's see how to apply both scoped and global styles to components in our project, and why we need to use the scoped attribute.

vue tutorial about Get Started with Vue Components

Get Started with Vue Components

1:17 vue

Components are one of the most powerful features of Vue. Let's take a look at how to write our first components and make use of them in a parent component.

vue tutorial about Get up and running with vue-router

Get up and running with vue-router

3:14 vue

How do we set up a simple app with its own routes with their own components in Vue?

vue tutorial about Use basic event handling in Vue

Use basic event handling in Vue

2:18 vue

Let's use a range of events and their modifiers to look at the cool ways we can deal with event handlers in Vue.

otherjs tutorial about Use git add --patch for better commit history and mitigating bugs

Use git add --patch for better commit history and mitigating bugs

1:49 otherjs

Let's split our changes into separate commits. We'll be able to check over our changes before staging them all from the terminal. Then, we'll see the positive effect it has on our commit history.

react tutorial about Break up components into smaller pieces using Functional Components

Break up components into smaller pieces using Functional Components

2:21 react

We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.

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