The Advanced Web Developer Bootcamp

Explore why CSS animations matter for UI design and learn to create transitions and CSS keyframes, building animated widgets and websites with practical tools we pick up along the way.

Master CSS animations by learning transforms, transitions, and keyframes, then apply them to practical web projects, exploring hover effects, loading animations, and mobile-friendly slide-in menus to see why animations matter.

Explore why animations matter in web design, from providing context and feedback to improving accessibility and perceived speed, and learn how to plan and implement effective CSS animations.

Explore the hover CSS pseudo class and how hovering over elements like divs and buttons changes styles, with live CodePen examples and tips on transitions and timing.

Explore the focus pseudo-class in CSS, which triggers when a form input receives focus via click or tab. Style the focus state with color changes and a border radius.

Explore the active pseudo-class and its distinction from hover and focus, using practical button and paragraph examples to show how these states interact in real web pages.

Explore how translate and transform move elements across the screen using translate x, translate y, and translate with two values, including hover interactions and origin behavior.

Learn how the CSS transform scale enlarges or shrinks elements using one or two values for x and y, and how transform-origin controls where the scaling begins.

Learn how vendor prefixes affect cross-browser CSS, why to use autoprefixer tools, and how to apply prefixing automatically with online and command-line options.

Learn how css transitions control duration, transition-property, transition-timing-function, and transition-delay, with examples of color, transform scale, rotate, and hover effects.

Master transition duration and transition property to control animation timing and which CSS properties animate, using hover effects on background, transform, opacity, and border radius with multiple durations.

Explore how transition delay and transition timing function control when and how CSS transitions start and accelerate, including multi-property delays and common easing curves with practical CodePen examples.

Use the transition shorthand to compress property, duration, timing function, and delay into a single line, and chain multiple transitions with commas for hover effects.

Identify why transform and opacity are favored for high-performance CSS transitions and how browser rendering stages affect animation speed.

Explore building an animated image gallery using CSS transitions, hover effects, and icon overlays. Learn layering with background div, image, and Font Awesome icons, plus grayscale and scale transforms.

Explore how CSS keyframes enable multi-state animations with precise timing, delays, and repetition, surpassing transitions by defining in-between steps like 0%, 25%, 50%, 75%, and 100%.

Practice keyframes by animating a sun that rises and sets while changing color, and a sky that shifts from dark to pink to blue, two elements moving together.

Build a simple CSS loading icon with keyframes, borders, and rotation. Explore multiple loaders, color changes, timing, and animation properties for engaging loading indicators.

Master modern CSS layouts by learning flexbox and the grid layout system, while weaning you off frameworks like Bootstrap or Foundation to build responsive websites.

Discover how the display property with a flex value makes a container a flexbox, turning multiple divs into a single line and enabling flexible spacing and alignment.

Master flex container terminology by applying display flex, identifying flex items, and controlling content with main axis and cross axis for row or column layouts.

Learn how justify-content distributes space along the main axis in a flex container, using values like flex-end, center, space-between, and space-around, with flex-direction, wrapping, and main and cross axis concepts.

Turn the left sidebar into a flex container, set flex-direction to column, and use justify-content: space-between to push two sections to the top and bottom. Enable wrapping with flex-wrap.

Explore align-items in flex containers and control the cross axis alignment using flex-start, flex-end, center, baseline, and stretch, while contrasting with justify-content on the main axis.

Learn how align-content distributes space between rows on the cross axis in flexbox, with wrapping and values like stretch, flex-start, center, and space-between for a responsive nav bar.

Build a responsive navigation bar with flexbox, aligning four links to the right on wide screens and switching to a centered column layout on mobile via media queries.

Learn how align-self overrides align-items to control individual item alignment along the cross axis in flex layouts, using values like flex-start, flex-end, center, baseline, and stretch.

Explore how flex grow distributes unused space among items using ratios, from equal shares to weightings like two-to-one, in both row and column layouts.

Build a responsive holy grail layout using flexbox with a header, footer, and three equal-height columns. Ensure the main section remains at least 800 pixels tall.

Master the holy grail layout using flexbox to create a three-column structure with header, footer, and resizable main, side nav, and aside; refine with breakpoints, flex grow, and order.

Explore flexbox browser support, noting that modern browsers fully support flexbox with no prefixes. Learn how to handle legacy browsers with old syntax, prefixes, fallbacks, and autoprefixer for broader compatibility.

Meet Matt Lane, a veteran instructor in the advanced web developer bootcamp, bringing math expertise and a focus on D3 data visualization to build dashboards.

Construct and style a complete web page by integrating CSS animations and layout. Consolidate existing knowledge by applying concepts to a larger project.

Tim Garcia introduces asynchronous JavaScript in the advanced web developer bootcamp, covering callbacks and the event loop, to prepare you for building single page applications with Ajax.

Define callback and higher order functions, and demonstrate using callbacks to generalize code. Implement anonymous functions as callbacks in JavaScript, including examples with for each, array methods, and event handling.

Master the find index function: return the first index where the callback is truthy, or negative one if none. See examples with six (index 2) and even numbers (index 3).

Master the findIndex method in JavaScript, which loops over an array and returns the index for which the callback yields a truthy value. If none exists, it returns -1.

Demonstrate how the stack runs a two-function example to uppercase each word's first letter. Trace main, uppercase words, uppercase first, split, and join to produce capitalized words.

Learn a countdown solution that uses setInterval to log each second, decrement the remaining seconds, and clear the interval at zero, ending with ring, ring, ring.

Learn how the event loop and queue work with the stack to execute asynchronous JavaScript in FIFO order, and why JavaScript's single threaded model delays zero-delay timeouts.

The lecture defines a promise, demonstrates then and catch callbacks, and wraps a set timeout to illustrate asynchronous execution.

The advanced web developer bootcamp explains promise chaining, demonstrates returning promises from then callbacks, and refactors nested callbacks to make asynchronous code sequential and more maintainable.

Explore XML and JSON as data formats used by APIs, compare XML’s structure with JSON’s key-value pairs, and learn why JSON fits JavaScript Ajax requests for front-end data.

Explore the Ajax workflow by building a simple app that uses XMLHttpRequest to fetch a random dog image on button click and update the image in the DOM.

Build a bitcoin price widget using XMLHttpRequest, parse JSON, and update the price display from data.BPI.GBP.rate. Introduce a currency variable to switch between USD and GBP and plan error handling.

Explore how the fetch API replaces XR with a clean, powerful syntax, supports streaming, and uses promises and response.json to handle data efficiently.

Learn to customize fetch requests by providing a url and an options object, using method, body, headers, and credentials, with JSON.stringify simplifying data serialization.

Learn how to handle fetch errors by validating response status, using promise chaining with then and catch, and implementing a reusable error handler for 200 vs 404 and offline scenarios.

Fetch user data from an API, parse JSON, and update the DOM with full name, avatar, username, city, and email. Refactor into parse-json, update-profile, and error-handling functions.

Explore the benefits and modernity of fetch, then confront its browser compatibility issues, especially with Internet Explorer, and learn library options like jQuery and Axios to work around them.

Explore the jQuery Ajax method to perform get and post requests, handle done and fail callbacks, and compare with fetch, including data type json and json parsing.

See how jQuery ajax creates an underlying XML http request by returning a new XHR, sets the method and URL in options, and sends the request.

Build a simple random cat photo generator using jQuery and Ajax. Click a button to fetch an image from an API and update the image source with the attr method.

Learn to implement the jQuery random cats exercise solution by requiring jQuery, handling a button click to get JSON from random.cat, and updating the image source using the ATR method.

Explore axios as a lightweight, promise-based alternative to jQuery Ajax for browser and NodeJS, covering get and post requests and automatic json transformation.

Learn how axios handles errors by distinguishing error.response from error.request, allowing you to identify server versus network issues and implement user-friendly error handling.

Explore and compare four common ajax data retrieval methods—XMLHttpRequest, fetch, jQuery, and Axios—showing how to fetch JSON, parse it, and update the DOM while noting browser compatibility and error handling.

Meet Ellie Skopec, who masterfully breaks down advanced JavaScript concepts. See how the course covers advanced JavaScript and testing for building web apps.

Learn to write automated tests in JavaScript using Jasmine to verify code behavior, catch bugs early, and support scalable development.

Master built-in JavaScript array methods like for each, map, filter, some, every, and reduce to solve array operations; implement them from scratch and complete exercises to prepare for React.