SuperHi FM

50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
CatalogCart -AboutSign in

SuperHi

Advanced CSS + Javascript

FIFTY Festival
Chapter 01

FIFTY Festival

In our first week we will build a website for FIFTY Festival, which uses scrolling and animation effects in Javascript, along with flexbox and CSS blending effects

Links + downloads

Videos

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

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!

Jiffy

Next: Chapter 02

Jiffy

Feeling stuck?

Don’t worry, we are here to help you with:

  • Speedy help from one of our team members
  • Detailed, relevant solutions
  • Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

EmailDiscord