technifyed

JavaScript Mastery via YouTube Free video

Master Web Animations in 2 Hours | Build an Awwwards-Level Website

Overview

The JSM Agentic Engineering Course is FINALLY LIVE! 🔥

🔔 20% off launch discount ends September 29th.

Invest in your engineering future 🚀 https://jsm.dev/ai

If this video made you think, “I wish I could build this,” this is for you.

We just launched Motion Authority, built to help devs move from

“it works.” → “This feels finished.”

GSAP Animations fundamentals + real career positioning

👉 Get access here: https://jsm.dev/yt-motion-bundle

In this GSAP Crash Course, you'll learn how to build an immersive cocktail website with scroll-synced video playback and cinematic animations. We'll use React and TailwindCSS to bring the experience to life, making it the perfect project to level up your frontend animation skills.

⭐ Join JS Mastery Pro: https://jsm.dev/cocktail-jsmpro

💎 Become a Top 1% Next.js Developer: https://jsm.dev/cocktail-nextjs

📁 Free Video Kit (Code, Design, Repo, Guide): https://jsm.dev/cocktail-kit

📗 NEW GSAP Animations Course: https://jsm.dev/cocktail-gsap

Junie AI: https://jsm.dev/cocktail-junie

WebStorm: https://jsm.dev/cocktail-webstorm

Rate us on TrustPilot: https://jsm.dev/trustpilot

https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery

Business Inquiries: contact@jsmastery.pro

Time Stamps:

00:00:00 — Introduction

00:03:23 — GSAP Workshop

00:30:52 — Project Showcase

00:32:06 — App Setup

00:46:52 — Navbar

00:59:07 — Hero Layout

01:12:10 — GSAP Hero Video Animation

01:26:08 — Cocktails Section

01:36:15 — About Section

01:46:25 — Art Section

01:58:10 — Menu Section

02:17:35 — Contact Section

Chapters 12

  1. 00:00:00Introduction
  2. 00:03:23GSAP Workshop
  3. 00:30:52Project Showcase
  4. 00:32:06App Setup
  5. 00:46:52Navbar
  6. 00:59:07Hero Layout
  7. 01:12:10GSAP Hero Video Animation
  8. 01:26:08Cocktails Section
  9. 01:36:15About Section
  10. 01:46:25Art Section
  11. 01:58:10Menu Section
  12. 02:17:35Contact Section

Advantages and disadvantages

Advantages

  • Free, one long video that covers a topic end to end.
  • Use the chapters to jump to what you need.
  • 1,166,631 views, so help and notes are easy to find.
  • Completely free.
  • Self-paced: start any time.
  • A clear syllabus (12 parts) you can see before you start.
  • Hands-on: you build or practise, not just watch.
  • Start watching right away, no sign-up.

Disadvantages

  • No exercises or certificate: code along to make it stick.
  • No certificate.
  • No graded assignments or feedback.

Some points apply to every course of this kind; see how we rank.

Free

  • Free: Watch on YouTube, no account needed.
  • Certificate: None. Code or take notes along to make it stick.

Similar courses

Compare these

Harvard University · YouTube

CS50's Introduction to Programming with Python (CS50P) 2022

This is CS50P, CS50's Introduction to Programming with Python. Register for free at https://cs50.edx.org/python. Slides and source code at https://cs50.harvard.edu/python. Playlist at https://www.youtube.com/playlist?list=PLhQjrBD2T3817j24-GogXmWqO5Q5vYy0V. An introduction to programming using a la…

Free video11 videos, 16 hours

Massachusetts Institute of Technology · YouTube

MIT 6.100L Introduction to CS and Programming using Python, Fall 2022

Instructor: Ana Bell View the complete course: https://ocw.mit.edu/courses/6-100l-introduction-to-cs-and-programming-using-python-fall-2022/ *Note: Lectures 6, 10 have been updated! This subject is aimed at students with little to no programming experience. It aims to provide students with an under…

Free video26 videos, 28 hours

Harvard University · YouTube

CS50's Web Programming with Python and JavaScript (CS50W) 2020

This is CS50W, CS50's Web Programming with Python and JavaScript. Register for free at https://cs50.edx.org/web. Slides and source code at https://cs50.harvard.edu/web. This course picks up where Harvard University’s CS50 leaves off, diving more deeply into the design and implementation of web apps…

Free video10 videos, 14 hours

Harvard University · YouTube

CS50's Introduction to Artificial Intelligence with Python 2023

This course explores the concepts and algorithms at the foundation of modern artificial intelligence, diving into the ideas that give rise to technologies like game-playing engines, handwriting recognition, and machine translation. Through hands-on projects, students gain exposure to the theory beh…

Free video8 videos, 12 hours

Harvard University · YouTube

CS50's Introduction to Artificial Intelligence with Python 2020

This course explores the concepts and algorithms at the foundation of modern artificial intelligence, diving into the ideas that give rise to technologies like game-playing engines, handwriting recognition, and machine translation. Through hands-on projects, students gain exposure to the theory beh…

Free video8 videos, 13 hours

Massachusetts Institute of Technology · YouTube

MIT 18.S997 Introduction to MATLAB Programming Fall 2011

View the complete course: http://ocw.mit.edu/18-S997F11 Instructor: Yossi Farjoun This course is intended to assist undergraduates with learning the basics of programming in general and programming MATLAB® in particular. License: Creative Commons BY-NC-SA More information at http://ocw.mit.edu/term…

Free video6 videos, 50 minutes

Enter your email and the official page opens. Phone is optional.