The Creative JavaScript Course

Explore the DOM and learn how JavaScript can manipulate HTML and CSS to change colors, sizes, animate elements, and update text in real time.

Learn how to access and manipulate the browser's document, view the page url and title, inspect html elements, and set the document title to observe changes.

Learn to use event listeners to respond to clicks and keyboard input, building a dynamic to-do list and calendar with DOM updates, class toggling, and transitions.

Master event bubbling and dynamic DOM manipulation by adding listeners to each created item, accessing event targets, and preventing default form submission to build a functional to do list.

Discover how local storage and session storage persist data after refresh, compare their differences, and store arrays or objects by json.stringify and json.parse for a to-do list.

Reset browser styles with CSS, apply a gradient background and white text in the Poppins font, center header and form with flex, style inputs and button, and add hover transitions.

Build a vanilla javascript to do app by wiring selectors and an event listener, creating a to do item with a div, an li, and complete and delete buttons.

Style the to-do list with flexbox, center the container, remove bullets, and space items. Implement trash and complete buttons, manage and clear the input after adding.

Animate to-do items with style.css transitions, text-decoration line-through, and reduced opacity. Add a fall animation using translateY and rotate, remove after transition end, filter completed, and save to local storage.

Add a select dropdown with all, completed, and uncompleted options to filter to-dos, then switch on the selected value and toggle each item's display.

Save, retrieve, and delete todos in local storage by maintaining an array, using getItem and setItem, parsing with JSON.parse, and serializing with JSON.stringify to keep a persistent list.

Explore how map creates a copied, modified array by returning values for each item, unlike forEach, which does not return, and see practical examples like uppercasing videos.

Explore the some and every array methods in JavaScript to verify conditions like all ratings above eight or at least one rating above eight, with practical examples.

Discover how arrow functions simplify writing anonymous callbacks in JavaScript, from map and event listeners to API calls. Use single-parameter shorthand, multiple parameters with parentheses, and implicit returns.

Learn to sort arrays in JavaScript using a compare function and arrow syntax, sorting strings alphabetically and numbers with a minus b for ascending order, noting it mutates the array.

Learn how the spread operator copies arrays without mutating the original, enables concatenation, and sorts in ascending or descending order; apply spread to strings and combine names into new arrays.

Explore objects in JavaScript, tackle a few tricky concepts, and prepare to build a beat maker after this chapter to apply what you learn.

Explore the global execution context, its creation and execution phases, and how memory allocation and hoisting affect function declarations, var, let, and const in JavaScript.

Explain how a global execution context is created with memory for functions and a scope chain, and how each function call pushes a new execution context onto the call stack.

Explore how the this keyword acts as a dynamic pointer, referencing the calling object or window by default, and preserve it with arrow functions in methods and DOM.

Explore how to control this in JavaScript by using bind, call, and apply to bind a function to a specific object, pass arguments, and invoke with arrays.

Explore object-oriented programming through constructor functions in JavaScript, creating todo objects with new, assigning this.name and this.completed, attaching methods, and generating multiple instances, with prototypes coming next.

Learn how prototypes prevent method duplication by placing methods on the constructor's prototype, allowing arrays and todo objects to share behavior without per-instance copies.

Explore prototypal inheritance using constructor functions, prototypes, and Object.create to share life, name, and level while methods like get info and fire breath span enemies and dragons.

Learn object oriented javascript by building an animation library with an animator class, using selectors, fade out and move methods, and toggle and timing options for the beat maker project.

Build a beat-making app by using classes, constructors, and this keyword to practice methods, then add sounds, mute tracks, and animate a timeline of dots that play beats.

Build a web beat maker with HTML, CSS, and JavaScript, loading kick, snare, and hi-hat sounds from a sounds folder, with track controls and eight pads.

Apply css fundamentals to build a clean drum sequencer interface by resetting margins and padding, enabling border-box, and styling pads and controls with flex layouts, colors, and smooth transitions.

Build a drum kit class in JavaScript that loops through pads with a play button, using bpm-based interval timing and event listeners to toggle and animate active pads.

Loop over the beat pads, apply CSS keyframes to active bars, play kick, snare, or hi-hat sounds, and use animation end to reset styles and prevent stacking.

The quick fix in the creative JavaScript course shows resetting kick, snare, and hi-hat audio current times to zero to stop unintended sounds when no nodes are playing.

Learn how to prevent multiple intervals by tracking an interval id with isPlaying, using clearInterval, and toggling play and stop states to update button text.

Change multiple drum sounds by wiring select elements to update audio sources for kick, snare, and hi-hat; extend the sounds library with option values.

Implement mute functionality for drum tracks by selecting all mute buttons, toggling an active state, and muting or unmuting kick, snare, and hi hat based on the clicked data-track index.

Explore the colors app and learn how JavaScript libraries help manipulate color, convert hex to RGB, and ensure browser compatibility for fun animations with GSAP and jQuery.

Build a live color palette tool in a color picker app, locking colors, refreshing palettes, adjusting hue and saturation, copying codes, and saving palettes to a library.

This lecture demonstrates styling a web page with CSS, including reset rules, font families, rgb colors, and a bottom sliding color controls panel using flex, absolute positioning, transitions, and opacity.

Learn to use chroma.js to generate random colors and manipulate hex, rgb, and rgba values, including darkening and saturating colors, for an interactive color picker.

Create a color contrast checker using chroma that computes luminance and sets text to black or white based on a 0.5 threshold, accepting hex or rgb colors.

Learn to style and initialize color sliders in a JavaScript app, using chroma.js to colorize hue, brightness, and saturation scales with CSS, gradients, and dynamic input backgrounds.

Wire color sliders to update text and icons in real time using Chroma to compute hex values, preserving initial colors while enforcing text contrast.

Fix broken slides by saving generated colors in an initial colors array, pushing hex values from color generation, and relying on the array to maintain stable styling.

Learn how to reset color inputs and synchronize sliders with on-screen colors using hue, brightness, and saturation, leveraging for-each loops, data attributes, and Chroma for precise color updates.

Implement a copy to clipboard feature by clicking hex swatches, using a hidden text area and document.execCommand, and display a centered, animated copy confirmation popup with an active state.

Implement quality-of-life enhancements by enabling the generate button to produce new colors, update button text, check contrast for all buttons with a single loop, and prep for local-storage save palettes.

Learn to implement saving palettes to local storage by creating a palette object with a name and colors array, and manage open, save, and library UI interactions.

Learn to save palettes to local storage and generate a dynamic library UI that shows palette titles, color previews, and a select button.

Learn to save color palettes in local storage by attaching event listeners, selecting palette indices, updating initial colors, and refreshing the UI with colors, text, and contrast checks.

Finish a vanilla JavaScript color palette app by implementing local storage persistence, recreating palettes on load, and wiring reset inputs and dynamic UI updates across refreshes.

Explore how JavaScript brings stunning website animations, from hamburger menus to engaging transitions, and learn to build a stylish portfolio site.

Learn to add interactivity to your website using JavaScript with animations, a custom cursor, hover effects, and scroll-triggered interactions. Build a bigger project with smooth page transitions between HTML pages.

Add HTML to a travel site by wiring an empty index with CSS, fonts, images, and scripts; build a header, hero, swipeable slides, reveal text, and explorer buttons.

Explore scroll-triggered animations using window scroll events, getBoundingClientRect, and window height. Compare Intersection Observer and ScrollMagic for robust, reusable scroll effects and scenes.

Learn to implement scroll-based animations with GSAP and ScrollMagic, setting up a controller and scene, and chaining reveal image, reveal text, and nav animations with a timeline.

Discover scroll-driven animations with scroll magic and GSAP, creating scenes, triggers, and pinning to animate slides. Learn to use timeline, indicators, and push followers for dynamic page transitions.

Build cursor animations by tracking mouse movement with a window listener, position a custom cursor with top, left, and transform, and apply hover and title swipe effects.

Explore Barbara JS, a library that enables fluid, smooth transitions between pages instead of full refreshes. Learn how to integrate it into a multi-page site with shared scripts and navigation.

Learn to build page transitions using Barba, define views and namespaces, apply before enter and before leave hooks, and animate with GSAP timelines, including fade and swipe effects.

Implement a scroll magic detail animation for description pages using a gsap timeline, fading slides, moving images, pins, and indicators.

Explore asynchronous JavaScript to build an app that updates live, fetches data from the internet, searches for images, and lets you pick your own wallpaper, featuring photon.

Explore asynchronous JavaScript and Ajax to fetch data from a server in the background, enabling live updates with JSON data parsed into JavaScript and rendered on screen.

Explore how synchronous and asynchronous JavaScript run, detailing the call stack, execution context, and the role of web APIs and callbacks in setTimeout, fetch, event listeners, and single-threaded execution.

Demonstrates how to fetch user data asynchronously with callbacks, starting from a login example and a simulated server delay. Highlights callback hell and previews promises and async/await.

Refactor callback-heavy code into promise-based flows with resolve and reject. Adopt async await to write asynchronous logic in a synchronous style, enabling login and API data fetching.

Refactor asynchronous code to look like synchronous code by wrapping calls in an async function, using await for login user, user videos, and video details, and handle errors with try/catch.

Learn JSON as a simple data exchange format between servers and browsers, fetch data from an API, convert it to JSON, and use it as a JavaScript object.

Learn to use the Pexels API to fetch photos for your app and obtain an API key, then explore endpoints for random, curated, and search photos.

Create a web page with index.html, style.css, and app.js, featuring a header logo, a search form, and a dynamic gallery that loads images and a more button using Roboto fonts.

Fetch and display curated images from the Pexels API by using fetch with async/await, authorization headers, and dynamic DOM manipulation to render a gallery with photographer names.

Implement a search feature for photos by wiring the input, handling form submission with prevent default, and building an async search photos function, then refactor to reduce code duplication.

Refactor by modularizing repeated code into an async fetch API and a generate pictures function, using dynamic URLs to fetch data and streamline HTML generation.

Learn to build a dynamic image search gallery that clears previous results, resets the search input, and adds a downloadable image link using a fetch-based workflow and simple DOM manipulation.

Learn to create a responsive image gallery with css grid using auto-fill and minmax, apply object-fit cover, and fine-tune padding, gaps, and a nav button.

Finish the search feature with a dynamic load more using a page counter and current search to fetch search results or curated photos via async fetch.