Advanced CSS + Javascript

An advanced workshop 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.

Learning Objectives:

• 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

Training Outline:

• 1. Advanced layout techniques, Photoshop style filters, Adding CSS + Javascript animations, Scroll events
• a. We will build a website which uses scrolling and
• b. animation effects in Javascript, along with flexbox and
• c. CSS blending effects.
• Layout tricks and tips using flexbox
• Understanding new CSS rules like mix-blend-mode
• How to combine CSS and Javascript together for animating
• How to trigger animations when parts of the page are in-view
• 2. APIs and Ajax, Working with data in Javascript, Asynchronous data Loading + error states
• a. We'll build a site that lets us search for Gifs using Giphy’s API. We’ll talk about APIs and why they’re so great and how we can use Ajax to fetch data. We’ll also explore some new CSS Grid layout and flexbox tricks.
• What are APIs and how we interact with them with Ajax
• How to store and manipulate data in your code
• Using the Giphy database to populate our site
• How to make a better user experience for our users
• 3. 3D effects with CSS, Super forms, Integrating payments with Stripe
• a. Create a landing page for a one day design event. This project uses responsive 12 column grid layouts, typographic effects, scrolling animations, parallax tilts, horizontal scrolling and Stripe for accepting payments.
• How to use perspective image effects in CSS
• Upgrading your forms for a better user experience
• Working with a back-end server to take payment forms