<div class="s-wrap">
<ul data-course-list="" class="MediaList MediaListAsBlocks MediaListPopularSorted">
<li class="MediaItem s-vflex state-current" id="complete-react-v8" data-hash="BoYXCMJijv" data-so-d="9" data-so-p="1">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/complete-react-v8/">Complete Intro to React, v8</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">Learn to build real-world apps with modern React 18.x+. You'll use the latest React features to build a complete app for browsing adoptable pets.</div>
<div class="meta">
5 hours, 50 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/complete-react-v8/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/complete-react-v8/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2022-12-05-complete-react-v8/thumb.webp" alt="Complete Intro to React, v8" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="next-js-v2" data-hash="EeCxZxmGeY" data-so-d="2" data-so-p="2">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/next-js-v2/">Introduction to Next.js 13+, v2</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Next.js is a complete full-stack framework built on top of React.js. Use Next.js to create basic blog websites up to full-blown, full-stack applications and APIs.</div>
<div class="meta">
3 hours, 26 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/next-js-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/next-js-v2/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2023-01-31-next-js-v2/thumb.webp" alt="Introduction to Next.js 13+, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="web-development-v3" data-hash="yBlPKcpCER" data-so-d="19" data-so-p="3">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/web-development-v3/">Complete Intro to Web Development, v3</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">This web development course will take you from building your first website to having the foundation for becoming a professional web developer. Start learning for free!</div>
<div class="meta">
12 hours, 25 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/web-development-v3/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/web-development-v3/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2022-09-05-web-development-v3/thumb.webp" alt="Complete Intro to Web Development, v3" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="javascript-first-steps" data-hash="FFUQWovrnh" data-so-d="10" data-so-p="4">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/javascript-first-steps/">JavaScript: From First Steps to Professional</a>
</h2>
<div class="Instructor">
<a title="Anjana Vakil" href="https://frontendmasters.com/teachers/anjana-vakil/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/vakil/thumb.webp" alt="Anjana Vakil" loading="lazy" height="78" width="78">
</div>
<div class="name">Anjana Vakil</div>
<div class="organization">Software Engineer & Educator</div>
</a>
</div>
<div class="description">Take your first steps into the wide world of JavaScript and walk away with the core skills needed to become a professional JavaScript programmer!</div>
<div class="meta">
14 hours, 19 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/javascript-first-steps/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/javascript-first-steps/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2022-11-15-javascript-first-steps/thumb.webp" alt="JavaScript: From First Steps to Professional" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="algorithms" data-hash="aPVwjxMZsP" data-so-d="17" data-so-p="5">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/algorithms/">The Last Algorithms Course You'll Need</a>
</h2>
<div class="Instructor">
<a title="ThePrimeagen" href="https://frontendmasters.com/teachers/the-primeagen/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/theprimeagen/thumb.webp" alt="ThePrimeagen" loading="lazy" height="78" width="78">
</div>
<div class="name">ThePrimeagen</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">The last algorithms course you’ll need to pass tough interview questions that use arrays, lists, trees, graphs, maps, and searching and sorting algorithms.</div>
<div class="meta">
9 hours, 20 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/algorithms/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/algorithms/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2022-09-12-algorithms/thumb.webp" alt="The Last Algorithms Course You'll Need" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="fullstack-app-next-v2" data-hash="ywwnxxAVbp" data-so-d="1" data-so-p="6">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/fullstack-app-next-v2/">Build a Fullstack App with Next.js, v2</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Create a full-stack Project Management app from scratch in Next.js. See how all the pieces of Next.js/React fit together to deploy your app to the world!</div>
<div class="meta">
5 hours, 46 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/fullstack-app-next-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/fullstack-app-next-v2/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2023-02-01-fullstack-app-next-v2/thumb.webp" alt="Build a Fullstack App with Next.js, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="javascript-hard-parts-v2" data-hash="fjjCYVxYTO" data-so-d="96" data-so-p="7">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/javascript-hard-parts-v2/">JavaScript: The Hard Parts, v2</a>
</h2>
<div class="Instructor">
<a title="Will Sentance" href="https://frontendmasters.com/teachers/will-sentance/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/sentance/thumb.webp" alt="Will Sentance" loading="lazy" height="78" width="78">
</div>
<div class="name">Will Sentance</div>
<div class="organization">Codesmith</div>
</a>
</div>
<div class="description">Take your JavaScript to the next level. Gain an understanding of callbacks, higher-order functions, closure, asynchronous and object-oriented JavaScript!</div>
<div class="meta">
6 hours, 41 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/javascript-hard-parts-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/javascript-hard-parts-v2/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2020-01-07-javascript-hard-parts-v2/thumb.webp" alt="JavaScript: The Hard Parts, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="react-performance" data-hash="LsnQTNQFNc" data-so-d="3" data-so-p="8">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/react-performance/">React Performance</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Write performant React apps by learning to structure components and memoize to avoid re-renders, load code on-demand, and leverage new concurrent features in React 18.</div>
<div class="meta">
4 hours, 31 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/react-performance/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/react-performance/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2023-01-23-react-performance/thumb.webp" alt="React Performance" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="typescript-v3" data-hash="sjcvFAjmBl" data-so-d="54" data-so-p="9">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/typescript-v3/">TypeScript Fundamentals, v3</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provides a superior developer experience for collaborative teams.</div>
<div class="meta">
4 hours, 27 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/typescript-v3/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/typescript-v3/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-08-03-typescript-v3/thumb.webp" alt="TypeScript Fundamentals, v3" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="deep-javascript-v3" data-hash="OnFYbrRoyf" data-so-d="117" data-so-p="10">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/deep-javascript-v3/">Deep JavaScript Foundations, v3</a>
</h2>
<div class="Instructor">
<a title="Kyle Simpson" href="https://frontendmasters.com/teachers/kyle-simpson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/simpson/thumb.webp" alt="Kyle Simpson" loading="lazy" height="78" width="78">
</div>
<div class="name">Kyle Simpson</div>
<div class="organization">You Don't Know JS</div>
</a>
</div>
<div class="description">Dive into JavaScript's core language features; types & coercion, scope & closure, and JavaScript's object-oriented system.</div>
<div class="meta">
10 hours, 32 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/deep-javascript-v3/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/deep-javascript-v3/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-04-03-deep-javascript-v3/thumb.webp" alt="Deep JavaScript Foundations, v3" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="intermediate-react-v5" data-hash="TTIuIDprQc" data-so-d="8" data-so-p="11">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/intermediate-react-v5/">Intermediate React, v5</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">Learn to build scalable React applications using the latest tools and techniques. Topics include hooks, TailwindCSS, code splitting, server-side rendering, TypeScript, Redux Toolkit, and testing with Vitest.</div>
<div class="meta">
6 hours, 6 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/intermediate-react-v5/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/intermediate-react-v5/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2022-12-06-intermediate-react-v5/thumb.webp" alt="Intermediate React, v5" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="api-design-nodejs-v4" data-hash="AYUIUpryxz" data-so-d="11" data-so-p="12">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/api-design-nodejs-v4/">API Design in Node.js, v4</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Use Express to build a REST API Design in Node.js – read and update from a Postgres database using Prisma and TypeScript.</div>
<div class="meta">
7 hours, 4 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/api-design-nodejs-v4/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/api-design-nodejs-v4/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2022-11-03-api-design-nodejs-v4/thumb.webp" alt="API Design in Node.js, v4" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="react-typescript-v2" data-hash="XgkBlJxZQC" data-so-d="4" data-so-p="13">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/react-typescript-v2/">React and TypeScript, v2</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Use TypeScript with Components, Context API, React Hooks, and type props to build more robust and reliable React applications at scale.</div>
<div class="meta">
4 hours, 31 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/react-typescript-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/react-typescript-v2/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2023-01-19-react-typescript-v2/thumb.webp" alt="React and TypeScript, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="getting-started-css" data-hash="jQdKurJCyS" data-so-d="43" data-so-p="14">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/getting-started-css/">Getting Started with CSS</a>
</h2>
<div class="Instructor">
<a title="Jen Kramer" href="https://frontendmasters.com/teachers/jen-kramer/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/kramer/thumb.webp" alt="Jen Kramer" loading="lazy" height="78" width="78">
</div>
<div class="name">Jen Kramer</div>
<div class="organization">Freelance Instructor</div>
</a>
</div>
<div class="description">Get to know CSS in the right way without the fluff. You'll style text, build navigation bars, headers/footers, add icons, and more!</div>
<div class="meta">
3 hours, 19 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/getting-started-css/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/getting-started-css/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-12-14-getting-started-css/thumb.webp" alt="Getting Started with CSS" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="vue-fundamentals" data-hash="VcBlSkIIXh" data-so-d="7" data-so-p="15">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/vue-fundamentals/">Vue 3 Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Ben Hong" href="https://frontendmasters.com/teachers/ben-hong/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/hong/thumb.webp" alt="Ben Hong" loading="lazy" height="78" width="78">
</div>
<div class="name">Ben Hong</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Learn to build complete apps with Vue: create flexible components using directives, props, lifecycle hooks, and slots. And use Vue Router for routing and Pinia for state management.</div>
<div class="meta">
7 hours, 0 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/vue-fundamentals/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/vue-fundamentals/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2023-01-04-vue-fundamentals/thumb.webp" alt="Vue 3 Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="css-grid-flexbox-v2" data-hash="ePdSMfagcI" data-so-d="48" data-so-p="16">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/css-grid-flexbox-v2/">CSS Grid & Flexbox for Responsive Layouts, v2</a>
</h2>
<div class="Instructor">
<a title="Jen Kramer" href="https://frontendmasters.com/teachers/jen-kramer/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/kramer/thumb.webp" alt="Jen Kramer" loading="lazy" height="78" width="78">
</div>
<div class="name">Jen Kramer</div>
<div class="organization">Freelance Instructor</div>
</a>
</div>
<div class="description">Learn the essential CSS layout techniques for building responsive, beautiful websites. You'll use CSS Grid and Flexbox to build out real-world web layouts!</div>
<div class="meta">
5 hours, 49 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/css-grid-flexbox-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/css-grid-flexbox-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-10-26-css-grid-flexbox-v2/thumb.webp" alt="CSS Grid & Flexbox for Responsive Layouts, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="angular-13" data-hash="AuhleNaxjB" data-so-d="39" data-so-p="17">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/angular-13/">Angular 13 Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Lukas Ruebbelke" href="https://frontendmasters.com/teachers/lukas-ruebbelke/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb.webp" alt="Lukas Ruebbelke" loading="lazy" height="78" width="78">
</div>
<div class="name">Lukas Ruebbelke</div>
<div class="organization">Venmo</div>
</a>
</div>
<div class="description">Learn Angular fundamentals through building an app with real-world features! We start off using the Angular CLI to get set up quickly. </div>
<div class="meta">
6 hours, 52 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/angular-13/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/angular-13/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-02-01-angular-13/thumb.webp" alt="Angular 13 Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="node-js-v2" data-hash="rhuQtnYZzv" data-so-d="55" data-so-p="18">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/node-js-v2/">Introduction to Node.js, v2</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Transfer your JavaScript skills to the server-side and level up to a full-stack engineer! Learn the foundations of Node.js in this course.</div>
<div class="meta">
4 hours, 51 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/node-js-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/node-js-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-07-20-node-js-v2/thumb.webp" alt="Introduction to Node.js, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="javascript-new-hard-parts" data-hash="mKwIKFRvDi" data-so-d="132" data-so-p="19">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/javascript-new-hard-parts/">JavaScript: The New Hard Parts</a>
</h2>
<div class="Instructor">
<a title="Will Sentance" href="https://frontendmasters.com/teachers/will-sentance/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/sentance/thumb.webp" alt="Will Sentance" loading="lazy" height="78" width="78">
</div>
<div class="name">Will Sentance</div>
<div class="organization">Codesmith</div>
</a>
</div>
<div class="description">Gain an intuitive understanding of the new features of JavaScript in ES6+: iterators, generators, promises, and async/await!</div>
<div class="meta">
4 hours, 46 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/javascript-new-hard-parts/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/javascript-new-hard-parts/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-07-10-javascript-new-hard-parts/thumb.webp" alt="JavaScript: The New Hard Parts" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="redux-fundamentals" data-hash="DJrEjJHNII" data-so-d="57" data-so-p="20">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/redux-fundamentals/">Redux Fundamentals (feat. React)</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Learn the Redux API from scratch, then learn to hook the Redux React application. You'll also learn how to extend Redux with various tools from its ecosystem.</div>
<div class="meta">
4 hours, 41 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/redux-fundamentals/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/redux-fundamentals/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-06-15-redux-fundamentals/thumb.webp" alt="Redux Fundamentals (feat. React)" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="fullstack-v2" data-hash="fIJhIqUIUG" data-so-d="99" data-so-p="21">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/fullstack-v2/">Full Stack for Front-End Engineers, v2</a>
</h2>
<div class="Instructor">
<a title="Jem Young" href="https://frontendmasters.com/teachers/jem-young/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/young/thumb.webp" alt="Jem Young" loading="lazy" height="78" width="78">
</div>
<div class="name">Jem Young</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Learn to move back and forth between UI and the back-end through the command line and full-stack developer course to become a well-rounded engineer.</div>
<div class="meta">
6 hours, 19 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/fullstack-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/fullstack-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-11-13-fullstack-v2/thumb.webp" alt="Full Stack for Front-End Engineers, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="getting-started-javascript-v2" data-hash="PCLLiLkdZh" data-so-d="110" data-so-p="22">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/getting-started-javascript-v2/">Getting Started with JavaScript, v2</a>
</h2>
<div class="Instructor">
<a title="Kyle Simpson" href="https://frontendmasters.com/teachers/kyle-simpson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/simpson/thumb.webp" alt="Kyle Simpson" loading="lazy" height="78" width="78">
</div>
<div class="name">Kyle Simpson</div>
<div class="organization">You Don't Know JS</div>
</a>
</div>
<div class="description">Get a tour of the building blocks of programming like variables, loops, functions and operations. Then learn the three main pillars of JavaScript.</div>
<div class="meta">
2 hours, 36 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/getting-started-javascript-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/getting-started-javascript-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-06-20-getting-started-javascript-v2/thumb.webp" alt="Getting Started with JavaScript, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="intermediate-typescript" data-hash="JTuWgaLmeq" data-so-d="53" data-so-p="23">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/intermediate-typescript/">Intermediate TypeScript</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative teams.</div>
<div class="meta">
2 hours, 48 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/intermediate-typescript/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/intermediate-typescript/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-08-04-intermediate-typescript/thumb.webp" alt="Intermediate TypeScript" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="sql" data-hash="KVDvpbMgzq" data-so-d="14" data-so-p="24">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/sql/">Complete Intro to SQL & PostgreSQL</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">Using the popular PostgreSQL database, you'll learn to set up, model, and query your data through real-world projects.</div>
<div class="meta">
7 hours, 20 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/sql/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/sql/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-10-03-sql/thumb.webp" alt="Complete Intro to SQL & PostgreSQL" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="functional-javascript-v3" data-hash="rQmLjQuRvc" data-so-d="111" data-so-p="25">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/functional-javascript-v3/">Functional-Light JavaScript, v3</a>
</h2>
<div class="Instructor">
<a title="Kyle Simpson" href="https://frontendmasters.com/teachers/kyle-simpson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/simpson/thumb.webp" alt="Kyle Simpson" loading="lazy" height="78" width="78">
</div>
<div class="name">Kyle Simpson</div>
<div class="organization">You Don't Know JS</div>
</a>
</div>
<div class="description">Improve your JavaScript by applying functional programming concepts like function purity, point-free, partial-application, currying, plus even more advanced concepts.</div>
<div class="meta">
10 hours, 1 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/functional-javascript-v3/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/functional-javascript-v3/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-06-18-functional-javascript-v3/thumb.webp" alt="Functional-Light JavaScript, v3" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="tour-js-patterns" data-hash="BBgGhXjCmk" data-so-d="20" data-so-p="26">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/tour-js-patterns/">A Tour of JavaScript & React Patterns</a>
</h2>
<div class="Instructor">
<a title="Lydia Hallie" href="https://frontendmasters.com/teachers/lydia-hallie/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/hallie/thumb.webp" alt="Lydia Hallie" loading="lazy" height="78" width="78">
</div>
<div class="name">Lydia Hallie</div>
<div class="organization">Lydia Hallie</div>
</a>
</div>
<div class="description">Learn a suite of design patterns to improve your JavaScript and React code architecture!</div>
<div class="meta">
3 hours, 29 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/tour-js-patterns/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/tour-js-patterns/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-08-18-tour-js-patterns/thumb.webp" alt="A Tour of JavaScript & React Patterns" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="servers-node-js" data-hash="GuXNAjfipL" data-so-d="112" data-so-p="27">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/servers-node-js/">The Hard Parts of Servers & Node.js</a>
</h2>
<div class="Instructor">
<a title="Will Sentance" href="https://frontendmasters.com/teachers/will-sentance/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/sentance/thumb.webp" alt="Will Sentance" loading="lazy" height="78" width="78">
</div>
<div class="name">Will Sentance</div>
<div class="organization">Codesmith</div>
</a>
</div>
<div class="description">Uncover the most challenging, yet most powerful features in server Node.js, to help you write and debug professional server code.</div>
<div class="meta">
5 hours, 16 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/servers-node-js/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/servers-node-js/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-05-24-servers-node-js/thumb.webp" alt="The Hard Parts of Servers & Node.js" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="reactivity-solidjs" data-hash="AfzhMTNqFF" data-so-d="6" data-so-p="28">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/reactivity-solidjs/">Reactivity with SolidJS</a>
</h2>
<div class="Instructor">
<a title="Ryan Carniato" href="https://frontendmasters.com/teachers/ryan-carniato/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/carniato/thumb.webp" alt="Ryan Carniato" loading="lazy" height="78" width="78">
</div>
<div class="name">Ryan Carniato</div>
<div class="organization">SolidJS Creator</div>
</a>
</div>
<div class="description">SolidJS uses its Reactivity to make fine-grained subscriptions which only update parts of the DOM on changes, instead of doing heavy DOM diffing.</div>
<div class="meta">
4 hours, 32 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/reactivity-solidjs/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/reactivity-solidjs/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2023-01-09-reactivity-solidjs/thumb.webp" alt="Reactivity with SolidJS" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="css-animations" data-hash="bVnJQHVenp" data-so-d="25" data-so-p="29">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/css-animations/">CSS Animations and Transitions</a>
</h2>
<div class="Instructor">
<a title="David Khourshid" href="https://frontendmasters.com/teachers/david-khourshid/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/khourshid/thumb.webp" alt="David Khourshid" loading="lazy" height="78" width="78">
</div>
<div class="name">David Khourshid</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Learn CSS transitions, animations, custom properties, data attributes, choreography, animation states, layout animations, and reactive animations with a little bit of JavaScript.</div>
<div class="meta">
4 hours, 14 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/css-animations/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/css-animations/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-07-25-css-animations/thumb.webp" alt="CSS Animations and Transitions" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="developer-productivity" data-hash="vVSLJGZqHa" data-so-d="49" data-so-p="30">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/developer-productivity/">Developer Productivity</a>
</h2>
<div class="Instructor">
<a title="ThePrimeagen" href="https://frontendmasters.com/teachers/the-primeagen/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/theprimeagen/thumb.webp" alt="ThePrimeagen" loading="lazy" height="78" width="78">
</div>
<div class="name">ThePrimeagen</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Build a pro dev workflow to increase your developer productivity across multiple machines, projects, and technologies. Learn more!</div>
<div class="meta">
4 hours, 17 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/developer-productivity/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/developer-productivity/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-10-19-developer-productivity/thumb.webp" alt="Developer Productivity" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="react-native-v2" data-hash="HfJIiqENhw" data-so-d="86" data-so-p="31">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/react-native-v2/">React Native, v2</a>
</h2>
<div class="Instructor">
<a title="Kadi Kraman" href="https://frontendmasters.com/teachers/kadi-kraman/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/kraman/thumb.webp" alt="Kadi Kraman" loading="lazy" height="78" width="78">
</div>
<div class="name">Kadi Kraman</div>
<div class="organization">Formidable</div>
</a>
</div>
<div class="description">Build a React Native application from scratch. Use Expo to get started quickly, learn the native components available in React Native, add navigation and more.</div>
<div class="meta">
4 hours, 4 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/react-native-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/react-native-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-05-05-react-native-v2/thumb.webp" alt="React Native, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="complete-intro-containers" data-hash="CxVNOnuNpe" data-so-d="95" data-so-p="32">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/complete-intro-containers/">Complete Intro to Containers (feat. Docker)</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">Learn to create containers with Dockerfiles, run containers from Dockerhub, and learn best practices for front-end and Node.js code in containers.</div>
<div class="meta">
6 hours, 4 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/complete-intro-containers/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/complete-intro-containers/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-01-15-complete-intro-containers/thumb.webp" alt="Complete Intro to Containers (feat. Docker)" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="remix" data-hash="AgGsDUeyBO" data-so-d="16" data-so-p="33">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/remix/">Remix Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Kent C. Dodds" href="https://frontendmasters.com/teachers/kentcdodds/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/dodds/thumb.webp" alt="Kent C. Dodds" loading="lazy" height="78" width="78">
</div>
<div class="name">Kent C. Dodds</div>
<div class="organization">Professional Trainer</div>
</a>
</div>
<div class="description">Build static websites and dynamic web apps with Remix. Learn how to fetch data, leverage nested routing, eliminate pending states, and handle errors in Remix.</div>
<div class="meta">
3 hours, 55 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/remix/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/remix/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-09-26-remix/thumb.webp" alt="Remix Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="aws-v2" data-hash="wzSBGZLtYJ" data-so-d="36" data-so-p="34">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/aws-v2/">AWS For Front-End Engineers, v2</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Build an enterprise-grade deployment infrastructure on AWS using S3, Route 53, CloudFront, lambda@edge, and more!</div>
<div class="meta">
3 hours, 40 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/aws-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/aws-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-03-01-aws-v2/thumb.webp" alt="AWS For Front-End Engineers, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="git-in-depth" data-hash="SanGSxIIIS" data-so-d="140" data-so-p="35">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/git-in-depth/">Git In-depth</a>
</h2>
<div class="Instructor">
<a title="Nina Zakharenko" href="https://frontendmasters.com/teachers/nina-zakharenko/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/zakharenko/thumb.webp" alt="Nina Zakharenko" loading="lazy" height="78" width="78">
</div>
<div class="name">Nina Zakharenko</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">A deep dive into git, this course is for developers who use it every day and want to learn inner workings and use advanced techniques in git.</div>
<div class="meta">
3 hours, 27 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/git-in-depth/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/git-in-depth/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-02-20-git-in-depth/thumb.webp" alt="Git In-depth" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="typescript-go-rust" data-hash="DyeTNUbOea" data-so-d="21" data-so-p="36">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/typescript-go-rust/">Polyglot Programming: TypeScript, Go, & Rust</a>
</h2>
<div class="Instructor">
<a title="ThePrimeagen" href="https://frontendmasters.com/teachers/the-primeagen/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/theprimeagen/thumb.webp" alt="ThePrimeagen" loading="lazy" height="78" width="78">
</div>
<div class="name">ThePrimeagen</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Bend your mind with programming a fully unit tested CLI application in three TypeScript, Go, and Rust back-to-back!</div>
<div class="meta">
8 hours, 49 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/typescript-go-rust/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/typescript-go-rust/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-08-13-typescript-go-rust/thumb.webp" alt="Polyglot Programming: TypeScript, Go, & Rust" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="computer-science-v2" data-hash="qHdtZgDFSD" data-so-d="56" data-so-p="37">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/computer-science-v2/">Complete Intro to Computer Science</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">Learn our computer science intro course and understand Algorithms and Big O Analysis, Recursion, Sorting, Data Structures, AVL Trees, and more.</div>
<div class="meta">
8 hours, 59 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/computer-science-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/computer-science-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-07-06-computer-science-v2/thumb.webp" alt="Complete Intro to Computer Science" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="functional-first-steps" data-hash="jIKTAxiZEg" data-so-d="68" data-so-p="38">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/functional-first-steps/">Functional JavaScript First Steps</a>
</h2>
<div class="Instructor">
<a title="Anjana Vakil" href="https://frontendmasters.com/teachers/anjana-vakil/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/vakil/thumb.webp" alt="Anjana Vakil" loading="lazy" height="78" width="78">
</div>
<div class="name">Anjana Vakil</div>
<div class="organization">Software Engineer & Educator</div>
</a>
</div>
<div class="description">Learn core functional programming course and code everything with pure functions, learning recursion, higher-order functions, closures, and function composition. </div>
<div class="meta">
3 hours, 54 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/functional-first-steps/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/functional-first-steps/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-02-09-functional-first-steps/thumb.webp" alt="Functional JavaScript First Steps" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="accessibility-v2" data-hash="UgdquArXzt" data-so-d="58" data-so-p="39">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/accessibility-v2/">Website Accessibility, v2</a>
</h2>
<div class="Instructor">
<a title="Jon Kuperman" href="https://frontendmasters.com/teachers/jon-kuperman/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/kuperman/thumb.webp" alt="Jon Kuperman" loading="lazy" height="78" width="78">
</div>
<div class="name">Jon Kuperman</div>
<div class="organization">Cloudflare</div>
</a>
</div>
<div class="description">Learn how to audit & fix website accessibility issues. Learn keyboard accessibility, focus control & ARIA roles to make websites accessibel to screen readers.</div>
<div class="meta">
2 hours, 52 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/accessibility-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/accessibility-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-06-08-accessibility-v2/thumb.webp" alt="Website Accessibility, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="background-javascript" data-hash="lHlkBrxIem" data-so-d="5" data-so-p="40">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/background-javascript/">JavaScript in the Background</a>
</h2>
<div class="Instructor">
<a title="Maximiliano Firtman" href="https://frontendmasters.com/teachers/firt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/firtman/thumb.webp" alt="Maximiliano Firtman" loading="lazy" height="78" width="78">
</div>
<div class="name">Maximiliano Firtman</div>
<div class="organization">Independent Consultant</div>
</a>
</div>
<div class="description">Explore new web app capabilities to detect when your web app is in the background to execute code later, even when your web app isn’t in focus.</div>
<div class="meta">
4 hours, 59 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/background-javascript/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/background-javascript/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2023-01-12-background-javascript/thumb.webp" alt="JavaScript in the Background" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="figma" data-hash="xUcATGVOkH" data-so-d="34" data-so-p="41">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/figma/">Figma for Developers</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Learn Figma for creating user interface prototypes. Make shapes and frames that will hold the different pieces of the UI. You’ll also learn how to use reusable styles, typography, and components that you can use to create prototypes.</div>
<div class="meta">
4 hours, 17 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/figma/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/figma/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-04-26-figma/thumb.webp" alt="Figma for Developers" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="intermediate-html-css" data-hash="EhZkLBcdNC" data-so-d="18" data-so-p="42">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/intermediate-html-css/">Intermediate HTML & CSS</a>
</h2>
<div class="Instructor">
<a title="Jen Kramer" href="https://frontendmasters.com/teachers/jen-kramer/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/kramer/thumb.webp" alt="Jen Kramer" loading="lazy" height="78" width="78">
</div>
<div class="name">Jen Kramer</div>
<div class="organization">Freelance Instructor</div>
</a>
</div>
<div class="description">Learn modern CSS selectors like :is(), :where(), and :has() and discover new HTML elements and CSS Selectors that you might not know!</div>
<div class="meta">
5 hours, 37 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/intermediate-html-css/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/intermediate-html-css/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-09-06-intermediate-html-css/thumb.webp" alt="Intermediate HTML & CSS" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="linux-command-line" data-hash="yCoqZbtnkv" data-so-d="81" data-so-p="43">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/linux-command-line/">Complete Intro to Linux and the Command-Line</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">Gain powerful command-line skills, learn to use Ubuntu, quit VIM, handle package management, and write your own shell scripts!</div>
<div class="meta">
6 hours, 48 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/linux-command-line/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/linux-command-line/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-08-17-linux-command-line/thumb.webp" alt="Complete Intro to Linux and the Command-Line" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="databases" data-hash="dolmpfSWPL" data-so-d="73" data-so-p="44">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/databases/">Complete Intro to Databases</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">In this course you'll learn the basics of using four of the most popular open-source types of databases: MongoDB, PostgreSQL, Neo4j, and Redis.</div>
<div class="meta">
7 hours, 4 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/databases/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/databases/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-12-08-databases/thumb.webp" alt="Complete Intro to Databases" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="cypress" data-hash="OhxExRsOSc" data-so-d="35" data-so-p="45">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/cypress/">Testing Web Apps with Cypress</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Cypress is the fastest and easiest way to write end-to-end tests for your client-side applications. Learn the selector engine, test runners, assertion library, and write your own custom commands.</div>
<div class="meta">
4 hours, 41 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/cypress/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/cypress/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-03-08-cypress/thumb.webp" alt="Testing Web Apps with Cypress" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="rust" data-hash="xiVmqjEsSa" data-so-d="59" data-so-p="46">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/rust/">The Rust Programming Language</a>
</h2>
<div class="Instructor">
<a title="Richard Feldman" href="https://frontendmasters.com/teachers/richard-feldman/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/feldman/thumb.webp" alt="Richard Feldman" loading="lazy" height="78" width="78">
</div>
<div class="name">Richard Feldman</div>
<div class="organization">NoRedInk</div>
</a>
</div>
<div class="description">Go from zero Rust knowledge to being able to build your own complete Rust programs with Frontend Master's complete Rust course.</div>
<div class="meta">
4 hours, 42 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/rust/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/rust/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-05-11-rust/thumb.webp" alt="The Rust Programming Language" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="web-perf" data-hash="DDyjtRnlHY" data-so-d="63" data-so-p="47">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/web-perf/">Web Performance Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Todd Gardner" href="https://frontendmasters.com/teachers/todd-gardner/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/gardner/thumb.webp" alt="Todd Gardner" loading="lazy" height="78" width="78">
</div>
<div class="name">Todd Gardner</div>
<div class="organization">TrackJS</div>
</a>
</div>
<div class="description">Learn to improve your core web vitals metrics like first contentful paint (FCP), largest contentful paint (LCP), and cumulative layout shift (CLS) in this course.</div>
<div class="meta">
3 hours, 50 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/web-perf/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/web-perf/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-03-23-web-perf/thumb.webp" alt="Web Performance Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="pwas" data-hash="WxLXGOQWFH" data-so-d="41" data-so-p="48">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/pwas/">Build Progressive Web Apps (PWAs) from Scratch</a>
</h2>
<div class="Instructor">
<a title="Maximiliano Firtman" href="https://frontendmasters.com/teachers/firt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/firtman/thumb.webp" alt="Maximiliano Firtman" loading="lazy" height="78" width="78">
</div>
<div class="name">Maximiliano Firtman</div>
<div class="organization">Independent Consultant</div>
</a>
</div>
<div class="description">Build offline-capable Progressive Web Apps with HTML, CSS, and JavaScript: Service workers give you access to the cache storage while App Manifests allow you to be distributed on the Google Play store and Apple App Store.</div>
<div class="meta">
3 hours, 48 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/pwas/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/pwas/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-01-11-pwas/thumb.webp" alt="Build Progressive Web Apps (PWAs) from Scratch" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="vim-fundamentals" data-hash="umKkvduGoy" data-so-d="60" data-so-p="49">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/vim-fundamentals/">VIM Fundamentals</a>
</h2>
<div class="Instructor">
<a title="ThePrimeagen" href="https://frontendmasters.com/teachers/the-primeagen/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/theprimeagen/thumb.webp" alt="ThePrimeagen" loading="lazy" height="78" width="78">
</div>
<div class="name">ThePrimeagen</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Learn the basics of editing and navigation in VIM. You'll learn macros, registers, find, and replaces. Finally, edit your vimrc plugins along with quickfix lists.</div>
<div class="meta">
4 hours, 14 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/vim-fundamentals/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/vim-fundamentals/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-04-20-vim-fundamentals/thumb.webp" alt="VIM Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="webpack-fundamentals" data-hash="dQViGKhBAM" data-so-d="135" data-so-p="50">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/webpack-fundamentals/">Webpack 4 Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Sean Larkin" href="https://frontendmasters.com/teachers/sean-larkin/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/larkin/thumb.webp" alt="Sean Larkin" loading="lazy" height="78" width="78">
</div>
<div class="name">Sean Larkin</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Learn the core concepts of Webpack file loader. Start from scratch and build a pipeline with popular loaders from the Webpack ecosystem. Read more!</div>
<div class="meta">
4 hours, 10 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/webpack-fundamentals/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/webpack-fundamentals/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-06-29-webpack-fundamentals/thumb.webp" alt="Webpack 4 Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="nuxt" data-hash="vOVSMmwVVj" data-so-d="13" data-so-p="51">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/nuxt/">Nuxt 3 Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Ben Hong" href="https://frontendmasters.com/teachers/ben-hong/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/hong/thumb.webp" alt="Ben Hong" loading="lazy" height="78" width="78">
</div>
<div class="name">Ben Hong</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Nuxt is a robust full-stack framework to build fully static and dynamic apps with Vue. Learn to create and deploy real-world Nuxt apps!</div>
<div class="meta">
3 hours, 19 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/nuxt/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/nuxt/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-10-17-nuxt/thumb.webp" alt="Nuxt 3 Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="js-recent-parts" data-hash="IgKwlZvgwG" data-so-d="116" data-so-p="52">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/js-recent-parts/">JavaScript: The Recent Parts</a>
</h2>
<div class="Instructor">
<a title="Kyle Simpson" href="https://frontendmasters.com/teachers/kyle-simpson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/simpson/thumb.webp" alt="Kyle Simpson" loading="lazy" height="78" width="78">
</div>
<div class="name">Kyle Simpson</div>
<div class="organization">You Don't Know JS</div>
</a>
</div>
<div class="description">Get up to speed with new object destructuring JavaScript features like tagged template literals, destructuring, iterators, generators, and async-await. Learn more!</div>
<div class="meta">
4 hours, 9 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/js-recent-parts/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/js-recent-parts/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-04-05-js-recent-parts/thumb.webp" alt="JavaScript: The Recent Parts" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="enterprise-patterns" data-hash="dHIefjqPHz" data-so-d="69" data-so-p="53">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/enterprise-patterns/">Enterprise Architecture Patterns</a>
</h2>
<div class="Instructor">
<a title="Lukas Ruebbelke" href="https://frontendmasters.com/teachers/lukas-ruebbelke/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb.webp" alt="Lukas Ruebbelke" loading="lazy" height="78" width="78">
</div>
<div class="name">Lukas Ruebbelke</div>
<div class="organization">Venmo</div>
</a>
</div>
<div class="description">Build non-trivial enterprise-level web applications through first-principles thinking applied to programming in JavaScript and TypeScript.</div>
<div class="meta">
5 hours, 39 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/enterprise-patterns/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/enterprise-patterns/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-02-02-enterprise-patterns/thumb.webp" alt="Enterprise Architecture Patterns" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="typescript-practice" data-hash="rqdHSWxRvB" data-so-d="33" data-so-p="54">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/typescript-practice/">Making TypeScript Stick</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">Get hands-on practice using advanced TypeScript concepts. Test your knowledge through quizzes, challenges, and even a TypeScript game show!</div>
<div class="meta">
3 hours, 59 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/typescript-practice/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/typescript-practice/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-05-10-typescript-practice/thumb.webp" alt="Making TypeScript Stick" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="web-assembly" data-hash="lAQpjjfdpL" data-so-d="61" data-so-p="55">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/web-assembly/">Web Assembly (Wasm)</a>
</h2>
<div class="Instructor">
<a title="Jem Young" href="https://frontendmasters.com/teachers/jem-young/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/young/thumb.webp" alt="Jem Young" loading="lazy" height="78" width="78">
</div>
<div class="name">Jem Young</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Learn foundational, low-level programming such as binary, hexadecimal, array buffers, memory management, and unsigned integers.</div>
<div class="meta">
3 hours, 43 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/web-assembly/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/web-assembly/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-04-07-web-assembly/thumb.webp" alt="Web Assembly (Wasm)" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="client-graphql-react" data-hash="GlqOUExOTN" data-so-d="97" data-so-p="56">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/client-graphql-react/">Client-Side GraphQL in React</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Use queries and mutations to interact with GraphQL APIs on the client using Apollo Client and React hooks. Learn more about the React Apollo GraphQL tutorial.</div>
<div class="meta">
2 hours, 53 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/client-graphql-react/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/client-graphql-react/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-12-03-client-graphql-react/thumb.webp" alt="Client-Side GraphQL in React" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="firebase" data-hash="gypiELGqEm" data-so-d="22" data-so-p="57">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/firebase/">Firebase Fundamentals</a>
</h2>
<div class="Instructor">
<a title="David East" href="https://frontendmasters.com/teachers/david-east/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/east/thumb.webp" alt="David East" loading="lazy" height="78" width="78">
</div>
<div class="name">David East</div>
<div class="organization">Google</div>
</a>
</div>
<div class="description">Code an app with real-time updates using Firebase and Firestore. Add security rules, add Firebase authentication, and trigger server code with Cloud Functions.</div>
<div class="meta">
4 hours, 33 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/firebase/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/firebase/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-08-10-firebase/thumb.webp" alt="Firebase Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="practical-algorithms" data-hash="UVqMUqiitO" data-so-d="136" data-so-p="58">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/practical-algorithms/">A Practical Guide to Algorithms with JavaScript</a>
</h2>
<div class="Instructor">
<a title="Bianca Gandolfo" href="https://frontendmasters.com/teachers/bianca-gandolfo/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/gandolfo/thumb.webp" alt="Bianca Gandolfo" loading="lazy" height="78" width="78">
</div>
<div class="name">Bianca Gandolfo</div>
<div class="organization">Thumbtack</div>
</a>
</div>
<div class="description">Learn to solve algorithms and analyze them efficiently in both an interview setting and also in your day-to-day development.</div>
<div class="meta">
4 hours, 0 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/practical-algorithms/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/practical-algorithms/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-06-05-practical-algorithms/thumb.webp" alt="A Practical Guide to Algorithms with JavaScript" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="production-typescript" data-hash="cbLPFctgkR" data-so-d="75" data-so-p="59">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/production-typescript/">Production-Grade TypeScript</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">Use the TypeScript language at scale to increase the developer experience and productivity of your teams! You’ll learn to manage TypeScript projects.</div>
<div class="meta">
5 hours, 10 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/production-typescript/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/production-typescript/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-11-11-production-typescript/thumb.webp" alt="Production-Grade TypeScript" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="xstate-v2" data-hash="ZkQFvRTynp" data-so-d="42" data-so-p="60">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/xstate-v2/">State Machines in JavaScript with XState, v2</a>
</h2>
<div class="Instructor">
<a title="David Khourshid" href="https://frontendmasters.com/teachers/david-khourshid/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/khourshid/thumb.webp" alt="David Khourshid" loading="lazy" height="78" width="78">
</div>
<div class="name">David Khourshid</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Learn the fundamentals of state machines and statecharts. You'll build state machines without any libraries in pure JavaScript, then use XState to..click to read more.</div>
<div class="meta">
4 hours, 8 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/xstate-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/xstate-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-12-21-xstate-v2/thumb.webp" alt="State Machines in JavaScript with XState, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="rethinking-async-js" data-hash="vqCxMlMXVc" data-so-d="155" data-so-p="61">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/rethinking-async-js/">Rethinking Asynchronous JavaScript</a>
</h2>
<div class="Instructor">
<a title="Kyle Simpson" href="https://frontendmasters.com/teachers/kyle-simpson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/simpson/thumb.webp" alt="Kyle Simpson" loading="lazy" height="78" width="78">
</div>
<div class="name">Kyle Simpson</div>
<div class="organization">You Don't Know JS</div>
</a>
</div>
<div class="description">Effective asynchronous JavaScript means knowing various different patterns and weaving them together to write readable and understandable code. </div>
<div class="meta">
6 hours, 22 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/rethinking-async-js/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/rethinking-async-js/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2016-03-29-rethinking-async-js/thumb.webp" alt="Rethinking Asynchronous JavaScript" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="testing-practices-principles" data-hash="aWjPqVRPhI" data-so-d="129" data-so-p="62">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/testing-practices-principles/">JavaScript Testing Practices and Principles</a>
</h2>
<div class="Instructor">
<a title="Kent C. Dodds" href="https://frontendmasters.com/teachers/kentcdodds/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/dodds/thumb.webp" alt="Kent C. Dodds" loading="lazy" height="78" width="78">
</div>
<div class="name">Kent C. Dodds</div>
<div class="organization">Professional Trainer</div>
</a>
</div>
<div class="description">In this course, you'll learn the principles and best practices for writing maintainable test applications to catch errors before your product reaches the end user.</div>
<div class="meta">
3 hours, 39 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/testing-practices-principles/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/testing-practices-principles/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-08-23-testing-practices-principles/thumb.webp" alt="JavaScript Testing Practices and Principles" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="digging-into-node" data-hash="gpsDPxzjzh" data-so-d="108" data-so-p="63">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/digging-into-node/">Digging Into Node.js</a>
</h2>
<div class="Instructor">
<a title="Kyle Simpson" href="https://frontendmasters.com/teachers/kyle-simpson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/simpson/thumb.webp" alt="Kyle Simpson" loading="lazy" height="78" width="78">
</div>
<div class="name">Kyle Simpson</div>
<div class="organization">You Don't Know JS</div>
</a>
</div>
<div class="description">Learn the fundamental concepts of Node.js programming: CLI programming, file system access, asynchrony, HTTP servers & routing, and database persistence.</div>
<div class="meta">
4 hours, 0 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/digging-into-node/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/digging-into-node/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-07-09-digging-into-node/thumb.webp" alt="Digging Into Node.js" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="interviewing-frontend" data-hash="SpxKGsswxH" data-so-d="94" data-so-p="64">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/interviewing-frontend/">Interviewing for Front-End Engineers</a>
</h2>
<div class="Instructor">
<a title="Jem Young" href="https://frontendmasters.com/teachers/jem-young/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/young/thumb.webp" alt="Jem Young" loading="lazy" height="78" width="78">
</div>
<div class="name">Jem Young</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Prepare for the recruiter prescreen questions, from the phone screen to real cultural and technical interview questions that companies use to screen candidates.</div>
<div class="meta">
2 hours, 53 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/interviewing-frontend/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/interviewing-frontend/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-02-13-interviewing-frontend/thumb.webp" alt="Interviewing for Front-End Engineers" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="ux-design-principles" data-hash="QmWxshPtQo" data-so-d="45" data-so-p="65">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/ux-design-principles/">Web UX Design for High Converting Websites</a>
</h2>
<div class="Instructor">
<a title="Paul Boag" href="https://frontendmasters.com/teachers/paul-boag/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/boag/thumb.webp" alt="Paul Boag" loading="lazy" height="78" width="78">
</div>
<div class="name">Paul Boag</div>
<div class="organization">Boagworld</div>
</a>
</div>
<div class="description">Learn to make websites more engaging through good design, fascinating content, and solid UX in this course by Paul Boag.</div>
<div class="meta">
4 hours, 49 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/ux-design-principles/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/ux-design-principles/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-11-23-ux-design-principles/thumb.webp" alt="Web UX Design for High Converting Websites" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="functional-js-fundamentals" data-hash="LNUxgOqjlG" data-so-d="103" data-so-p="66">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/functional-js-fundamentals/">The Hard Parts of Functional JavaScript</a>
</h2>
<div class="Instructor">
<a title="Will Sentance" href="https://frontendmasters.com/teachers/will-sentance/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/sentance/thumb.webp" alt="Will Sentance" loading="lazy" height="78" width="78">
</div>
<div class="name">Will Sentance</div>
<div class="organization">Codesmith</div>
</a>
</div>
<div class="description">Go under the hood of powerful techniques like: Higher Order Functions, Function Composition, Pure Functions, and Immutability of State.</div>
<div class="meta">
4 hours, 54 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/functional-js-fundamentals/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/functional-js-fundamentals/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-10-01-functional-js-fundamentals/thumb.webp" alt="The Hard Parts of Functional JavaScript" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="flutter" data-hash="boSKcKQkpY" data-so-d="26" data-so-p="67">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/flutter/">Cross-Platform Mobile Apps with Flutter</a>
</h2>
<div class="Instructor">
<a title="Maximiliano Firtman" href="https://frontendmasters.com/teachers/firt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/firtman/thumb.webp" alt="Maximiliano Firtman" loading="lazy" height="78" width="78">
</div>
<div class="name">Maximiliano Firtman</div>
<div class="organization">Independent Consultant</div>
</a>
</div>
<div class="description">Create your first multi-platform application using Dart, including native apps for iOS, Android, desktop computers, and Progressive Web Apps.</div>
<div class="meta">
5 hours, 20 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/flutter/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/flutter/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-06-24-flutter/thumb.webp" alt="Cross-Platform Mobile Apps with Flutter" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="object-oriented-js" data-hash="VdDknuKaxo" data-so-d="123" data-so-p="68">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/object-oriented-js/">The Hard Parts of Object Oriented JavaScript</a>
</h2>
<div class="Instructor">
<a title="Will Sentance" href="https://frontendmasters.com/teachers/will-sentance/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/sentance/thumb.webp" alt="Will Sentance" loading="lazy" height="78" width="78">
</div>
<div class="name">Will Sentance</div>
<div class="organization">Codesmith</div>
</a>
</div>
<div class="description">Understand JavaScript’s prototypal design and ES6+ classes to better organize and scale your JavaScript apps.</div>
<div class="meta">
4 hours, 30 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/object-oriented-js/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/object-oriented-js/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-10-22-object-oriented-js/thumb.webp" alt="The Hard Parts of Object Oriented JavaScript" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="fullstack-typescript" data-hash="CAQFZGSYNH" data-so-d="32" data-so-p="69">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/fullstack-typescript/">Fullstack TypeScript (feat. GraphQL & Node.js)</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">Generate TypeScript code based on a GraphQL schema. Combine TypeScript and GraphQL's type systems to create full-stack, fully-type-checked codebases.</div>
<div class="meta">
3 hours, 11 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/fullstack-typescript/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/fullstack-typescript/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-05-11-fullstack-typescript/thumb.webp" alt="Fullstack TypeScript (feat. GraphQL & Node.js)" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="production-vue" data-hash="dJJTVZdbuk" data-so-d="67" data-so-p="70">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/production-vue/">Production-Grade Vue.js</a>
</h2>
<div class="Instructor">
<a title="Ben Hong" href="https://frontendmasters.com/teachers/ben-hong/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/hong/thumb.webp" alt="Ben Hong" loading="lazy" height="78" width="78">
</div>
<div class="name">Ben Hong</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Learn component design patterns, workflows to enhance productivity, testing methodologies, state management, routing, and more!</div>
<div class="meta">
4 hours, 37 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/production-vue/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/production-vue/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-02-18-production-vue/thumb.webp" alt="Production-Grade Vue.js" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="design-systems" data-hash="iyZxCXkIff" data-so-d="85" data-so-p="71">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/design-systems/">Design Systems with React & Storybook</a>
</h2>
<div class="Instructor">
<a title="Emma Bostian" href="https://frontendmasters.com/teachers/emma-bostian/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/bostian/thumb.webp" alt="Emma Bostian" loading="lazy" height="78" width="78">
</div>
<div class="name">Emma Bostian</div>
<div class="organization">Spotify</div>
</a>
</div>
<div class="description">Design components with Figma, and then learn to code your components in React, and document them for your teams with Storybook.</div>
<div class="meta">
3 hours, 31 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/design-systems/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/design-systems/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-05-12-design-systems/thumb.webp" alt="Design Systems with React & Storybook" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="server-graphql-nodejs" data-hash="ZicDNzflOZ" data-so-d="98" data-so-p="73">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/server-graphql-nodejs/">Server-Side GraphQL in Node.js</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Learn how to create a GraphQL schema which includes type definitions, queries, and mutations. Start learning today! </div>
<div class="meta">
3 hours, 24 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/server-graphql-nodejs/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/server-graphql-nodejs/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-11-25-server-graphql-nodejs/thumb.webp" alt="Server-Side GraphQL in Node.js" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="intermediate-react-native" data-hash="ClOEJZOMNq" data-so-d="47" data-so-p="74">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/intermediate-react-native/">Intermediate React Native</a>
</h2>
<div class="Instructor">
<a title="Kadi Kraman" href="https://frontendmasters.com/teachers/kadi-kraman/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/kraman/thumb.webp" alt="Kadi Kraman" loading="lazy" height="78" width="78">
</div>
<div class="name">Kadi Kraman</div>
<div class="organization">Formidable</div>
</a>
</div>
<div class="description">Learn how to persist data across app launches, add images to your React Native app, use gestures, add animations, and much more!</div>
<div class="meta">
4 hours, 18 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/intermediate-react-native/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/intermediate-react-native/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-11-02-intermediate-react-native/thumb.webp" alt="Intermediate React Native" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="design-for-developers" data-hash="nRWrEKfTHw" data-so-d="119" data-so-p="76">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/design-for-developers/">Design for Developers</a>
</h2>
<div class="Instructor">
<a title="Sarah Drasner" href="https://frontendmasters.com/teachers/sarah-drasner/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/drasner/thumb.webp" alt="Sarah Drasner" loading="lazy" height="78" width="78">
</div>
<div class="name">Sarah Drasner</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Become self-sufficient for the entire process from concept to design to implementation. Learn the creation & execution of complete front-end experiences!</div>
<div class="meta">
4 hours, 20 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/design-for-developers/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/design-for-developers/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-01-13-design-for-developers/thumb.webp" alt="Design for Developers" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="rx-js" data-hash="EXqkupoaDS" data-so-d="40" data-so-p="77">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/rx-js/">Rx.js Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Master the basics of Rx.js by creating an observable from scratch, manipulate data arriving over time with Rx.js operators.</div>
<div class="meta">
3 hours, 57 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/rx-js/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/rx-js/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-01-25-rx-js/thumb.webp" alt="Rx.js Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="modern-seo" data-hash="NRaQykXcES" data-so-d="150" data-so-p="80">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/modern-seo/">Modern Search Engine Optimization (SEO)</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">Learn how to drive organic traffic to your website by mastering search engine optimization. In this course, you'll get a deep-dive into SEO.</div>
<div class="meta">
4 hours, 4 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/modern-seo/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/modern-seo/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-06-15-modern-seo/thumb.webp" alt="Modern Search Engine Optimization (SEO)" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="web-performance" data-hash="KWRyjGiZOe" data-so-d="139" data-so-p="81">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/web-performance/">JavaScript Performance</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Write more efficient JavaScript, optimize rendering performance, load assets faster with a CDN, split loading resources with Webpack, and more!</div>
<div class="meta">
4 hours, 55 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/web-performance/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/web-performance/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-04-05-web-performance/thumb.webp" alt="JavaScript Performance" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="go-for-js-devs" data-hash="niuLofHUtM" data-so-d="88" data-so-p="82">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/go-for-js-devs/">Go for JavaScript Developers</a>
</h2>
<div class="Instructor">
<a title="Brenna Martenson" href="https://frontendmasters.com/teachers/brenna-martenson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/martenson/thumb.webp" alt="Brenna Martenson" loading="lazy" height="78" width="78">
</div>
<div class="name">Brenna Martenson</div>
<div class="organization">Highwing.io</div>
</a>
</div>
<div class="description">Learn Go language syntax, data structures, and handle errors. Then create a web server with routing, and access an external API!</div>
<div class="meta">
4 hours, 49 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/go-for-js-devs/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/go-for-js-devs/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-04-09-go-for-js-devs/thumb.webp" alt="Go for JavaScript Developers" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="hardcore-js-v2" data-hash="NMQWOdXmCU" data-so-d="90" data-so-p="83">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/hardcore-js-v2/">Hardcore Functional Programming in JavaScript, v2</a>
</h2>
<div class="Instructor">
<a title="Brian Lonsdorf" href="https://frontendmasters.com/teachers/brian-lonsdorf/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/lonsdorf/thumb.webp" alt="Brian Lonsdorf" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Lonsdorf</div>
<div class="organization">Salesforce</div>
</a>
</div>
<div class="description">Learn functional programming concepts such as pure functions, currying, composition, functors, monads, and see functional concepts in action!</div>
<div class="meta">
3 hours, 44 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/hardcore-js-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/hardcore-js-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-03-17-hardcore-js-v2/thumb.webp" alt="Hardcore Functional Programming in JavaScript, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="vue-3" data-hash="flxRBbpJGg" data-so-d="77" data-so-p="84">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/vue-3/">Introduction to Vue 3</a>
</h2>
<div class="Instructor">
<a title="Sarah Drasner" href="https://frontendmasters.com/teachers/sarah-drasner/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/drasner/thumb.webp" alt="Sarah Drasner" loading="lazy" height="78" width="78">
</div>
<div class="name">Sarah Drasner</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Learn fundamental concepts in Vue, such as directives, methods, & computed watchers. You’ll learn Vue’s reactivity system & the new Composition API in Vue 3</div>
<div class="meta">
4 hours, 57 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/vue-3/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/vue-3/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-10-20-vue-3/thumb.webp" alt="Introduction to Vue 3" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="practical-python" data-hash="ZfBjFwyWWj" data-so-d="72" data-so-p="85">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/practical-python/">Practical Guide to Python</a>
</h2>
<div class="Instructor">
<a title="Nina Zakharenko" href="https://frontendmasters.com/teachers/nina-zakharenko/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/zakharenko/thumb.webp" alt="Nina Zakharenko" loading="lazy" height="78" width="78">
</div>
<div class="name">Nina Zakharenko</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">In this Python course, you're going to learn how to structure your programs with functions, loops, logic, and objects and end the course using the Django framework.</div>
<div class="meta">
4 hours, 58 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/practical-python/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/practical-python/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-12-22-practical-python/thumb.webp" alt="Practical Guide to Python" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="d3" data-hash="WzDXVqyhNh" data-so-d="79" data-so-p="86">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/d3/">Introduction to D3.js</a>
</h2>
<div class="Instructor">
<a title="Shirley Wu" href="https://frontendmasters.com/teachers/shirley-wu/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/wu/thumb.webp" alt="Shirley Wu" loading="lazy" height="78" width="78">
</div>
<div class="name">Shirley Wu</div>
<div class="organization">Data Sketches</div>
</a>
</div>
<div class="description">Build custom charts with D3.js using data binding with the enter-update-exit pattern. Learn scales and animation between different D3 layouts.</div>
<div class="meta">
5 hours, 59 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/d3/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/d3/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-09-25-d3/thumb.webp" alt="Introduction to D3.js" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="swift-ios" data-hash="woNGHUvmJN" data-so-d="28" data-so-p="87">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/swift-ios/">iOS App Development with Swift</a>
</h2>
<div class="Instructor">
<a title="Maximiliano Firtman" href="https://frontendmasters.com/teachers/firt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/firtman/thumb.webp" alt="Maximiliano Firtman" loading="lazy" height="78" width="78">
</div>
<div class="name">Maximiliano Firtman</div>
<div class="organization">Independent Consultant</div>
</a>
</div>
<div class="description">Create your first iOS native application using SwiftUI and Xcode for deployment in the iOS and iPad Apple App store.</div>
<div class="meta">
5 hours, 52 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/swift-ios/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/swift-ios/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-06-22-swift-ios/thumb.webp" alt="iOS App Development with Swift" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="redux-mobx" data-hash="nAZdQNLdlu" data-so-d="106" data-so-p="89">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/redux-mobx/">State Management with Redux & MobX</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Learn about structuring your data with front-end architect Steve Kinny. Start the "State Management with Redux & MobX" course today! </div>
<div class="meta">
5 hours, 3 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/redux-mobx/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/redux-mobx/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-07-23-redux-mobx/thumb.webp" alt="State Management with Redux & MobX" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="intro-elm" data-hash="SzvOEDHgcE" data-so-d="125" data-so-p="91">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/intro-elm/">Introduction to Elm, v2</a>
</h2>
<div class="Instructor">
<a title="Richard Feldman" href="https://frontendmasters.com/teachers/richard-feldman/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/feldman/thumb.webp" alt="Richard Feldman" loading="lazy" height="78" width="78">
</div>
<div class="name">Richard Feldman</div>
<div class="organization">NoRedInk</div>
</a>
</div>
<div class="description">Learn how to write applications with the Elm, the functional programming language, from the ground up. Read more!</div>
<div class="meta">
5 hours, 6 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/intro-elm/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/intro-elm/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-10-17-intro-elm/thumb.webp" alt="Introduction to Elm, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="advanced-remix" data-hash="PWvTIwfXhh" data-so-d="15" data-so-p="92">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/advanced-remix/">Advanced Remix</a>
</h2>
<div class="Instructor">
<a title="Kent C. Dodds" href="https://frontendmasters.com/teachers/kentcdodds/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/dodds/thumb.webp" alt="Kent C. Dodds" loading="lazy" height="78" width="78">
</div>
<div class="name">Kent C. Dodds</div>
<div class="organization">Professional Trainer</div>
</a>
</div>
<div class="description">Build Remix web apps with advanced techniques: understand mutations, use optimistic UI, build server-intelligent UI components, give feedback as users navigate your app, and handle focus management.</div>
<div class="meta">
3 hours, 18 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/advanced-remix/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/advanced-remix/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-09-27-advanced-remix/thumb.webp" alt="Advanced Remix" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="canvas-webgl" data-hash="DKXPcZaQOr" data-so-d="121" data-so-p="93">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/canvas-webgl/">Creative Coding with Canvas & WebGL</a>
</h2>
<div class="Instructor">
<a title="Matt DesLauriers" href="https://frontendmasters.com/teachers/matt-deslauriers/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/deslauriers/thumb.webp" alt="Matt DesLauriers" loading="lazy" height="78" width="78">
</div>
<div class="name">Matt DesLauriers</div>
<div class="organization">Freelancer</div>
</a>
</div>
<div class="description">You'll learn about generative art, interactive animations, 3D graphics with ThreeJS, and custom shaders in GLSL. Apply creative coding skills to real-world jobs.</div>
<div class="meta">
4 hours, 45 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/canvas-webgl/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/canvas-webgl/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-12-11-canvas-webgl/thumb.webp" alt="Creative Coding with Canvas & WebGL" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="unity" data-hash="JmDkrZQBAO" data-so-d="30" data-so-p="94">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/unity/">Unity for Web Developers</a>
</h2>
<div class="Instructor">
<a title="Nick Pettit" href="https://frontendmasters.com/teachers/nick-pettit/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/pettit/thumb.webp" alt="Nick Pettit" loading="lazy" height="78" width="78">
</div>
<div class="name">Nick Pettit</div>
<div class="organization">BUCK</div>
</a>
</div>
<div class="description">Learn to make a complete video game with the Unity game engine and C# programming language. You’ll make a physics sandbox, handle user input, add UI, materials, lighting, and effects. Then compile your game to WebGL.</div>
<div class="meta">
4 hours, 27 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/unity/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/unity/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-05-24-unity/thumb.webp" alt="Unity for Web Developers" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="production-angular" data-hash="hbjptgGPeh" data-so-d="70" data-so-p="95">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/production-angular/">Production-Grade Angular</a>
</h2>
<div class="Instructor">
<a title="Lukas Ruebbelke" href="https://frontendmasters.com/teachers/lukas-ruebbelke/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb.webp" alt="Lukas Ruebbelke" loading="lazy" height="78" width="78">
</div>
<div class="name">Lukas Ruebbelke</div>
<div class="organization">Venmo</div>
</a>
</div>
<div class="description">Learn how to structure your projects leveraging Angular CLI and Nx. Create shared modules and apply unit tests and end-to-end testing.</div>
<div class="meta">
6 hours, 57 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/production-angular/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/production-angular/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-01-19-production-angular/thumb.webp" alt="Production-Grade Angular" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="good-parts-javascript-web" data-hash="KUnyBJmpDM" data-so-d="154" data-so-p="96">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/good-parts-javascript-web/">The Good Parts of JavaScript and the Web</a>
</h2>
<div class="Instructor">
<a title="Douglas Crockford" href="https://frontendmasters.com/teachers/douglas-crockford/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/crockford/thumb.webp" alt="Douglas Crockford" loading="lazy" height="78" width="78">
</div>
<div class="name">Douglas Crockford</div>
<div class="organization">Paypal</div>
</a>
</div>
<div class="description">Learn the history of JavaScript with a big focus to its functions. Learn how browsers work, how servers work, and ways to enhance security.</div>
<div class="meta">
10 hours, 54 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/good-parts-javascript-web/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/good-parts-javascript-web/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2016-06-20-good-parts-javascript-web/thumb.webp" alt="The Good Parts of JavaScript and the Web" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="smacss" data-hash="wGgYSXnHzN" data-so-d="157" data-so-p="97">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/smacss/">Scalable Modular Architecture for CSS (SMACSS)</a>
</h2>
<div class="Instructor">
<a title="Jonathan Snook" href="https://frontendmasters.com/teachers/jonathan-snook/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/snook/thumb.webp" alt="Jonathan Snook" loading="lazy" height="78" width="78">
</div>
<div class="name">Jonathan Snook</div>
<div class="organization">Snook.ca Web Development, Inc.</div>
</a>
</div>
<div class="description">Learn how to make your CSS more maintainable and modular using Jonathan Snook's Scalable Modular Architecture for CSS (SMACSS) methodology.</div>
<div class="meta">
5 hours, 51 minutes
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/smacss/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/smacss/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2015-02-18-smacss/thumb.webp" alt="Scalable Modular Architecture for CSS (SMACSS)" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="customize-vs-code" data-hash="QJrFeDARzF" data-so-d="102" data-so-p="98">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/customize-vs-code/">Visual Studio Code Can Do That?</a>
</h2>
<div class="Instructor">
<a title="Burke Holland" href="https://frontendmasters.com/teachers/burke-holland/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/holland/thumb.webp" alt="Burke Holland" loading="lazy" height="78" width="78">
</div>
<div class="name">Burke Holland</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Dive into VS Code to customize your editor, refactor and debug code. Learn how to work with data and git …all within the same editor!</div>
<div class="meta">
3 hours, 35 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/customize-vs-code/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/customize-vs-code/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-10-02-customize-vs-code/thumb.webp" alt="Visual Studio Code Can Do That?" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="service-workers" data-hash="CJjVzWSPnd" data-so-d="107" data-so-p="99">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/service-workers/">Exploring Service Workers</a>
</h2>
<div class="Instructor">
<a title="Kyle Simpson" href="https://frontendmasters.com/teachers/kyle-simpson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/simpson/thumb.webp" alt="Kyle Simpson" loading="lazy" height="78" width="78">
</div>
<div class="name">Kyle Simpson</div>
<div class="organization">You Don't Know JS</div>
</a>
</div>
<div class="description">Service Workers enable websites to have new PWA capabilities like smart offline caching, background sync, and push notifications!</div>
<div class="meta">
4 hours, 15 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/service-workers/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/service-workers/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-07-16-service-workers/thumb.webp" alt="Exploring Service Workers" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="asynchronous-javascript" data-hash="rCCcQoGGcs" data-so-d="156" data-so-p="100">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/asynchronous-javascript/">Asynchronous Programming in JavaScript (with Rx.js Observables)</a>
</h2>
<div class="Instructor">
<a title="Jafar Husain" href="https://frontendmasters.com/teachers/jafar-husain/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/husain/thumb.webp" alt="Jafar Husain" loading="lazy" height="78" width="78">
</div>
<div class="name">Jafar Husain</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Learning how to build and manage asynchronous programs is perhaps the most important part of becoming an effective JavaScript programmer.</div>
<div class="meta">
9 hours, 38 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/asynchronous-javascript/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/asynchronous-javascript/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2015-09-21-asynchronous-javascript/thumb.webp" alt="Asynchronous Programming in JavaScript (with Rx.js Observables)" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="mongodb" data-hash="zGNuSeCSyq" data-so-d="122" data-so-p="101">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/mongodb/">Introduction to MongoDB</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Learn to build schemas, structure models, and query MongoDB to get the right data. Learn the core pieces of MongoDB to build production-ready applications!</div>
<div class="meta">
3 hours, 23 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/mongodb/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/mongodb/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-12-05-mongodb/thumb.webp" alt="Introduction to MongoDB" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="open-source" data-hash="auurQDLwFJ" data-so-d="153" data-so-p="102">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/open-source/">Creating an Open Source JavaScript Library on Github</a>
</h2>
<div class="Instructor">
<a title="Kent C. Dodds" href="https://frontendmasters.com/teachers/kentcdodds/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/dodds/thumb.webp" alt="Kent C. Dodds" loading="lazy" height="78" width="78">
</div>
<div class="name">Kent C. Dodds</div>
<div class="organization">Professional Trainer</div>
</a>
</div>
<div class="description">Publish and distribute your JS library to npm, add testing/code coverage, manage community, and more in this course on publishing an open-source library.</div>
<div class="meta">
5 hours, 29 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/open-source/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/open-source/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2016-12-07-open-source/thumb.webp" alt="Creating an Open Source JavaScript Library on Github" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="advanced-elm" data-hash="MhqUGgQDfF" data-so-d="124" data-so-p="104">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/advanced-elm/">Advanced Elm</a>
</h2>
<div class="Instructor">
<a title="Richard Feldman" href="https://frontendmasters.com/teachers/richard-feldman/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/feldman/thumb.webp" alt="Richard Feldman" loading="lazy" height="78" width="78">
</div>
<div class="name">Richard Feldman</div>
<div class="organization">NoRedInk</div>
</a>
</div>
<div class="description">Join JS and Elm expert Richard Feldman in the "Advanced Elm" course. Learn how to organize and scale your Elm applications with authentication, css-in-Elm, and more!</div>
<div class="meta">
4 hours, 59 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/advanced-elm/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/advanced-elm/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-10-18-advanced-elm/thumb.webp" alt="Advanced Elm" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="practical-machine-learning" data-hash="gRaiXpzGQl" data-so-d="91" data-so-p="105">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/practical-machine-learning/">A Practical Guide to Machine Learning with TensorFlow 2.0 & Keras</a>
</h2>
<div class="Instructor">
<a title="Vadim Karpusenko" href="https://frontendmasters.com/teachers/vadim-karpusenko/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/karpusenko/thumb.webp" alt="Vadim Karpusenko" loading="lazy" height="78" width="78">
</div>
<div class="name">Vadim Karpusenko</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Learn Machine Learning, Deep Learning, and AI through hands-on examples of image categorization, image manipulation, and text analytics.</div>
<div class="meta">
5 hours, 22 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/practical-machine-learning/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/practical-machine-learning/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-03-03-practical-machine-learning/thumb.webp" alt="A Practical Guide to Machine Learning with TensorFlow 2.0 & Keras" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="svelte" data-hash="DAJHMMRivO" data-so-d="83" data-so-p="106">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/svelte/">Svelte</a>
</h2>
<div class="Instructor">
<a title="Rich Harris" href="https://frontendmasters.com/teachers/rich-harris/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/harris/thumb.webp" alt="Rich Harris" loading="lazy" height="78" width="78">
</div>
<div class="name">Rich Harris</div>
<div class="organization">New York Times</div>
</a>
</div>
<div class="description">In the course, you’ll learn the Svelte tutorial and how to write svelte components and take a tour through the entire Svelte API. Learn more!</div>
<div class="meta">
4 hours, 47 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/svelte/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/svelte/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-07-15-svelte/thumb.webp" alt="Svelte" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="realtime" data-hash="umKMZyYJaD" data-so-d="50" data-so-p="107">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/realtime/">Complete Intro to Real-Time</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">Learn to build apps where the client can push messages to the server and talk in real-time. Start today! </div>
<div class="meta">
3 hours, 25 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/realtime/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/realtime/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-10-08-realtime/thumb.webp" alt="Complete Intro to Real-Time" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="production-next" data-hash="KWqqBSkLHp" data-so-d="66" data-so-p="108">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/production-next/">Production-Grade Next.js</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Build production-ready, full-stack React apps. Add authentication, generate hundreds of pages performantly, and use a CMS with Next.js...</div>
<div class="meta">
3 hours, 57 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/production-next/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/production-next/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-03-02-production-next/thumb.webp" alt="Production-Grade Next.js" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="web-components" data-hash="gVKEirDpeY" data-so-d="31" data-so-p="109">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/web-components/">Web Components</a>
</h2>
<div class="Instructor">
<a title="Dave Rupert" href="https://frontendmasters.com/teachers/dave-rupert/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/rupert/thumb.webp" alt="Dave Rupert" loading="lazy" height="78" width="78">
</div>
<div class="name">Dave Rupert</div>
<div class="organization">Paravel</div>
</a>
</div>
<div class="description">Create custom, reusable HTML elements with the Web Components API! Learn to create custom Web Components using JavaScript and the Lit library.</div>
<div class="meta">
4 hours, 3 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/web-components/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/web-components/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-05-17-web-components/thumb.webp" alt="Web Components" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="front-end-game" data-hash="vxUViYbUCO" data-so-d="84" data-so-p="110">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/front-end-game/">Complete Front-End Project: Build a Game</a>
</h2>
<div class="Instructor">
<a title="Brian Holt" href="https://frontendmasters.com/teachers/brian-holt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/holt/thumb.webp" alt="Brian Holt" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Holt</div>
<div class="organization">Stripe</div>
</a>
</div>
<div class="description">Organize your front-end code, manage application state with state machines, and automate writing better code using tools like ESLint, Parcel, and Prettier.</div>
<div class="meta">
3 hours, 39 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/front-end-game/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/front-end-game/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-05-26-front-end-game/thumb.webp" alt="Complete Front-End Project: Build a Game" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="debugging-javascript" data-hash="XvaGHlyilE" data-so-d="152" data-so-p="111">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/debugging-javascript/">Debugging and Fixing Common JavaScript Errors</a>
</h2>
<div class="Instructor">
<a title="Todd Gardner" href="https://frontendmasters.com/teachers/todd-gardner/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/gardner/thumb.webp" alt="Todd Gardner" loading="lazy" height="78" width="78">
</div>
<div class="name">Todd Gardner</div>
<div class="organization">TrackJS</div>
</a>
</div>
<div class="description">Learn what causes common JavaScript bugs and how to debug them. Learn how to use the latest developer tools to isolate and fix the source of issues.</div>
<div class="meta">
3 hours, 39 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/debugging-javascript/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/debugging-javascript/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-05-22-debugging-javascript/thumb.webp" alt="Debugging and Fixing Common JavaScript Errors" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="advanced-css-layouts" data-hash="DMCfjJhowl" data-so-d="104" data-so-p="112">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/advanced-css-layouts/">Advanced CSS Layouts</a>
</h2>
<div class="Instructor">
<a title="Jen Kramer" href="https://frontendmasters.com/teachers/jen-kramer/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/kramer/thumb.webp" alt="Jen Kramer" loading="lazy" height="78" width="78">
</div>
<div class="name">Jen Kramer</div>
<div class="organization">Freelance Instructor</div>
</a>
</div>
<div class="description">Flexbox and Grid provide methods for creating responsive websites with complex designs. Combined with CSS Calc, it revolutionizes CSS layout web pages. Learn more!</div>
<div class="meta">
3 hours, 46 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/advanced-css-layouts/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/advanced-css-layouts/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-09-12-advanced-css-layouts/thumb.webp" alt="Advanced CSS Layouts" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="svg-essentials-animation" data-hash="wNyiVTkPAi" data-so-d="118" data-so-p="113">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/svg-essentials-animation/">SVG Essentials & Animation, v2</a>
</h2>
<div class="Instructor">
<a title="Sarah Drasner" href="https://frontendmasters.com/teachers/sarah-drasner/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/drasner/thumb.webp" alt="Sarah Drasner" loading="lazy" height="78" width="78">
</div>
<div class="name">Sarah Drasner</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Learn how to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!</div>
<div class="meta">
4 hours, 12 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/svg-essentials-animation/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/svg-essentials-animation/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-01-14-svg-essentials-animation/thumb.webp" alt="SVG Essentials & Animation, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="web3-smart-contracts" data-hash="DlslFaaMHS" data-so-d="37" data-so-p="114">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/web3-smart-contracts/">A Tour of Web 3: Ethereum & Smart Contracts with Solidity</a>
</h2>
<div class="Instructor">
<a title="ThePrimeagen" href="https://frontendmasters.com/teachers/the-primeagen/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/theprimeagen/thumb.webp" alt="ThePrimeagen" loading="lazy" height="78" width="78">
</div>
<div class="name">ThePrimeagen</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Web 3 (DApp) applications could change the development landscape. Learn to create and deploy smart contracts on Ethereum with Solidity. Then tackle challenging concepts such as memory layout, delegate calls, and fallback functions.</div>
<div class="meta">
4 hours, 57 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/web3-smart-contracts/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/web3-smart-contracts/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-02-10-web3-smart-contracts/thumb.webp" alt="A Tour of Web 3: Ethereum & Smart Contracts with Solidity" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="monorepos" data-hash="nxRXQIuMEe" data-so-d="74" data-so-p="115">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/monorepos/">JavaScript and TypeScript Monorepos</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">Monorepos have taken the JavaScript world by storm, unlocking powerful new patterns around composition, encapsulation, and ease of maintenance.</div>
<div class="meta">
3 hours, 46 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/monorepos/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/monorepos/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-11-18-monorepos/thumb.webp" alt="JavaScript and TypeScript Monorepos" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="d3-js-react" data-hash="KkAFnOerlq" data-so-d="127" data-so-p="118">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/d3-js-react/">Data Visualization for React Developers</a>
</h2>
<div class="Instructor">
<a title="Shirley Wu" href="https://frontendmasters.com/teachers/shirley-wu/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/wu/thumb.webp" alt="Shirley Wu" loading="lazy" height="78" width="78">
</div>
<div class="name">Shirley Wu</div>
<div class="organization">Data Sketches</div>
</a>
</div>
<div class="description">Learn the best practices on how to use D3.js and React to generate the data for these visualizations, and how to use React to render them.</div>
<div class="meta">
3 hours, 21 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/d3-js-react/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/d3-js-react/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-09-10-d3-js-react/thumb.webp" alt="Data Visualization for React Developers" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="freelancing" data-hash="RuifMhcYsP" data-so-d="24" data-so-p="119">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/freelancing/">Finding Clients as a Freelancer</a>
</h2>
<div class="Instructor">
<a title="Paul Boag" href="https://frontendmasters.com/teachers/paul-boag/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/boag/thumb.webp" alt="Paul Boag" loading="lazy" height="78" width="78">
</div>
<div class="name">Paul Boag</div>
<div class="organization">Boagworld</div>
</a>
</div>
<div class="description">Learn what works and doesn’t when marketing and selling your skills to potential clients – learn to find clients who are happy to pay for your skills as a freelancer!</div>
<div class="meta">
4 hours, 11 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/freelancing/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/freelancing/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-07-28-freelancing/thumb.webp" alt="Finding Clients as a Freelancer" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="gatsby-v2" data-hash="JMYRXANNkg" data-so-d="52" data-so-p="120">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/gatsby-v2/">Introduction to Gatsby, v2</a>
</h2>
<div class="Instructor">
<a title="Jason Lengstorf" href="https://frontendmasters.com/teachers/jason-lengstorf/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/lengstorf/thumb.webp" alt="Jason Lengstorf" loading="lazy" height="78" width="78">
</div>
<div class="name">Jason Lengstorf</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Code a full blog web app in Gatsby. Use GraphQL in Gatsby for storing and retrieving data, creating pages and posts with MDX, and more!</div>
<div class="meta">
4 hours, 4 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/gatsby-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/gatsby-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-09-21-gatsby-v2/thumb.webp" alt="Introduction to Gatsby, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="intro-deno" data-hash="kjeMlmmIOF" data-so-d="64" data-so-p="121">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/intro-deno/">Deno First Look</a>
</h2>
<div class="Instructor">
<a title="Burke Holland" href="https://frontendmasters.com/teachers/burke-holland/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/holland/thumb.webp" alt="Burke Holland" loading="lazy" height="78" width="78">
</div>
<div class="name">Burke Holland</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Take a first look at Deno, the new command-line runtime for JavaScript. Click to learn a fundamentally different approach to run JavaScript on the deno server.</div>
<div class="meta">
3 hours, 50 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/intro-deno/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/intro-deno/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-03-16-intro-deno/thumb.webp" alt="Deno First Look" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="vue-typescript" data-hash="usGRTVDrqB" data-so-d="12" data-so-p="122">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/vue-typescript/">TypeScript and Vue 3</a>
</h2>
<div class="Instructor">
<a title="Ben Hong" href="https://frontendmasters.com/teachers/ben-hong/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/hong/thumb.webp" alt="Ben Hong" loading="lazy" height="78" width="78">
</div>
<div class="name">Ben Hong</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Learn to integrate TypeScript with Vue's options API and the Vue 3+ composition API.</div>
<div class="meta">
3 hours, 6 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/vue-typescript/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/vue-typescript/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-10-18-vue-typescript/thumb.webp" alt="TypeScript and Vue 3" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="getting-a-job" data-hash="pKtJfWHLsP" data-so-d="78" data-so-p="123">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/getting-a-job/">Getting a Front-End Developer Job</a>
</h2>
<div class="Instructor">
<a title="Jerome Hardaway" href="https://frontendmasters.com/teachers/jerome-hardaway/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/hardaway/thumb.webp" alt="Jerome Hardaway" loading="lazy" height="78" width="78">
</div>
<div class="name">Jerome Hardaway</div>
<div class="organization">Vets Who Code</div>
</a>
</div>
<div class="description">Learn how to build a resume, GitHub, and portfolio to shock interested employers. Land your first front-end development job through tips in this course!</div>
<div class="meta">
2 hours, 43 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/getting-a-job/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/getting-a-job/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-10-06-getting-a-job/thumb.webp" alt="Getting a Front-End Developer Job" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="html-email-v2" data-hash="hblWGEZKSm" data-so-d="100" data-so-p="124">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/html-email-v2/">HTML Email Development, v2</a>
</h2>
<div class="Instructor">
<a title="Jason Rodriguez" href="https://frontendmasters.com/teachers/rodriguezcommaj/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/rodriguez/thumb.webp" alt="Jason Rodriguez" loading="lazy" height="78" width="78">
</div>
<div class="name">Jason Rodriguez</div>
<div class="organization">Litmus</div>
</a>
</div>
<div class="description">Learn the foundations of HTML email development such as structure, semantic markup, layouts, and creating accessible email.</div>
<div class="meta">
3 hours, 56 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/html-email-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/html-email-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-11-06-html-email-v2/thumb.webp" alt="HTML Email Development, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="python" data-hash="AwjwSwxbYD" data-so-d="115" data-so-p="125">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/python/">Python Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Nina Zakharenko" href="https://frontendmasters.com/teachers/nina-zakharenko/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/zakharenko/thumb.webp" alt="Nina Zakharenko" loading="lazy" height="78" width="78">
</div>
<div class="name">Nina Zakharenko</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Create and run simple Augment Python programs, including working with the available data types, writing functions and classes, and much more. Read more!</div>
<div class="meta">
4 hours, 40 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/python/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/python/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-04-15-python/thumb.webp" alt="Python Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="android-kotlin" data-hash="gLTCmWdvqh" data-so-d="27" data-so-p="126">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/android-kotlin/">Introduction to Kotlin and Android Development</a>
</h2>
<div class="Instructor">
<a title="Maximiliano Firtman" href="https://frontendmasters.com/teachers/firt/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/firtman/thumb.webp" alt="Maximiliano Firtman" loading="lazy" height="78" width="78">
</div>
<div class="name">Maximiliano Firtman</div>
<div class="organization">Independent Consultant</div>
</a>
</div>
<div class="description">Create your first Android native application using Jetpack Compose and Android Studio.</div>
<div class="meta">
5 hours, 32 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/android-kotlin/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/android-kotlin/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-06-23-android-kotlin/thumb.webp" alt="Introduction to Kotlin and Android Development" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="advanced-graphql-v2" data-hash="JCPsBDpvqp" data-so-d="92" data-so-p="127">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/advanced-graphql-v2/">Advanced GraphQL, v2</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Learn GraphQL topics like authentication, handle errors, and adding tests. Then access realtime data using subscriptions.</div>
<div class="meta">
3 hours, 25 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/advanced-graphql-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/advanced-graphql-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-02-17-advanced-graphql-v2/thumb.webp" alt="Advanced GraphQL, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="performance-webpack" data-hash="zJqsGmVnOQ" data-so-d="134" data-so-p="128">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/performance-webpack/">Web Performance with Webpack</a>
</h2>
<div class="Instructor">
<a title="Sean Larkin" href="https://frontendmasters.com/teachers/sean-larkin/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/larkin/thumb.webp" alt="Sean Larkin" loading="lazy" height="78" width="78">
</div>
<div class="name">Sean Larkin</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Make websites load instantly by using the Webpack code splitting feature for lazy loading JavaScript by removing unused code with tree shaking and prefetching assets.</div>
<div class="meta">
1 hours, 43 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/performance-webpack/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/performance-webpack/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-07-01-performance-webpack/thumb.webp" alt="Web Performance with Webpack" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="data-structures-interviews" data-hash="DtaRBLuVWI" data-so-d="131" data-so-p="129">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/data-structures-interviews/">Introduction to Data Structures for Interviews</a>
</h2>
<div class="Instructor">
<a title="Bianca Gandolfo" href="https://frontendmasters.com/teachers/bianca-gandolfo/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/gandolfo/thumb.webp" alt="Bianca Gandolfo" loading="lazy" height="78" width="78">
</div>
<div class="name">Bianca Gandolfo</div>
<div class="organization">Thumbtack</div>
</a>
</div>
<div class="description">Learn how to pass technical interviews by understanding the data structures you need to store and retrieve data efficiently in your everyday development.</div>
<div class="meta">
4 hours, 21 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/data-structures-interviews/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/data-structures-interviews/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-08-09-data-structures-interviews/thumb.webp" alt="Introduction to Data Structures for Interviews" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="css-variables" data-hash="PxMjdzWtiO" data-so-d="46" data-so-p="130">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/css-variables/">Dynamic CSS with Custom Properties (aka CSS Variables)</a>
</h2>
<div class="Instructor">
<a title="Lea Verou" href="https://frontendmasters.com/teachers/lea-verou/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/verou/thumb.webp" alt="Lea Verou" loading="lazy" height="78" width="78">
</div>
<div class="name">Lea Verou</div>
<div class="organization">MIT</div>
</a>
</div>
<div class="description">Create reusable components without any JavaScript dependencies needed – with only vanilla CSS! Master CSS custom properties AKA CSS variables. </div>
<div class="meta">
3 hours, 54 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/css-variables/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/css-variables/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-11-09-css-variables/thumb.webp" alt="Dynamic CSS with Custom Properties (aka CSS Variables)" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="web-security" data-hash="fkrvxHCBpk" data-so-d="143" data-so-p="132">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/web-security/">Web Security</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">Get hands-on experience attacking and defending web applications. Defend Cross-Site Scripting and MITM attacks, secure 3rd party assets, and more!</div>
<div class="meta">
4 hours, 31 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/web-security/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/web-security/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-12-19-web-security/thumb.webp" alt="Web Security" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="bash-vim-regex" data-hash="KuLmMQaYKN" data-so-d="148" data-so-p="134">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/bash-vim-regex/">Introduction to Bash, VIM & Regex</a>
</h2>
<div class="Instructor">
<a title="James Halliday" href="https://frontendmasters.com/teachers/james-halliday/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/halliday/thumb.webp" alt="James Halliday" loading="lazy" height="78" width="78">
</div>
<div class="name">James Halliday</div>
<div class="organization">Substack</div>
</a>
</div>
<div class="description">Take control of the Unix command line, automate tasks with shell scripts, compose regular expressions and easily edit files with the popular Vim editor.</div>
<div class="meta">
4 hours, 18 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/bash-vim-regex/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/bash-vim-regex/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-08-16-bash-vim-regex/thumb.webp" alt="Introduction to Bash, VIM & Regex" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="web-audio" data-hash="GNfceKlsrz" data-so-d="44" data-so-p="135">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/web-audio/">Web Audio Synthesis & Visualization</a>
</h2>
<div class="Instructor">
<a title="Matt DesLauriers" href="https://frontendmasters.com/teachers/matt-deslauriers/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/deslauriers/thumb.webp" alt="Matt DesLauriers" loading="lazy" height="78" width="78">
</div>
<div class="name">Matt DesLauriers</div>
<div class="organization">Freelancer</div>
</a>
</div>
<div class="description">Learn to create sounds using nothing but code! Synthesize and visualize audio, and add fun effects with JavaScript. Use these skills to build audio into games, web applications, or even art projects in the browser.</div>
<div class="meta">
2 hours, 58 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/web-audio/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/web-audio/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-12-07-web-audio/thumb.webp" alt="Web Audio Synthesis & Visualization" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="trees-and-graphs" data-hash="rSYCRzMoRP" data-so-d="113" data-so-p="136">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/trees-and-graphs/">Tree and Graph Data Structures</a>
</h2>
<div class="Instructor">
<a title="Bianca Gandolfo" href="https://frontendmasters.com/teachers/bianca-gandolfo/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/gandolfo/thumb.webp" alt="Bianca Gandolfo" loading="lazy" height="78" width="78">
</div>
<div class="name">Bianca Gandolfo</div>
<div class="organization">Thumbtack</div>
</a>
</div>
<div class="description">Trees and graphs are non-linear data structures, which allows for modelling things such as recommendation algorithms and social networks. Learn more!</div>
<div class="meta">
4 hours, 13 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/trees-and-graphs/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/trees-and-graphs/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-05-20-trees-and-graphs/thumb.webp" alt="Tree and Graph Data Structures" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="jamstack" data-hash="jAwvRmHmeM" data-so-d="93" data-so-p="137">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/jamstack/">Introduction to the JAMStack</a>
</h2>
<div class="Instructor">
<a title="Jason Lengstorf" href="https://frontendmasters.com/teachers/jason-lengstorf/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/lengstorf/thumb.webp" alt="Jason Lengstorf" loading="lazy" height="78" width="78">
</div>
<div class="name">Jason Lengstorf</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Learn how the JAMstack fits together, from building apps out of only static assets to handling asynchronous interactions with serverless functions.</div>
<div class="meta">
4 hours, 8 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/jamstack/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/jamstack/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-02-16-jamstack/thumb.webp" alt="Introduction to the JAMStack" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="vue-nuxt-apps" data-hash="blnQtcEtCR" data-so-d="76" data-so-p="139">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/vue-nuxt-apps/">Building Applications with Vue & Nuxt</a>
</h2>
<div class="Instructor">
<a title="Sarah Drasner" href="https://frontendmasters.com/teachers/sarah-drasner/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/drasner/thumb.webp" alt="Sarah Drasner" loading="lazy" height="78" width="78">
</div>
<div class="name">Sarah Drasner</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Build dynamic web applications with Vue and Nuxt! In this course, you’ll build out a variety of projects leveraging the tools in the Vue ecosystem.</div>
<div class="meta">
4 hours, 14 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/vue-nuxt-apps/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/vue-nuxt-apps/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-10-27-vue-nuxt-apps/thumb.webp" alt="Building Applications with Vue & Nuxt" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="intermediate-gatsby-v2" data-hash="SqFNmceOCV" data-so-d="51" data-so-p="140">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/intermediate-gatsby-v2/">Intermediate Gatsby, v2</a>
</h2>
<div class="Instructor">
<a title="Jason Lengstorf" href="https://frontendmasters.com/teachers/jason-lengstorf/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/lengstorf/thumb.webp" alt="Jason Lengstorf" loading="lazy" height="78" width="78">
</div>
<div class="name">Jason Lengstorf</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Use Gatsby's APIs to handle advanced use cases like handling custom data and dynamic pages, and customizing Gatsby’s schema & GraphQL API data.</div>
<div class="meta">
3 hours, 54 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/intermediate-gatsby-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/intermediate-gatsby-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-09-23-intermediate-gatsby-v2/thumb.webp" alt="Intermediate Gatsby, v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="angular-reactive" data-hash="QbbyTtfefr" data-so-d="120" data-so-p="141">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/angular-reactive/">Reactive Angular with NgRx</a>
</h2>
<div class="Instructor">
<a title="Lukas Ruebbelke" href="https://frontendmasters.com/teachers/lukas-ruebbelke/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb.webp" alt="Lukas Ruebbelke" loading="lazy" height="78" width="78">
</div>
<div class="name">Lukas Ruebbelke</div>
<div class="organization">Venmo</div>
</a>
</div>
<div class="description">Learn to use NgRx Angular and RxJs to drastically simplify state management and flow control while cutting down on code volume.</div>
<div class="meta">
3 hours, 14 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/angular-reactive/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/angular-reactive/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-01-07-angular-reactive/thumb.webp" alt="Reactive Angular with NgRx" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="data-visualization" data-hash="irICykhxMl" data-so-d="29" data-so-p="144">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/data-visualization/">Data Visualization First Steps</a>
</h2>
<div class="Instructor">
<a title="Anjana Vakil" href="https://frontendmasters.com/teachers/anjana-vakil/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/vakil/thumb.webp" alt="Anjana Vakil" loading="lazy" height="78" width="78">
</div>
<div class="name">Anjana Vakil</div>
<div class="organization">Software Engineer & Educator</div>
</a>
</div>
<div class="description">Friendly, high-level intro to basic concepts of data visualization using Observable plot.</div>
<div class="meta">
3 hours, 27 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/data-visualization/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/data-visualization/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-06-07-data-visualization/thumb.webp" alt="Data Visualization First Steps" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="programming-language" data-hash="FYrZdVXDpN" data-so-d="101" data-so-p="145">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/programming-language/">Building Your Own Programming Language</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Learn language building techniques: Lexing, Parsing, Tokenization, Traversing Abstract Syntax Trees, and Transpiling to JavaScript and make your own language now!</div>
<div class="meta">
3 hours, 9 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/programming-language/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/programming-language/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-10-08-programming-language/thumb.webp" alt="Building Your Own Programming Language" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="design-process" data-hash="pGnrftFpto" data-so-d="23" data-so-p="146">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/design-process/">Mastering the Design Process</a>
</h2>
<div class="Instructor">
<a title="Paul Boag" href="https://frontendmasters.com/teachers/paul-boag/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/boag/thumb.webp" alt="Paul Boag" loading="lazy" height="78" width="78">
</div>
<div class="name">Paul Boag</div>
<div class="organization">Boagworld</div>
</a>
</div>
<div class="description">Learn a robust process to successfully take your design project from initial briefing to final delivery, avoiding common pitfalls like difficult stakeholders, scope creep, and iteration hell.</div>
<div class="meta">
4 hours, 20 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/design-process/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/design-process/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-07-29-design-process/thumb.webp" alt="Mastering the Design Process" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="visual-studio-code" data-hash="hPygVLbouw" data-so-d="142" data-so-p="147">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/visual-studio-code/">Visual Studio Code</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">Learn about Visual Studio Code— a modern, full-featured code editor built from the ground for the needs of web developers.</div>
<div class="meta">
4 hours, 59 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/visual-studio-code/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/visual-studio-code/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-12-21-visual-studio-code/thumb.webp" alt="Visual Studio Code" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="dev-tools" data-hash="lMJjxAkaTA" data-so-d="62" data-so-p="148">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/dev-tools/">Introduction to Dev Tools, v3</a>
</h2>
<div class="Instructor">
<a title="Jon Kuperman" href="https://frontendmasters.com/teachers/jon-kuperman/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/kuperman/thumb.webp" alt="Jon Kuperman" loading="lazy" height="78" width="78">
</div>
<div class="name">Jon Kuperman</div>
<div class="organization">Cloudflare</div>
</a>
</div>
<div class="description">Master built-in dev tools to step through your code with the debugger, audit web page performance, and remove “page jank” when a site isn’t keeping up. Learn more!</div>
<div class="meta">
3 hours, 22 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/dev-tools/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/dev-tools/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-03-30-dev-tools/thumb.webp" alt="Introduction to Dev Tools, v3" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="ember-octane" data-hash="quNROxGevT" data-so-d="109" data-so-p="149">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/ember-octane/">Ember Octane Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">Use glimmer components, tracked properties, modifiers and learn everything you need to know to build performant, production-ready Ember apps & PWAs with Ember Octane!</div>
<div class="meta">
5 hours, 19 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/ember-octane/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/ember-octane/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-07-02-ember-octane/thumb.webp" alt="Ember Octane Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="sass" data-hash="omHTaULVcF" data-so-d="151" data-so-p="150">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/sass/">Sass Fundamentals</a>
</h2>
<div class="Instructor">
<a title="Mike North" href="https://frontendmasters.com/teachers/mike-north/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/north/thumb.webp" alt="Mike North" loading="lazy" height="78" width="78">
</div>
<div class="name">Mike North</div>
<div class="organization">LinkedIn</div>
</a>
</div>
<div class="description">This SaaS programming course will empower your CSS practices and help you master styling complex applications while keeping the styles readable and maintainable.</div>
<div class="meta">
3 hours, 44 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/sass/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/sass/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-05-25-sass/thumb.webp" alt="Sass Fundamentals" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="xstate-react" data-hash="JQqluXxlHE" data-so-d="71" data-so-p="151">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/xstate-react/">State Modeling in React with XState</a>
</h2>
<div class="Instructor">
<a title="David Khourshid" href="https://frontendmasters.com/teachers/david-khourshid/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/khourshid/thumb.webp" alt="David Khourshid" loading="lazy" height="78" width="78">
</div>
<div class="name">David Khourshid</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Explore using XState and React together to model state in real-world React apps. State machines make complex application logic visually clear, flexible.</div>
<div class="meta">
4 hours, 0 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/xstate-react/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/xstate-react/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-12-29-xstate-react/thumb.webp" alt="State Modeling in React with XState" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="javascript-accessibility" data-hash="inWPmHlbSi" data-so-d="105" data-so-p="152">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/javascript-accessibility/">Accessibility in JavaScript Applications</a>
</h2>
<div class="Instructor">
<a title="Marcy Sutton" href="https://frontendmasters.com/teachers/marcy-sutton/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/sutton/thumb.webp" alt="Marcy Sutton" loading="lazy" height="78" width="78">
</div>
<div class="name">Marcy Sutton</div>
<div class="organization">Gatsby</div>
</a>
</div>
<div class="description">Produce innovative and inclusive JavaScript-powered web apps! Learn to remove barriers and allow all users to interact with your modern JS web applications.</div>
<div class="meta">
4 hours, 6 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/javascript-accessibility/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/javascript-accessibility/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-08-28-javascript-accessibility/thumb.webp" alt="Accessibility in JavaScript Applications" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="networking-streams" data-hash="dWGOWyIxOf" data-so-d="147" data-so-p="154">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/networking-streams/">Networking and Streams</a>
</h2>
<div class="Instructor">
<a title="James Halliday" href="https://frontendmasters.com/teachers/james-halliday/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/halliday/thumb.webp" alt="James Halliday" loading="lazy" height="78" width="78">
</div>
<div class="name">James Halliday</div>
<div class="organization">Substack</div>
</a>
</div>
<div class="description">Learn the stream node module. Code readable, writable, transform, duplex streams. Plus code TCP, HTTP, and Websocket servers and clients using Node.js.</div>
<div class="meta">
3 hours, 7 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/networking-streams/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/networking-streams/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-09-13-networking-streams/thumb.webp" alt="Networking and Streams" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="3d-webxr" data-hash="VDXHPJapYZ" data-so-d="65" data-so-p="159">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/3d-webxr/">3D on the Web & WebXR</a>
</h2>
<div class="Instructor">
<a title="Ayşegül Yönet" href="https://frontendmasters.com/teachers/aysegul-yonet/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/yonet/thumb.webp" alt="Ayşegül Yönet" loading="lazy" height="78" width="78">
</div>
<div class="name">Ayşegül Yönet</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Learn to add 3D experiences to your websites using JS libraries. Also learn the new WebXR device APIs for creating VR and AR experiences on the web.</div>
<div class="meta">
2 hours, 23 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/3d-webxr/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/3d-webxr/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2021-03-09-3d-webxr/thumb.webp" alt="3D on the Web & WebXR" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="advanced-redux" data-hash="onVKjhwKXD" data-so-d="0" data-so-p="162">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/advanced-redux/">Advanced Redux with Redux Toolkit</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Write more performant and maintainable Redux at scale. In this course, you'll use Redux Toolkit to simplify reducer logic and actions, use TypeScript with Redux, add tests, and use RTK Query to fetch data in real-world projects.</div>
<div class="meta">
3 hours, 51 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/advanced-redux/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/advanced-redux/">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/courses/2023-02-07-advanced-redux/thumb.webp" alt="Advanced Redux with Redux Toolkit" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="serverless-functions" data-hash="HlLBnrZBXL" data-so-d="80" data-so-p="164">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/serverless-functions/">Introduction to Serverless Functions</a>
</h2>
<div class="Instructor">
<a title="Jason Lengstorf" href="https://frontendmasters.com/teachers/jason-lengstorf/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/lengstorf/thumb.webp" alt="Jason Lengstorf" loading="lazy" height="78" width="78">
</div>
<div class="name">Jason Lengstorf</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">Learn to build dynamic web apps without the hassle of setting up or maintaining servers! You'll learn to create serverless functions to load data. and more.</div>
<div class="meta">
2 hours, 58 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/serverless-functions/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/serverless-functions/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-08-25-serverless-functions/thumb.webp" alt="Introduction to Serverless Functions" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="vuex" data-hash="dZZFGQrRmH" data-so-d="82" data-so-p="167">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/vuex/">Vuex for Intermediate Vue 2 Developers</a>
</h2>
<div class="Instructor">
<a title="Divya S" href="https://frontendmasters.com/teachers/shortdiv/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/sasidharan/thumb.webp" alt="Divya S" loading="lazy" height="78" width="78">
</div>
<div class="name">Divya S</div>
<div class="organization">Netlify</div>
</a>
</div>
<div class="description">This Vuex course is for intermediate Vue.js developers who want to master patterns for managing state in your applications with Vuex.</div>
<div class="meta">
3 hours, 15 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/vuex/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/vuex/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-08-05-vuex/thumb.webp" alt="Vuex for Intermediate Vue 2 Developers" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="d3-js-custom-charts" data-hash="YmGqbMImVj" data-so-d="126" data-so-p="168">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/d3-js-custom-charts/">Building Custom Data Visualizations</a>
</h2>
<div class="Instructor">
<a title="Shirley Wu" href="https://frontendmasters.com/teachers/shirley-wu/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/wu/thumb.webp" alt="Shirley Wu" loading="lazy" height="78" width="78">
</div>
<div class="name">Shirley Wu</div>
<div class="organization">Data Sketches</div>
</a>
</div>
<div class="description">Learn visualization principles and process for building custom advanced data visualizations with D3.js and SVG with Shirley Wu.</div>
<div class="meta">
4 hours, 24 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/d3-js-custom-charts/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/d3-js-custom-charts/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-09-11-d3-js-custom-charts/thumb.webp" alt="Building Custom Data Visualizations" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="advanced-vue" data-hash="ewEEcmpgPb" data-so-d="141" data-so-p="169">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/advanced-vue/">Vue 2 Internal Features from the Ground Up</a>
</h2>
<div class="Instructor">
<a title="Evan You" href="https://frontendmasters.com/teachers/evan-you/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/you/thumb.webp" alt="Evan You" loading="lazy" height="78" width="78">
</div>
<div class="name">Evan You</div>
<div class="organization">Creator of Vue.js</div>
</a>
</div>
<div class="description">Learn how to build accessible routing, state management, form validation and internationalization from the ground up by composing basic Vue.js features.</div>
<div class="meta">
3 hours, 48 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/advanced-vue/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/advanced-vue/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-01-16-advanced-vue/thumb.webp" alt="Vue 2 Internal Features from the Ground Up" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="hardcore-js-patterns" data-hash="TRLFznQEZF" data-so-d="89" data-so-p="172">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/hardcore-js-patterns/">Hardcore Functional Architecture Patterns in JavaScript</a>
</h2>
<div class="Instructor">
<a title="Brian Lonsdorf" href="https://frontendmasters.com/teachers/brian-lonsdorf/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/lonsdorf/thumb.webp" alt="Brian Lonsdorf" loading="lazy" height="78" width="78">
</div>
<div class="name">Brian Lonsdorf</div>
<div class="organization">Salesforce</div>
</a>
</div>
<div class="description">Learn functional programming architecture patterns to apply, such as Monoids, Monad Transformers, Free Monads, and Lenses. See functional programming in action!</div>
<div class="meta">
4 hours, 10 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/hardcore-js-patterns/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/hardcore-js-patterns/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-04-03-hardcore-js-patterns/thumb.webp" alt="Hardcore Functional Architecture Patterns in JavaScript" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="rapid-app-dev" data-hash="dhqGzNIQCG" data-so-d="38" data-so-p="173">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/rapid-app-dev/">Rapid Application Development with Code Generation</a>
</h2>
<div class="Instructor">
<a title="Lukas Ruebbelke" href="https://frontendmasters.com/teachers/lukas-ruebbelke/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb.webp" alt="Lukas Ruebbelke" loading="lazy" height="78" width="78">
</div>
<div class="name">Lukas Ruebbelke</div>
<div class="organization">Venmo</div>
</a>
</div>
<div class="description">This rapid application development course will teach you practical techniques to accelerate development using CLIs, live templates, helpful libraries, and tooling.</div>
<div class="meta">
3 hours, 48 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/rapid-app-dev/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/rapid-app-dev/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2022-02-02-rapid-app-dev/thumb.webp" alt="Rapid Application Development with Code Generation" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="webgl-shaders" data-hash="hyvPCuxKyl" data-so-d="87" data-so-p="174">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/webgl-shaders/">Advanced Creative Coding with WebGL & Shaders</a>
</h2>
<div class="Instructor">
<a title="Matt DesLauriers" href="https://frontendmasters.com/teachers/matt-deslauriers/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/deslauriers/thumb.webp" alt="Matt DesLauriers" loading="lazy" height="78" width="78">
</div>
<div class="name">Matt DesLauriers</div>
<div class="organization">Freelancer</div>
</a>
</div>
<div class="description">Go deeper into creative coding and 3D graphics programming using WebGL, ThreeJS, and GLSL. In this course, you'll learn 3D vectors and shader effects. </div>
<div class="meta">
4 hours, 17 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/webgl-shaders/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/webgl-shaders/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2020-04-21-webgl-shaders/thumb.webp" alt="Advanced Creative Coding with WebGL & Shaders" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="advanced-async-js" data-hash="yVrGcouuYi" data-so-d="144" data-so-p="181">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/advanced-async-js/">Advanced Asynchronous JavaScript</a>
</h2>
<div class="Instructor">
<a title="Jafar Husain" href="https://frontendmasters.com/teachers/jafar-husain/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/husain/thumb.webp" alt="Jafar Husain" loading="lazy" height="78" width="78">
</div>
<div class="name">Jafar Husain</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Know how Javascript is asynchronous and use features and techniques that will help you reduce code and create more innovative applications. Learn more!</div>
<div class="meta">
3 hours, 34 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/advanced-async-js/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/advanced-async-js/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-09-13-advanced-async-js/thumb.webp" alt="Advanced Asynchronous JavaScript" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="testing-modular-front-end" data-hash="fiyMkDdQQf" data-so-d="145" data-so-p="185">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/testing-modular-front-end/">Testing and Modular Front-End</a>
</h2>
<div class="Instructor">
<a title="James Halliday" href="https://frontendmasters.com/teachers/james-halliday/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/halliday/thumb.webp" alt="James Halliday" loading="lazy" height="78" width="78">
</div>
<div class="name">James Halliday</div>
<div class="organization">Substack</div>
</a>
</div>
<div class="description">Learn how to write unit tests for node.js and the browser and build up a modular frontend brick by brick with James Halliday</div>
<div class="meta">
2 hours, 9 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/testing-modular-front-end/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/testing-modular-front-end/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-09-13-testing-modular-front-end/thumb.webp" alt="Testing and Modular Front-End" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="intermediate-python" data-hash="OMRXpfbHRs" data-so-d="114" data-so-p="186">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/intermediate-python/">Intermediate Python</a>
</h2>
<div class="Instructor">
<a title="Nina Zakharenko" href="https://frontendmasters.com/teachers/nina-zakharenko/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/zakharenko/thumb.webp" alt="Nina Zakharenko" loading="lazy" height="78" width="78">
</div>
<div class="name">Nina Zakharenko</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Utilize comprehensions to manipulate large quantities of data, Python's OO system, how to approach error handling, and how to utilize a web framework in your application.</div>
<div class="meta">
4 hours, 37 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/intermediate-python/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/intermediate-python/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2019-05-01-intermediate-python/thumb.webp" alt="Intermediate Python" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-" id="linting-asts" data-hash="zosGlCgYwo" data-so-d="149" data-so-p="187">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/linting-asts/">Code Transformation and Linting with ASTs</a>
</h2>
<div class="Instructor">
<a title="Kent C. Dodds" href="https://frontendmasters.com/teachers/kentcdodds/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/dodds/thumb.webp" alt="Kent C. Dodds" loading="lazy" height="78" width="78">
</div>
<div class="name">Kent C. Dodds</div>
<div class="organization">Professional Trainer</div>
</a>
</div>
<div class="description">Learn to use Abstract Syntax Trees (ASTs) to make stylistic code changes, reveal logical problems, and prevent bugs from entering your codebase.</div>
<div class="meta">
3 hours, 28 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/linting-asts/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/linting-asts/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-07-11-linting-asts/thumb.webp" alt="Code Transformation and Linting with ASTs" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="webpack-plugins" data-hash="oBMfUgYnNP" data-so-d="133" data-so-p="189">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/webpack-plugins/">Webpack Plugins System</a>
</h2>
<div class="Instructor">
<a title="Sean Larkin" href="https://frontendmasters.com/teachers/sean-larkin/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/larkin/thumb.webp" alt="Sean Larkin" loading="lazy" height="78" width="78">
</div>
<div class="name">Sean Larkin</div>
<div class="organization">Microsoft</div>
</a>
</div>
<div class="description">Learn the Webpack 4 plugin system, tour the Webpack source code and learn to build custom plugins and custom Webpack loaders.</div>
<div class="meta">
1 hours, 34 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/webpack-plugins/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/webpack-plugins/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-07-02-webpack-plugins/thumb.webp" alt="Webpack Plugins System" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="serverless-aws" data-hash="XGdrYBitYn" data-so-d="137" data-so-p="190">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/serverless-aws/">Serverless with AWS Lambda</a>
</h2>
<div class="Instructor">
<a title="Scott Moss" href="https://frontendmasters.com/teachers/scott-moss/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/moss/thumb.webp" alt="Scott Moss" loading="lazy" height="78" width="78">
</div>
<div class="name">Scott Moss</div>
<div class="organization">Netflix</div>
</a>
</div>
<div class="description">Learn AWS Lambda functions and how to test, debug and deploy them to build a real API powered by lambda functions.</div>
<div class="meta">
2 hours, 49 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/serverless-aws/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/serverless-aws/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-05-24-serverless-aws/thumb.webp" alt="Serverless with AWS Lambda" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="responsive-typography-v2" data-hash="MjPNzNejoJ" data-so-d="130" data-so-p="191">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/responsive-typography-v2/">Responsive Web Typography v2</a>
</h2>
<div class="Instructor">
<a title="Jason Pamental" href="https://frontendmasters.com/teachers/jason-pamental/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/pamental/thumb.webp" alt="Jason Pamental" loading="lazy" height="78" width="78">
</div>
<div class="name">Jason Pamental</div>
<div class="organization">Isovera</div>
</a>
</div>
<div class="description">Learn how to implement web fonts and create a modern, scalable web typography system to give the best reading experience for desktop and mobile devices!</div>
<div class="meta">
4 hours, 24 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/responsive-typography-v2/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/responsive-typography-v2/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-08-15-responsive-typography-v2/thumb.webp" alt="Responsive Web Typography v2" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="leveldb-crypto" data-hash="hgvrgeKbgN" data-so-d="146" data-so-p="206">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/leveldb-crypto/">LevelDB & Crypto</a>
</h2>
<div class="Instructor">
<a title="James Halliday" href="https://frontendmasters.com/teachers/james-halliday/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/halliday/thumb.webp" alt="James Halliday" loading="lazy" height="78" width="78">
</div>
<div class="name">James Halliday</div>
<div class="organization">Substack</div>
</a>
</div>
<div class="description">Cryptography provides a foundation for secure communications and distributed systems. LevelDB gives a modular structure to persist and query data in node.js</div>
<div class="meta">
2 hours, 28 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/leveldb-crypto/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/leveldb-crypto/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2017-09-13-leveldb-crypto/thumb.webp" alt="LevelDB & Crypto" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="content-strategy" data-hash="UpGhTUSMxP" data-so-d="138" data-so-p="270">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/content-strategy/">Content Strategy</a>
</h2>
<div class="Instructor">
<a title="Kristina Halvorson" href="https://frontendmasters.com/teachers/kristina-halvorson/">
<div class="porthole">
<img class="" src="https://static.frontendmasters.com/assets/teachers/halvorson/thumb.webp" alt="Kristina Halvorson" loading="lazy" height="78" width="78">
</div>
<div class="name">Kristina Halvorson</div>
<div class="organization">Brain Traffic</div>
</a>
</div>
<div class="description">Our content strategy course will teach you how to research and create an effective content strategy that helps create a cohesive voice for your website.</div>
<div class="meta">
3 hours, 6 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/content-strategy/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/content-strategy/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-04-06-content-strategy/thumb.webp" alt="Content Strategy" loading="lazy" height="350" width="350">
</a>
</div>
</li>
<li class="MediaItem s-vflex state-current" id="nodebots" data-hash="xODnkuIOxt" data-so-d="128" data-so-p="273">
<div class="s-vflex-outer">
<div class="s-vflex-inner">
<h2 class="title">
<a href="https://frontendmasters.com/courses/nodebots/">Nodebots / Hardware</a>
</h2>
<div class="Instructor">
<a title="Steve Kinney" href="https://frontendmasters.com/teachers/steve-kinney/">
<div class="porthole">
<img class="lazyloaded" src="https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp" alt="Steve Kinney" loading="lazy" height="78" width="78">
</div>
<div class="name">Steve Kinney</div>
<div class="organization">Temporal</div>
</a>
</div>
<div class="description">Learn to control simple nodebots hardware devices, read data from sensors, or create IoT projects with Johnny-Five library for Node.js!</div>
<div class="meta">
2 hours, 55 minutes
<strong class="captioned">CC</strong>
</div>
</div>
<div class="cta">
<a class="Button ButtonSmall ButtonRed" href="https://frontendmasters.com/courses/nodebots/">Watch Free Preview</a>
<a class="Button ButtonSmall" href="https://frontendmasters.com/join/">Get Full Access</a>
</div>
<span class="drag-handle">⠇</span>
</div>
<div class="thumbnail-wrap">
<a class="thumbnail" href="https://frontendmasters.com/courses/nodebots/">
<img class="" src="https://static.frontendmasters.com/assets/courses/2018-08-24-nodebots/thumb.webp" alt="Nodebots / Hardware" loading="lazy" height="350" width="350">
</a>
</div>
</li>
</ul>
</div>
!
