Advanced CSS + Javascript

Lesson 01

Course welcome and introduction

Lesson 02

FIFTY Festival project overview and SuperHi editor intro

Lesson 03

Adding our initial HTML and explaining our structure

Lesson 04

Using custom fonts on our sites with @font-face

Lesson 05

Setting up our full width and height section styles

Lesson 06

Adding animations to elements using CSS keyframes

Lesson 07

Styling up our vintage marquee effect using CSS

Lesson 08

Using CSS blending modes to create overlay effects

Lesson 09

Using keyframes to create a vintage web marquee effect

Lesson 10

Using Javascript to make a long repeating array of marquee text

Lesson 11

Getting elements from our page and changing their content using vanilla Javascript

Lesson 12

Styling up our lineup setions using CSS

Lesson 13

Adding randomness to our background shape positions using nth-child selectors

Lesson 14

Creating a pulsating animation for our background circle shapes

Lesson 15

Animating elements using Javascript rather than CSS

Lesson 16

How we run functions on multiple elements using Javascript vs. jQuery

Lesson 17

Creating an auto-incrementing animation delay using Javascript loops

Lesson 18

Applying rotation animations to our squiggle shapes

Lesson 19

Using StackOverflow to find a function that generates us a random number

Lesson 20

Adding modern Javascript to our code for added elegance and future-proofness

Lesson 21

Finding Javascript libraries on GitHub to help us with certain bits of functionality

Lesson 22

Triggering fade in transitions on scroll

Lesson 23

Using Javascript loops to apply auto-incrementing transition delay to our lineups and shapes

Lesson 24

Linking to content on our page using anchor tags in id attributes

Lesson 25

Using Javascript for smooth scrolling to elements on our page

Lesson 26

Adding layout styles for our footer section using flexbox

Lesson 27

Using flexbox to achieve our sign up form’s irregular layout with ease

Lesson 28

Getting our site to fit snuggly on smaller screens using media queries

Lesson 29

Using CampaignMonitor to create a subscriber form our page

Lesson 01

Project introduction

Lesson 02

The new interactive slides

Lesson 03

What we’ll learn

Lesson 04

Adding our initial HTML

Lesson 05

Column layout using flexbox

Lesson 06

Styling up our search input and loading indicators

Lesson 07

What are APIs and why are they great?

Lesson 08

Getting data in the background using fetch

Lesson 09

Using fetch to get data from Giphy’s API

Lesson 10

Creating our gif video element using Javascript

Lesson 11

Separating tasks out into their own functions

Lesson 12

Using CSS Grid to stack our videos on top of each other

Lesson 13

Responding to key press events on input

Lesson 14

Using event data to test what key we’ve pressed

Lesson 15

Improving our search hint to show the user what they’re searching

Lesson 16

Putting our fetch code into a function that uses the search term

Lesson 17

Getting a random item from our array of images

Lesson 18

Toggling a loading state on our page

Lesson 19

Adding a video animation effect on video load

Lesson 20

Clearing our gif stack and resetting the search

Lesson 21

Responding to events across the whole page

Lesson 22

Handling errors when things go wrong

Lesson 23

Responsive styles and tweaks

Lesson 24

Project finish and final code summary

Lesson 01

Project introduction

Lesson 02

What are SVGs and how do we use them?

Lesson 03

Creating our own page with a simple SVG image

Lesson 04

Introducing Tachyons as a lightweight CSS toolkit

Lesson 05

Introduction to a grid system using Tachyons

Lesson 06

Building our full grid

Lesson 07

Final grid finishes and background colors

Lesson 08

Drawing circles in SVG to build our tunnel animation

Lesson 09

Introducing anime.js and using it for animating our tunnel

Lesson 10

Using transform-origin and easing to add character to our animations

Lesson 11

Using a delay function to create a staggered animation effect

Lesson 12

Our conveyor belt animation effect

Lesson 13

Adding our color palette in using lightweight CSS classes

Lesson 14

Looking at anime.js demos and using them to animate paths

Lesson 15

Using the same path technique to create a wave animation

Lesson 16

Using SVGOMG to compress SVGs

Lesson 17

Using an inset box shadow to add borders to our boxes

Lesson 18

Adding our cross SVG code in

Lesson 19

Using Javascript to duplicate our SVG content multiple times

Lesson 20

Animating our crosses using a delayed rotation effect

Lesson 21

Repeating the same technique for our squares

Lesson 22

Animating our dot pattern using scale transform

Lesson 23

Adding our title in as raw SVG

Lesson 24

Animating our flashing boxes using background color and arrays

Lesson 25

Creating our square tunnel animation using SVG rects

Lesson 26

Fixing up our page to make it responsive

Lesson 27

Project final tweaks and summary

Lesson 01

Project introduction

Lesson 02

Adding our initial HTML

Lesson 03

Adding our custom fonts

Lesson 04

Styling up our intro section

Lesson 05

About em and rem units

Lesson 06

Applying stroke to our heading text

Lesson 07

Styling up our call to action button

Lesson 08

An introduction to basscss

Lesson 09

Responsive 12 column grids using basscss

Lesson 10

Adding our about section and heading variation

Lesson 11

Using variables in our CSS

Lesson 12

Responsive spacing using helper classes

Lesson 13

Styling our speakers section and blockquote

Lesson 14

Showing and revealing our fixed header on scroll

Lesson 15

Horizontal scrolling elements and custom scrollbars

Lesson 16

Vertical text using CSS writing-mode

Lesson 17

Styling our register section using CSS grid

Lesson 18

Adding our final images section and footer

Lesson 19

Parallax tilt hover effect for our images

Lesson 20

Fading images in on scroll

Lesson 21

Revealing our payment form using transforms

Lesson 22

An introduction to Stripe for payments

Lesson 23

A breakdown of Stripe’s payment flow

Lesson 24

Using Stripe’s code for our checkout form

Lesson 25

Sending the order to our server using fetch

Lesson 26

Creating messages for successful payments

Lesson 27

Adding an animated loading state to our form

Lesson 28

Adding styles to make our page fully responsive

Lesson 29

Project summary