Skip to main content

Blogs, Videos and Tools

Javascript​

JavaScript - MDN Web Docs 📝​

It provides comprehensive documentation on the JavaScript language, covering both syntax and coding conventions, as well as tutorials and resources for deeper learning.


The Modern JavaScript 📝​

It offers tutorials and articles that teach modern JavaScript from scratch with thoughtful examples and exercises. This is an excellent resource for beginners and experienced developers alike.


Event Loop 🎥 (What the heck is the event loop anyway? | JSConf EU)​

It explains what event loop is and how it works in javascript.

Author: Philip Roberts

Watch Time: ⏱️ 27min


🧹Clean Code JavaScript📝​

To write clean and maintainable code in JavaScript, Clean Code JavaScript by Ryan McDermott provides readers with guidance for creating robust application architectures and patterns for writing cleaner code.

Author: Ryan McDermott

Read Time: ⏱️ 1hour 30min


Typescript​

Official Docs 📝​

It provides resources, documentation, and a guide to get started with TypeScript easily. In addition, there are detailed tutorials on basic and advanced concepts of TypeScript, code examples, and references to other learning resources like online courses, books, and blogs.


Total TypeScript 📝​

It provides tutorials, guides, and resources to help users learn the basics and advanced topics of TypeScript such as Generics, Classes, Interfaces, and Decorators. It also provides reference material on topics such as TypeScript compilation settings and the TypeScript compiler API. Total TypeScript's library of resources is designed to give developers all the information they need to become proficient with TypeScript quickly.


⚛️React​

Official docs 📝​

The best way to begin learning React is to start by following these docs. This guide contains step-by-step instructions on how to set up a React project, write components, and how to create complex user interfaces. Once you’ve finished reading the Getting Started docs, you should have a good understanding of how to use React and the skills needed to build applications with it.


React Router 🧭​

React router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page. It can be used on both web and mobile applications, providing developers with an easy way to navigate their apps and provide users with deep links into specific content. React Router provides several features to help developers build dynamic single page applications.


Mastering useEffect - YouTube 🎥​

This tutorial explains how and when to use the useEffect hook. How it works behind the scenes, when to avoid using this hook.

Author: Jack Harrington

Watch Time: ⏱️ 27min


Next.js by Vercel - The React Framework (nextjs.org)📝​

If you are looking to learn Next js then you need to read their official documentation.


🔐State Management​

Redux Toolkit 💪✨​

Redux Toolkit is a popular opinionated Redux library that simplifies the process of writing Redux code by providing a set of helper functions, utilities, and best practices. It includes features such as pre-configured Redux store setup, an efficient way to create Redux slices, simplified immutable update logic with immer, and simplified Redux Thunk and Saga integration.


React Query - Hooks for fetching, caching and updating asynchronous data in React ⚡​

React Query is a React library that provides a powerful and flexible way to manage server-state and handle asynchronous data fetching in React applications.


Zustand 📝​

Zustand is a state management library for React that provides a lightweight and easy-to-use alternative to Redux. Zustand is designed to simplify the process of managing complex state in React applications by providing a minimal API and leveraging the power of React hooks.


useContext • React📝​

The useContext hook is a built-in React hook that provides a simple way to consume data from a React context. It allows you to access context values and functions within your components without the need for prop drilling.


📦Bundlers​

Webpack📝​

Webpack is a popular module bundler for JavaScript applications that simplifies the process of managing and bundling assets and dependencies.


Vite | Next Generation Frontend Tooling📝​

Vite is a fast and lightweight build tool for modern web applications that aims to provide a more efficient development experience. It uses ES modules natively and provides an instant development server with hot module replacement (HMR) to speed up the development process.


Turbopack - The successor to webpack🏎️📝​

Turbo is a modern build tool that enables fast and efficient builds for web applications. It takes an opinionated approach to the build process by optimizing builds for specific frameworks.


🎨🌐HTML & CSS​

Ant Design📝​

Ant Design (Antd) is a popular UI framework for React-based web applications that provides a comprehensive set of customizable components and a design language. It has excellent documentation and a vibrant community, making it easy to learn and use for building modern and responsive user interfaces.


Tailwind CSS📝​

Tailwind is a popular utility-first CSS framework that simplifies the process of building responsive and customizable user interfaces. It provides a set of predefined classes that can be easily applied to HTML elements to quickly style them.


An Interactive Guide to Flexbox in CSS 📝​

Flexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed.

Author: Josh W. Comeau

Read Time: ⏱️ 15min


CSS Positioning 🎥​

Using the position property is one of many ways you can change the layout and positioning of an element to create unique web layouts. You can even specify the stacking order of positioned elements that overlap other elements using z-index.

Author: Webflow

Watch Time: ⏱️ 17min


Codepipe Games​

Codepip is a website that offers a variety of games to help people learn how to code. The games are designed to be fun and engaging while teaching programming concepts and skills in a hands-on way.


CSS Grid Gardens​

CSS Grid Garden is an interactive website that teaches users how to use CSS Grid to create responsive and flexible layouts. The website takes the form of a game, where the player must use CSS Grid to grow a garden by planting and arranging various plants.


Flexbox Froggy - A game for learning CSS flexbox​

Flexbox Froggy is a fun and interactive web-based game that teaches users how to use CSS flexbox, a layout model for creating flexible and responsive web page layouts.


Equal Columns With Flexbox: It’s More Complicated Than You Might Think 📝​

The article provides a detailed explanation of the challenges involved in creating equal height columns using flexbox and offers several solutions to overcome them.

Author: Kevin Powell

Read Time: ⏱️ 15min


Learn CSS Grid the easy way - YouTube🎥​

CSS grid is a powerful layout system in CSS that allows developers to create complex and responsive layouts with ease.

Author: Kevin Powell

Watch Time: ⏱️ 37min


A Complete Guide to Data Attributes 📝​

This article on CSS-Tricks provides an in-depth explanation of HTML data attributes and how to use them effectively.

Author: Chris Coyier

Read Time: ⏱️ 15min