 Courses from Jhey Tompkins

Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!

For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.

Learn how to:
- Generate markup with loops and template literals
- Leverage native HTML behavior
- Create SVG
- Use CSS variables and scope
- Implement game logic with HTML forms
- Animate SVG with CSS
- Use CSS Animation to provide motion
- Use Pug Mixins
- Disable motion when users don't want it
- Apply visual effects using CSS filter and backdrop-filter
- Generate random animations using Pug and CSS variables

Cascading Style Sheets bring order and beauty to our applications.

Tic Tac Toe with CSS and SVG

A collection of CSS tricks to tackle various problems.

CSS Tips and Tricks

In this collection, we explore creating CSS art and illustrations by walking through creating the Egghead.io logo with CSS.

We walk through everything from planning and creating a responsive foundation, to creating shading effects with `box-shadow`.

Use CSS to Create Art and Illustrations

In this lesson, we dive into using CSS border-radius. We will look at how you can use it to create not only basic shapes but complex ones too.

We will start with a shorthand notation that allows us to define a uniform radius for an element. Then we will progress onto a longhand notation. That will give us the power to define the horizontal and vertical radius for each corner of an element.

Let's turn a square head into an egg head!

Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Check out the new and currently experimental "CSS Overview" feature in Chrome's DevTools.

Use it to get an overview of details such as colors, fonts, media queries, and even unused declarations.

Explore a Site's CSS with Chrome DevTools CSS Overview

In this lesson, we lay the foundations for creating a CSS illustration of the Egghead logo using the "tracing" technique.

We walk through positioning an image and container whilst making them both responsively sized. We use the images' intrinsic dimensions to size our illustration using a custom unit. This custom unit is calculated from our images' intrinsic dimensions and the desired size of our illustration.

This results in us having a responsive container for us to create our CSS illustration in that will scale with our browser window.

Create a Responsive Unit and Container as the Foundation for a CSS Illustration

Once we have the image we are going to trace and a responsive container in place, it's a good time to plan the markup for our illustration.

In this lesson, we create the markup needed for our illustration taking into consideration how many elements we might need to create certain shapes and how the stacking context could play a part.

Plan the HTML Markup for a CSS Illustration

In this lesson, we cover how to replace the default text-decoration for links with an animated underline.

We use multiple background images with a fixed height to create an underline effect. And then using CSS transition we can make one background image travel across the other.

To make it maintainable, we use CSS variables.



Create an Animated Underline Effect using CSS Transition and CSS Background Position

In this lesson, we explore creating the Egghead Shell with CSS.
We explore how different properties allow us to create different shapes and how we can use our developer tools to adjust and tweak style values.

Create Complex Shapes with CSS Clip Path and Border Radius

In this lesson, we demonstrate how leveraging the power of scoped CSS variables in combination with the HSL color space can be used to quickly prototype UI variants. In this demonstration, we create some button variants.

We create four different variants where new variants can be created with only a few lines of CSS!

Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants

In this lesson, we create arms for our Egghead spectacles. To do this, we create a normally sized element and then clip away the excess that we don't need using a polygon clip with CSS clip-path.

Leveraging the stacking context means we only see the parts of the spectacle arms that we desire.

Use a CSS Polygon Clip Path to Create Complex Shapes

In this lesson, we create the first spectacle lens for our CSS Egghead logo.

We use CSS transform and absolute positioning to get the element into place. And then use border-radius to finely tune the shape of our element.

Use CSS Transform and Border Radius to Create Complex Shapes

In this lesson, we create a second lens for our Egghead spectacles. These are a mirror image of each other. Instead of writing out the styles again, we can reuse the styles and make use of the specific class to override the positioning and transform in order to mirror the right lens.

Use CSS Classes to Reuse and Override Styles

In this lesson, we style the bridge of our Egghead spectacles. The trick to creating some shapes is to use oversized elements that we then clip the excess from. Here we create an element much larger than required in order to achieve the shape we want and then clip away the excess.

Use Oversized Elements with CSS Clip Path to Create Complex Curves

In this lesson, we use `box-shadow` to create the shadow cast from the Egghead spectacles onto the Egghead shell. At first glance, we might opt for a `box-shadow` on the lenses themselves. But, we need to duplicate those elements so we can clip away the parts of the shadow we don't need without affecting the lenses.

Add Depth to a CSS Illustration with Box Shadow

In this lesson, we explore using Chrome's DevTools to detect unwanted visual instability on a page.

We can do this using the new "Experience" heading under recorded "Performance" metrics.

To truly see the impact of "[Cumulative Layout Shift](https://web.dev/cls/)", we can make use of DevTools' "Network throttling" feature to see any visual instability with the naked eye.



Use Chrome DevTools to Detect Cumulative Layout Shift

In this lesson, we look at how you can use `content-visibility: auto` to significantly improve page load performance by applying it to `section` elements. The property tells the browser to skip rendering an element if it is off-screen and below the fold on the initial load. 

This can introduce some scroll jumping which we walk through how to combat with `contain-intrinsic-size`.

• Read more about `content-visibility` and `contain-intrinsic-size` here: https://web.dev/content-visibility/

Use content-visibility: auto to Improve Initial Page Load Time

In this lesson, we use CSS pseudo-elements and the `mix-blend-mode` property to create a duotone effect for an image.

We wrap the image in a container element and overlay it with pseudo-elements that have different background colors. Then using `mix-blend-mode`, we blend those overlays through the stacking context to create a duotone style effect.

Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect

In this lesson, we style a static element and turn it into a loading animation using `@keyframes`.

We look at how to write a basic set of `@keyframes` and how to apply it to a static element turning it into a loading animation.



Use CSS @keyframes to Create a Basic Loading Animation

In this lesson, we look at how you can use the CSS `filter` property to create a drop shadow effect around an element's content. We use the `drop-filter` function on an image to start and then a combination of elements.

Use CSS filter to Create a Drop Shadow

In this lesson, we look at how you can use CSS variables with the calc function to maintain and configure the desired aspect ratio for elements.

Jhey Tompkins

Search Results