SuperHi FM

Search:

Catalog Cart About Sign in

Advanced CSS + Javascript

FIFTY Festival

Chapter 01

FIFTY Festival

Links + downloads

Chapter resources

Chapter URL

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

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!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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

Private notes

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

Sign in to save notes