Courses for Front-End Web Developers

Learn how the latest JavaScript features can help you improve your codebase. 

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

Getting Started with Supabase Local Dev

Expo Application Services ([EAS](https://expo.dev/eas)) is a cloud build service used to build and publish React Native apps.

This course will show you how to create the common types of builds for iOS and Android on EAS. We'll cover Development builds for local development, Preview builds for internal testing, and Production builds for release.

Additionally, you'll learn about:
- app versioning
- automatic store uploads
- setting up store listing pages
- installing multiple app variants on the same device
- installing past builds with [Expo Orbit](https://docs.expo.dev/build/orbit/)

## iOS

An overview of build signing, and why an Apple Developer account needed in order to install builds on a real device.

How to create:
- an iOS simulator build
- a build to use on your device for local development
- a build to share with your team without uploading it to App Store Connect
- a release build to use on the App Store

You will also learn how to upload your build to App Store Connect, share it on TestFlight and create a Release.

## Android

How to create:
- a build to use for development on an emulator or a device
- a build to share with your team without uploading it to Google Play
- a release build to use ob Google Play

We'll cover what is needed to create a new Google Play account, and the current restrictions for individual accounts.

You will also learn how to set up auto-submit on Google Play.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Build and Deploy React Native Apps with Expo EAS

Beginner’s Guide to Storybook 7 with React

A Beginner’s Guide to Storybook 7 with React

In 2018, Kent C. Dodds wrote: "The more your tests resemble the way your software is used, the more confidence they can give you." This phrase became the guiding principle for the entire Testing Library ecosystem. 

A few years later, the React Testing Library became the de facto library for writing unit and integration tests in the React ecosystem.

Thanks to its user-centric perspective, our tests are closer to our user experience and far away from implementation details.

In this course, you will learn how to:

- render your components
- properly query your UI for elements while keeping accessibility and your users' experience in mind
- improve your testing experience with the usage of some utilities
- interact with your components to fire events
- leverage asynchronous utilities to customize your testing flow
- get rid of the annoying "not wrapped in act" warning

After this course, you should be able to write and debug any test using the React Testing Library!

The `@testing-library` family of packages helps you test UI components in a user-centric way.

You want to write maintainable tests that give you high confidence that your components are working for your users. As a part of this goal, you want your tests to avoid including implementation details so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

Testing Library accomplish these goals so you can be confident your application will work when it gets to the end user.

testing-library

An Introduction to the React Testing Library

 "Build a Full Stack Blog with Astro" is a hands-on course that cuts straight to the chase, offering developers a practical approach to building a fully functional blog website. Throughout this course, you'll get to grips with Astro, a modern web framework designed to help you create fast content websites with a modern development experience.

Here's what you'll be tackling:

- **Styling and Layout**: You'll learn how to style Astro pages, exploring a variety of ways to make your site look good without compromising on performance.
- **Astro Components and Static Assets**: Get comfortable creating reusable components and managing static assets like images.
- **Content Publishing System**: Delve into managing blog content with Astro’s content collections, with type safety included with Zod to keep your data structured and error-free.
- **Dynamic Features**: Implement pagination and dynamic pages to make your content discoverable and your site easy to navigate.
- **SEO Essentials**: Tackle SEO fundamentals with **`astro-seo`**, ensuring your site ranks well and reaches the right audience without the guesswork.
- **React and Vanilla JS**: Enhance your site with interactive components, first using React, then refactoring with Vanilla JS for optimal performance.
- **Backend Integration**: You'll dive into back-end functionality, creating custom API endpoints, and interfacing with a database using Drizzle ORM to manage your content behind the scenes.
- **Dynamic OG image generation**: Every content website needs decent OG images for social sharing. You’ll learn how to dynamically generate the OG images for your pages and blog articles.

By the end of this course, you won't just have a theoretical understanding — you'll have a live, deployable full-stack blog that reflects current best practices in web development. You’ll also gain valuable and easily-transferrable skills for working with databases and containerizing and deploying full-stack web apps. This course is about building something tangible that you can use as a springboard for more complex projects down the line. So, let's learn how to build great content websites!

Astro is a flexible web framework that allows you to build fast websites to suit your needs.

By default, Astro will build your site using Static Site Generation (SSG). This means the data in your site is loaded at build time so that the end-user gets served static pages that load quickly.

While Astro defaults this way, it also has Server-Side Rendering (SSR) that you can enable if you have more serverful needs in your application.

Along similar lines, Astro utilizes HTML and the browser as a default but when you need more flexibility you can opt into an Astro Island. Islands use React, Vue, Angular, or any frontend JavaScript framework you are used to enhance the user experience in your site.

astro

Build a Full Stack Blog with Astro

Amazon AWS is one of the most popular cloud providers in the world, but it can also be daunting to learn thanks to the alphabet soup of service acronyms.

Once you've figured out which subset of services to use, you've got a lot of clicking around to do in order to get things configured.

Not anymore!

With the AWS Cloud Development Kit (CDK v2), you are able to configure AWS services from your terminal & editor.

Even better, you can do your configuration, frontend, and backend all with the same language.

In this course, Tomasz Łakomy will guide you through using TypeScript to complete the lifecycle of an application powered by AWS CDK v2. You'll see how to start a project, develop it locally, deploy it globally, and then tear it all down when you're done.

The services & development approach Tomasz demonstrates in this course are used by countless companies around the world.

Is yours next?

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Full Stack TypeScript with AWS Cloud Development Kit v2

Controlling the network is the key to fast prototyping, bullet-proof tests, and efficient debugging. In this course, you will learn how to use Mock Service Worker for API mocking—from the setup and your first request handler to describing more complex network scenarios, such as dynamic requests, HTTP streams, and schema-first GraphQL mocking.

Mock REST and GraphQL APIs with Mock Service Worker

There are two major categories that you'll encounter when you start to build Full Stack applications.

You have:
💽 Database Management 
👥 Authentication

Both of these contain their unique set of challenges and layer on top of each other as you build out your application.

You want to be able to Create, Read, Update, and Delete data from your database and also make sure that only the right users are performing these actions that you specify.

That is why this course is set up around these two categories.

You'll learn everything you need to about managing data using a service called Appwrite within your React application. Using Appwrite, you'll be able to create a database, upload files, and manage users. 

You'll start out by building out the database while purposefully ignoring authentication/authorization through out the application. 

The second part of the course will have you layer on auth so that you can enable users to log in and scope specific actions to roles that you'll create.

This course is focused on the full stack nature of web development so we will start with almost all of our UI built out for us. You can explore the course repository to get familiar with what components are available. 

Full Stack with React and Appwrite

SvelteKit is an application framework that builds on top of Svelte that provides you the app level functionality you need. It does the boring stuff that you don't want to so you can execute on the projects you want. 

As you build with SvelteKit, you'll find it continues the philosphy of Svelte by adhering to Web Standards and APIs. It builds on top of Web APIs so when you're develop SvelteKit sites you are also learning skills that will transfer to any web-based project

In this course, you will build a modern SvelteKit blog powered by Sanity CMS. You'll start from scratch and build out a site that dynamically generates pages that you create inside Sanity. 

As you build your blog, you will learn how to:

- Style Svelte components with TailwindCSS
- Add error pages to different routes
- Query your CMS in the front end
- Parse and validate your data with Zod and JSDoc
- Deploy both Sanity and your app to the web

The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Build a Sanity CMS Powered SvelteKit Blog

**Developers aren’t the only ones working on sites.** 

Marketers, copywriters, designers, and other non-coding roles all need to be able to make content changes. If you don't want to be bothered to open a PR every time a typo needs fixed, you *need* a CMS. 

And Strapi is an *amazing* CMS option.  

Strapi helps you quickly build a robust content API. You can host it yourself, it supports both RESTful and GraphQL, handles your authentication, lets you bring team members and it's highly customizable with plugins and extensions. 

You can take those gains even further by adding **Next.js 13 to the stack.** 

Next.js is fast, supports both server and client-side rendering, and features dynamic routes. Once you are generating dynamic pages from your CMS you’ll see just how powerful the combination of Strapi and Next.js is!

**In this course you will do the following:** 

- Building Content Models with Strapi
- Fetching Data from your Headless CMS
- Using React Server Components
- Using the Next.js App directory
- Setting up pagination in Strapi and Next.js
- Parsing and rendering content in your Next.js application
- Connecting external services to your Headless CMS (like Cloudinary for Media Management)
- Deploying your Next.js and Strapi Applications to a production environment
- Setting up and using Strapi Plugins
Transferring data between your Strapi environments

By the end of this course you’ll be building pages and managing your content like a pro!

strapi

Modern CMS Driven Web Applications with Strapi and Next 13

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Get Started with AI-Driven App Development Using the OpenAI Node.js SDK

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

Build Full Stack Web Applications with Angular and Firebase

We can use the Discord API to build bots, integrations, and extensions for the platform.

discord

Build a Book Club Bot with Discord.js

Learn how to build a pin-input component with state machines, Zag.js and React.

We’ll look at modeling a UI component with state machines, implementing those in a framework agnostic way using Zag.js, and connect the logic to the UI component.

This course is a must-watch if you’re unfamiliar with State machines, and want to learn how to use them to build UI components with ease.

In this course, you will:

- Learn fundamental concept of state machine, event and transition
- Model a UI component with state machine
- Connect state machine logic to UI
- Manage DOM events in state machines
- Create custom React hooks with state machines

A collection of framework-agnostic UI component patterns like accordion, menu, and dialog that can be used to build design systems for React, Vue and Solid.js

Statechart Driven UI Components with Zag.js

[Supabase](http://supabase.com?utm_source=egghead&utm_campaign=remix) is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes.

We will learn about:

- loaders and actions in Remix
- querying and mutating data with Supabase
- authentication with GitHub
- authorization with RLS
- merging client and server state with realtime events
- deploying a Remix app to Vercel

This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

Search

Search Results