Advanced CSS + Javascript

Advanced CSS + Javascript

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 109 Lectures (14h 06m) | 2.95 GB

The front-end level-up. Learn how to create fancy animations, use new code libraries and fetch data.

A flexible, 4-week online course that teaches you advanced front-end skills. Learn to create fancy animations, use new code libraries and grab data from other websites with APIs and Ajax.

It’s designed for people comfortable with HTML, CSS and beginner level Javascript and want to delve a bit deeper.

This is a great next step for students who have already completed our Javascript for Designers course.

What you’ll learn

  • Drawing and animating SVGs to add background effects and shape morphing
  • Using Ajax to get content from sites like Giphy to display on our own website
  • How to work with open-source code libraries and plugins from GitHub
  • The latest and greatest in modern CSS + Javascript to make our code more elegant and future-proofed
  • Getting advanced with scrolling events to create tasteful parallax effects
  • How to identify and investigate performance issues to help your site run smoothly and speedily
Table of Contents

1 Course welcome and introduction
2 FIFTY Festival project overview and SuperHi editor intro
3 Adding our initial HTML and explaining our structure
4 Using custom fonts on our sites with @font-face
5 Setting up our full width and height section styles
6 Adding animations to elements using CSS keyframes
7 Styling up our vintage marquee effect using CSS
8 Using CSS blending modes to create overlay effects
9 Using keyframes to create a vintage web marquee effect
10 Using Javascript to make a long repeating array of marquee text
11 Getting elements from our page and changing their content using vanilla Javascript
12 Styling up our lineup setions using CSS
13 Adding randomness to our background shape positions using nth-child selectors
14 Creating a pulsating animation for our background circle shapes
15 Animating elements using Javascript rather than CSS
16 How we run functions on multiple elements using Javascript vs. jQuery
17 Creating an auto-incrementing animation delay using Javascript loops
18 Applying rotation animations to our squiggle shapes
19 Using StackOverflow to find a function that generates us a random number
20 Adding modern Javascript to our code for added elegance and future-proofness
21 Finding Javascript libraries on GitHub to help us with certain bits of functionality
22 Triggering fade in transitions on scroll
23 Using Javascript loops to apply auto-incrementing transition delay to our lineups and shapes
24 Linking to content on our page using anchor tags in id attributes
25 Using Javascript for smooth scrolling to elements on our page
26 Adding layout styles for our footer section using flexbox
27 Using flexbox to achieve our sign up form’s irregular layout with ease
28 Getting our site to fit snuggly on smaller screens using media queries
29 Using CampaignMonitor to create a subscriber form our page
30 Project introduction
31 The new interactive slides
32 What we’ll learn
33 Adding our initial HTML
34 Column layout using flexbox
35 Styling up our search input and loading indicators
36 What are APIs and why are they great?
37 Getting data in the background using fetch
38 Using fetch to get data from Giphy’s API
39 Creating our gif video element using Javascript
40 Separating tasks out into their own functions
41 Using CSS Grid to stack our videos on top of each other
42 Responding to key press events on input
43 Using event data to test what key we’ve pressed
44 Improving our search hint to show the user what they’re searching
45 Putting our fetch code into a function that uses the search term
46 Getting a random item from our array of images
47 Toggling a loading state on our page
48 Adding a video animation effect on video load
49 Clearing our gif stack and resetting the search
50 Responding to events across the whole page
51 Handling errors when things go wrong
52 Responsive styles and tweaks
53 Project finish and final code summary
54 Project introduction
55 What are SVGs and how do we use them?
56 Creating our own page with a simple SVG image
57 Introducing Tachyons as a lightweight CSS toolkit
58 Introduction to a grid system using Tachyons
59 Building our full grid
60 Final grid finishes and background colors
61 Drawing circles in SVG to build our tunnel animation
62 Introducing anime.js and using it for animating our tunnel
63 Using transform-origin and easing to add character to our animations
64 Using a delay function to create a staggered animation effect
65 Our conveyor belt animation effect
66 Adding our color palette in using lightweight CSS classes
67 Looking at anime.js demos and using them to animate paths
68 Using the same path technique to create a wave animation
69 Using SVGOMG to compress SVGs
70 Using an inset box shadow to add borders to our boxes
71 Adding our cross SVG code in
72 Using Javascript to duplicate our SVG content multiple times
73 Animating our crosses using a delayed rotation effect
74 Repeating the same technique for our squares
75 Animating our dot pattern using scale transform
76 Adding our title in as raw SVG
77 Animating our flashing boxes using background color and arrays
78 Creating our square tunnel animation using SVG rects
79 Fixing up our page to make it responsive
80 Project final tweaks and summary
81 Project introduction
82 Adding our initial HTML
83 Adding our custom fonts
84 Styling up our intro section
85 About em and rem units
86 Applying stroke to our heading text
87 Styling up our call to action button
88 An introduction to basscss
89 Responsive 12 column grids using basscss
90 Adding our about section and heading variation
91 Using variables in our CSS
92 Responsive spacing using helper classes
93 Styling our speakers section and blockquote
94 Showing and revealing our fixed header on scroll
95 Horizontal scrolling elements and custom scrollbars
96 Vertical text using CSS writing-mode
97 Styling our register section using CSS grid
98 Adding our final images section and footer
99 Parallax tilt hover effect for our images
100 Fading images in on scroll
101 Revealing our payment form using transforms
102 An introduction to Stripe for payments
103 A breakdown of Stripe’s payment flow
104 Using Stripe’s code for our checkout form
105 Sending the order to our server using fetch
106 Creating messages for successful payments
107 Adding an animated loading state to our form
108 Adding styles to make our page fully responsive
109 Project summary