Resources for Web Developers in 2022

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web application as it runs.

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Debug the DOM in Chrome with the Devtools Elements Panel

After completing this course, you will be able to build well-designed user interfaces without spending a lot of time (if even) styling every component and element. You will drastically simplify your front-end work and learn to modify and build on top of existing design systems.

Chakra UI is a React components library with built-in accessibility. It comes with a modern-looking design system that's easily extendable and configurable. The simple styling API significantly reduces development time, so developers can quickly prototype their ideas and achieve the desired style and "brand" by editing a single file. 

**The result of using Chakra UI is a well-designed app that's accessible out-of-the-box, achieved with minimal effort and time.**

In this course, you'll learn how to build a checkout UI. 

![checkout UI](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1631148385/Chakra-UI-Course.png)

In the first phase of the course, you will learn all about the built-in components. Then we will override the theme, add custom fonts and colors, and make our UI unique.

This course provides all the design files to follow along. [You can download them here](https://www.figma.com/file/vOcnzw9yT05grSCD1ji7ax/egghead.io---Introduction-to-Chakra-UI?node-id=802%3A9205).

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

Build a Modern User Interface with Chakra UI

Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

There are options. You can turn to a full-blown CSS framework like Bootstrap to help build your app. But, out of the box, you end up building an app that people will look at and say, "Hey there, nice Bootstrap app."

So if you want a fully custom design, you are back at step 1.

There's a middle way. An approach that gives you the freedom to apply your custom design, but in a way that greatly simplifies the CSS, providing you with core functionality without applying heavily opinionated design to your app.

This is Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

Design with Tailwind CSS is a series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.

Together we’ll build Workcation, a property rental app loaded with interesting details that will help you master Tailwind in no time.


Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Design with Tailwind CSS Masterclass

Angular comes with a robust animation system built-in, but it requires an understanding of a combination of triggers, states, styles, and animations. This course walks you through each of the animation features so you can start building out your own Angular animations.

This Angular course assumes knowledge of some fundamentals.
We have an Angular course that will [Get you started](https://egghead.io/courses/get-started-with-angular)

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

Animate Angular Web Applications

In this course, you will learn more about using observables in Angular. We are going to how we can leverage the power of observables and RxJS to build a rock solid instant search component with a handful of operators.

You will learn operators by applying them to a real-world component. By the end of this course, you will have a clear understanding of how components can be designed around the concept of event streams which are wired together like modular building blocks.

All of this in about 11 minutes! 😄

This course assumes a solid understanding of fundamentals.
We have Intermediary Angular courses that'll get you up to speed.  
- [Dependency Injection](https://egghead.io/courses/angular-dependency-injection-di-explained)
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/learn-the-basics-of-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router) 
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)

⚠ The code used in the course is of Angular `^2.0.0`, and the code given in the [transcript](https://codesandbox.io/s/54xv161qq4?from-embed) is of Angular `7.0.3`. **An updated version of the code can be found [here](https://github.com/eggheadio-projects/build-an-angular-instant-search-component-course-notes)** *(updated 5/8/2020)*. The code for each lesson resides in the respective branch on the repository.

Build an Angular Instant Search Component

Implementing modern component-based architecture in your new or existing Angular 1.x web application is a breath of fresh air.

In this course, you are going to take a close look at Eggly, an Angular 1.x application for organizing bookmarks, and build it using modern patterns and practices, inspired by Angular 2's recommended architecture.

You will learn how to leverage ES6 in your Angular 1 applications through Babel, and fully understand the core patterns that are used in a composed modular web application. 

This course will teach you how to leverage your existing knowledge of Angular, while preparing your mind (and applications!) for the future.

If you are interested, there is a [companion guide](http://www.angular2patterns.com/) that digs deeper into the patterns found in this course and Angular 2.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Using Angular 2 Patterns in Angular 1.x Apps

In this course, we’ll get started creating content with WebGL without any frameworks. You’ll write raw JavaScript code and shaders in GLSL. This intro course covers setting up WebGL in an HTML application and learning the basics of 3d vertices, shaders, drawing modes, animation, interaction and transformations.

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.

webgl

Create 3D Graphics in JavaScript Using WebGL

Angular's router comes with many features for routing based on path's and loading specific components. This course gives you an intro to how to configure your routes, navigate between them, and use services and guards when navigating to routes.

This Angular course assumes knowledge of some fundamentals.
We have an Angular course that will [Get you started](https://egghead.io/courses/get-started-with-angular)

Manage UI State with the Angular Router

This course will teach you the ins and outs of dependency injection in Angular. You will learn what dependency injection means, how it applies to software in general and how it is implemented in Angular. We will take a look at simple use cases like injecting services, to exploring different providers recipes and when they are useful. We will also cover almost unknown features like viewProviders, OpaqueToken and edge cases where forwardRef() is needed.

This Angular course assumes knowledge of some fundamentals.
We have an Angular course that will [Get you started](https://egghead.io/courses/get-started-with-angular)

Angular Dependency Injection (DI) Explained

Techniques to improve your CSS, Sass, and HTML implementations for everyday scenarios. 

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Learn the Fundamentals of CSS and Sass to Create Modern and Responsive Layouts 

Operators are the core building blocks for reacting to data in your JavaScript applications.

In this course you will learn what operators are, and then take a tour of the most useful operators that RxJS has to offer.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

RxJS Beyond the Basics: Operators in Depth

Accessibility (or a11y) is an important but often neglected in the world of web development. Many developers find themselves coding user interfaces without any knowledge of keyboard or screen reader requirements. 

The fact is that accessibility doesn't happen by accident. Often it is seen as too hard or time consuming. This doesn't have to be the case. By following a handful of high-value patterns and practices, we can open our web apps to humans that otherwise wouldn't be able to interact with them at all.

This course will introduce you to accessibility through hands-on, technical examples that are way more effective than reading 10-year-old static web content.



WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

Start Building Accessible Web Applications Today

Angular makes creating forms a breeze with its new ngForm, ngModel, and ngModelGroup features. This course walks you through how to set up your forms, validation, and styling.

This Angular course assumes knowledge of some fundamentals.
We have an Angular course that will [Get you started](https://egghead.io/courses/get-started-with-angular)

Learn the Basics of Angular Forms

Notion is a note taking application that empowers super productive workflows, without compromising on beautiful UI or intuitive UX. Next.js is a React framework that sprinkles in server-side logic in the places it is needed. This allows each page to be dynamically rendered by the client, rendered by the server or entirely static and rendered at build-time. This makes it an incredibly flexible option that can start off as simple as `create-react-app` and incrementally introduce complexity as the application evolves. 

In this course, you will learn how to pre-render static pages with data from the Notion API. We will cover querying `page`, `block` and `database` data, as well as updating properties with mutations, and some helpful techniques for transforming raw responses into convenient data structures for our React components. Using Incremental Static Regeneration (ISR), we will learn about dynamically creating static pages any time new data is available in Notion. 

We will be building two example applications - a recipe app and a movie picker. The data for these applications will live in Notion, and be queried by Next.js at build time. This allows us to use Notion for its delightful authoring experience, and Next.js to make this data publicly available via super performant static pages.

Next.js is a minimalistic framework for server-rendered React applications.

Build Static Pages Dynamically using Next.js and the Notion API

Bite-size video tutorials for badass web developers.

egghead

Live Workshop Recording

Angular has introduced many new concepts around how to construct components. There's new template syntax, a new event system, a new transclusion system,  life cycle hooks, a renderer, and on and on. If you're familiar with Angular 1 and you're looking for Angular $scope, Angular $compile, Angular transclusion, and everything about Angular components then this course is exactly what you're looking for.

This Angular course assumes knowledge of some fundamentals.
We have an Angular course that will [Get you started](https://egghead.io/series/get-started-with-angular)

Building Angular Components

CSS layout is totally frustrating. You are likely to find yourself fighting CSS for hours, maybe days, on a layout problem that seems simple at first, but proves to be insanely tricky.


In this course you will take a look at some advanced CSS techniques that will show you how to solve real problems you're likely to encounter in your applications. We will explore some of the lesser know CSS layout features, so even if you've got significant experience with CSS, you will probably learn something new that can help you in your day to day work.


We are assuming that you have a working knowledge of CSS basics, and we will dive right into more advanced CSS layout. These techniques should have you writing more versatile future-proof stylesheets right away!

Cascading Style Sheets bring order and beauty to our applications.

Learn Advanced CSS Layout Techniques

This course examines the Sources panel in the Chrome DevTools, which allows you to see what files are responsible for the various things on the screen. Bundled into this panel, though, is the single most useful tool for any JavaScript developer - the JavaScript Debugger. We’ll use the Debugger to inspect JavaScript as it runs, allowing you to watch (and even interact with) the state of your application as it runs in ways that’ll blow your mind if you’ve mostly used console.log to debug your applications to this point. 

Debug JavaScript in Chrome with DevTool Sources

Supabase is an open-source tool for rapidly building application backends with real-time data and authentication. In this course, you'll learn the fundamentals of Supabase. You'll learn how to model complex data using PostgreSQL and SQL, build authentication flows with Oauth, and add real-time data to a Next.js application to build a fully-featured chat application, similar to Discord.

The chat app will have different "channels," which will be powered by data inside of Supabase. Users can visit these channels and write messages, which will be sent in real-time to other current users of the platform.

After this course, you will be able to model real-world scenarios in actual relational databases, understand how to manage real-time data, and leverage key functionality provided by Supabase, such as authentication, instant APIs, and real-time subscriptions.

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

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

GIF Loop Coder is a desktop tool for creating looping animations using JavaScript code. It is hours of fun to be had, and the [results are always interesting](http://gifloopcoder.tumblr.com/).

With this course, you will learn how to create animations with GLC. GLC is an open source application, built on top of Electron. [You can find it on Github](https://github.com/bit101/gifloopcoder)!

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

GIF Loop Coder for Creating Animation

In this course we take a basic shopping cart application built with React and fully power it with Redux and RTK using TypeScript. For those of you familiar with Redux Hooks, we use those here, but the emphasis is more on how the Redux Toolkit simplifies the process of setting up your redux application including building slices, reducers, selectors and thunks. Everything we do in the course is typed with TypeScript to make your application development process as smooth and powerful as possible. 