Resources for Web Developers in 2021

Learn different ways to manipulate elements (like images and text) on mouse-over by using the :hover pseudo-class in CSS. We will learn how to create the "fade-in" and "fade-out" effects on hover, how to change border effects on hover, how to change the "border-radius" to make rounded corners, and how to delay transitions on hover. 

Cascading Style Sheets bring order and beauty to our applications.

CSS Tips and Tricks on :hover Effects

In this course we will learn and demonstrate the fundamental concepts and APIs of D3, on our way to building several common chart types. We’ll start with the building blocks upon which all D3 visualizations are built; things like scales, interpolators, and selections. We’ll see how to load data with D3, and how to put its full name, Data Driven Documents, into action. We’ll build column and bar charts, scatter plots, and area charts. Most importantly, we’ll gain an understanding of the conventions and patterns that underlie all D3 projects and examples, enabling you to dissect, understand, and build virtually any D3 visualization on the internet.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Build Interactive JavaScript Charts with D3 v4

In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting setup to run our app in the iOS Simulator in addition to an Android emulator using GenyMotion (https://www.genymotion.com/). Understand how to build your native mobile views with NativeScript XML and how to style them with CSS. Using the NativeScript for Angular starter template provides a nice setup out of the box including the core theme which provides handy CSS classes to work with speeding up view building. For page navigation, we will learn how to use the Angular Router to configure a flexible routing setup for our app. The ListView component is a powerful and highly performant native control for handling your lists powered by the UITableView on iOS and native ListView widget on Android. We’ll highlight how you can use RxJS Observables with our native views. Let's also take a look at integrating npm plugins to enrich the UI component library. Lastly, a round up of styling how-to's including integrating SASS for custom app theme creation as well as creating a live app theme switcher.

This Angular course assumes a solid understanding of the fundamentals.
We have Intermediary Angular courses including topics on [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/intro-to-angular-forms), [Router](https://egghead.io/courses/intro-to-angular-router), and [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)

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

Create Native Mobile Apps with NativeScript for Angular

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like `timing` and `spring` to animate style properties, and learn how to combine animations to create more complex effects. We'll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

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

Animate React Native UI Elements

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

There are 1000s of plugins and themes in the Gatsby eco system, which is amazing but introduces the problem of deciding which to use to accomplish the feature you *actually* want to build. 

Analysis paralysis is real.

Enter: Gatsbyjs Recipes 

Gatsbyjs Recipes are run from the CLI and automate common tasks like creating pages and layouts, installing and setting up plugins, adding a blog to a site, setting up Typescript, and many more.

With the release of this new feature, Gatsby has created 11 official recipes that you can explore including: ThemeUI, Sass, Cypress, animated page transitions, and persistent layout components.

In this collection, you will learn how to:

- Set up Gatsby to use Recipes
- Create a multi-step Recipe
- Install NPM packages
- Configure Gatsby Plugins
- Create Custom files with Recipes

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Getting Started with Gatsbyjs recipes

React provides are a powerful paradigm for creating UI applications with JavaScript. TypeScript can greatly increase the maintainability of React applications by opening up syntax for self-documenting code.

In this course, we will cover how to set up a React application with TypeScript and use TypeScript for React applications


Use TypeScript to develop React Applications

In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about using React Native components, how to build custom components, how to layout an application using Flexbox, and how to style components.


We’ll also focus on how to use state to control components, how to persist information across application reloads with AsyncStorage, and how to inline edit in a ListView.

The ultimate goal is to gain an understanding of how to get started building simple React Native applications.

Build a React Native Todo Application

In this course we’ll work through Natural’s API for natural language processing in JavaScript. We’ll look at how to process text: learning how to break up language strings, find the word roots, work with inflectors, find sequences of words, and tag parts of speech. We’ll learn how to find important stats about a body of text: how to compare strings, how to classify text with machine learning, how to use the tf-idf tool to find relevant words. We’ll look at some of the extra tools Natural gives us, including the dictionary/thesaurus of WordNet, a phonetics comparer that lets us see if two words sound the same, and a spellcheck feature. We’ll also look at tries and digraphs, two data structures that help us better analyze bodies of text.

Natural is a general natural language facility for nodejs. Tokenizing, stemming, classification, phonetics, tf-idf, WordNet, string similarity, and some inflections are currently supported.

natural

Natural Language Processing in JavaScript with Natural

Generators are a useful tool for handling asynchrony in your JavaScript applications. They were added to JavaScript with ES2015. When applied correctly they allow us to write asynchronous code that looks synchronous.

They also turn one of JavaScripts core paradigms on its head. Contrary to normal functions, generator functions can be paused and resumed at any arbitrary point in time with the yield keyword.

This course will walk you through the basics of generators so you’ll be able to use them in your applications without ripping your hair out!

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

Write simple asynchronous code with JavaScript generators

In this course, we will build a ToDo API that stores notes using the OpenAPI Specification (Swagger). We will start with a blank API definition using the Swagger Online Editor. The Swagger definition file will be used to create a Node.js API. Along the way, we will discover how to implement additional details required for a fully functional API requests and responses. We will also learn about the powerful capabilities of Swagger to generate server side code and client libraries.

Open API Initiative (OAI) is focused on creating, evolving and promoting a vendor neutral API Description Format based on the Swagger Specification

openapi

Build Node.js APIs with OpenAPI Spec (Swagger)

One of the hardest things about writing non-trivial applications is managing state. In our attempt to effectively manage state, we introduce additional complexity by trying to control application flow and the amount of code volume that comes from all of this. Redux gives us the ability to address state management and communication in astonishingly simple semantics that can be explained in just a couple minutes. The beauty of Redux is that it is not only a library but a pattern that works very will within Angular 1.x applications. In this series, we are going to learn how to integrate redux (the pattern) into Eggly from scratch and then introduce **ng-redux** and add in **Redux DevTools** at the end for fun.

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

Build Angular 1.x Apps with Redux

React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more features of React together to write simpler React components.

React Hooks and Suspense

Bite-size video tutorials for badass web developers.

egghead

Live Workshop Recording

A Journey with Vue Router with Laurie Barth

Use React Suspense to Simplify Your Async UI with Kent C. Dodds

Building Accessible React Apps with Erin Doyle

Intro to State Machines and XState with Kyle Shevlin

Intro to Doom Emacs

Why does Gatsby use GraphQL? In this series you’ll learn how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

Topics

Instructors

Content Type

CSS Tips and Tricks on :hover Effects

Build Interactive JavaScript Charts with D3 v4

Create Native Mobile Apps with NativeScript for Angular

Animate React Native UI Elements

Design with Tailwind CSS Masterclass

Getting Started with Gatsbyjs recipes

Use TypeScript to develop React Applications

Build a React Native Todo Application

Natural Language Processing in JavaScript with Natural

Write simple asynchronous code with JavaScript generators

Build Node.js APIs with OpenAPI Spec (Swagger)

Build Angular 1.x Apps with Redux

React Hooks and Suspense

Live Workshop Recording

Live Workshop Recording

Live Workshop Recording

Live Workshop Recording

Live Workshop Recording

Live Workshop Recording

Intro to Doom Emacs

Why Gatsby Uses GraphQL