This repository contains numerous examples that help to grasp concepts related to HTML, CSS, JavaScript, and other web technologies.
This repository contains the following sub-directories:
- css the CSS examples,
- html the HTML examples,
- javascript the JavaScript examples,
- projects demo projects created using aforementioned technologies & more :-),
- hyperskill my solutions to Hyperskill projects from different tracks.
Based on these (free) courses:
- HTML:
- CSS:
- π₯ CSS Tutorial β Full Course for Beginners,
- CSS Games / Tutorials:
- π Flexbox Froggy,
- π Grid Garden,
- TailwindCSS:
- JavaScript:
- TypeScript:
- Node.js:
- React:
- React,
- Tutorial: Intro to React,
- Awesome React,
- React Course - Beginner's Tutorial for React JavaScript Library [2022] π,
- React JavaScript Framework for Beginners β Project-Based Course,
- MERN Stack Full Tutorial & Project | Complete All-in-One Course | 8 Hours
βΆοΈ , - React with .NET Web API β Basic App Tutorial,
- Modern React Web Development Full Course | 4 Real Industry Web Applications
βΆοΈ : - React Booking | Reservation App UI Design for Beginners,
- React Node.js Booking App Full Tutorial | MERN Stack Reservation App (JWT, Cookies, Context API),
- React State Management β Intermediate JavaScript Course,
- Redux Tutorials Index,
- Fundamentals of Redux Course from Dan Abramov,
- Learn React Router v6 In 45 Minutes,
- Build and Deploy a Full Stack TikTok Clone Application and Master TypeScript π
βΆοΈ , - Build and Deploy a GPT-3 App in NextJS in 1 Hour (ChatGPT),
- Build and Deploy 3 Modern React API Applications in 8 Hours - Full Course | RapidAPI
βΆοΈ : - Build and Deploy a React Native App | 2023 React Native Course Tutorial for Beginners,
- Complete MERN Beginner Course [2023] (TypeScript, Authentication, Deployment...),
- NextJS Full Beginner Course [2023],
- The Most Efficient Next.JS 14 Beginner Tutorial (TypeScript, App Router, React Server Components),
- T3 Stack Tutorial - FROM 0 TO PROD (Next.js, tRPC, TypeScript, Tailwind, Prisma & More),
- The always-recent guide to creating a development environment for Node and React (with Babel and Webpack) π,
- Create React App without Create React App π,
- Creating your React project from scratch without create-react-app: The Complete Guide π,
- Create react app vs Vite,
- Use Vite for React Apps instead of CRA,
- 7 better ways to create a React app,
- How To Use Axios With React: The Definitive Guide (2021) π,
- 10 React Hooks Explained // Plus Build your own from Scratch,
- React Hooks Course - All React Hooks Explained,
- React State Management β Intermediate JavaScript Course,
- All useEffect Mistakes Every Junior React Developer Makes,
- Goodbye, useEffect - David Khourshid,
- The weird things about React,
- How to Style your React App (5 Different Methods Compared),
- 10 React Antipatterns to Avoid - Code This, Not That!,
- JavaScript Reducer (origin React/Redux),
- GraphQL Crash Course With Full Stack MERN Project,
- How to Migrate a React App to TypeScript,
- Exploring React 19 Features - use() Hook, Actions & More π,
- HTMX:
- π Hypermedia Systems,
- π Hypermedia-Driven Applications,
- β π What is HTMX? Why it Matters? and How to use it,
- β π A First Look at HTMX and How it Compares to React,
- β π₯ HTMX For React Developers in 10 Minutes,
- β π₯ HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript π π,
- π₯ FULL Introduction To HTMX Using Golang,
- β π₯ HTMX - What they don't want you to know!,
- β π₯ The Most Important Lesson From HTMX,
- Others:
- Meta Front-End Developer Professional Certificate,
- Web Development In 2023 - A Practical Guide,
- Web Development In 2024 - A Practical Guide,
- Learn Vite β Frontend Build Tool Course,
- How to use Prettier in VS Code,
- A Visual IDE for React?!? The Future of Web Development,
- Free Hosting Providers in 2023,
- Coding Shorts: Using Vite in ASP.NET Core Projects,
- How to Use HTML to Open a Link in a New Tab,
- Reverse Tabnabbing,
- FIGMA for DEVS? New VS Code Plugin?!?.
Also used these (paid) courses & books:
- HTML & CSS:
- π₯ The Ultimate HTML Developer 2020 π
- π₯ CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox) π
βΆοΈ , - π Learn Enough HTML, CSS and Layout to Be Dangerous: An Introduction to Modern Website Creation and Templating Systems,
- π CSS: The Definitive Guide, 5th Edition,
- Bootstrap:
- TailwindCSS:
- π₯ TailwindCSS 3 Fundamentals π,
- π₯ Tailwind CSS From Scratch - Learn by Building Projects π π π π
βΆοΈ , - π Tailwind CSS π,
- π₯ Tailwind CSS v4 - Beginner to Pro π,
- JavaScript:
- β π Hyperskill: JavaScript Core π,
- Pluralsight - JavaScript 2022 Path:
- β π₯ Javascript: The Big Picture π,
- β JavaScript Fundamentals π π,
- π₯ Arrays and Objects in JavaScript π,
- π₯ Strings and Regular Expressions in JavaScript π,
- π₯ Functions in JavaScript π,
- π₯ Error Handling in JavaScript π,
- π₯ Looping and Branching in JavaScript π,
- π₯ Asynchronous Programming in JavaScript π,
- π₯ Network Requests in JavaScript π,
- π₯ Modules in JavaScript π,
- π₯ JavaScript in the Browser π,
- π₯ Package Management in JavaScript with npm and Yarn π,
- π₯ JavaScript Unit Testing with Jest π,
- π₯ Building a REST API in JavaScript with Express π,
- π₯ Building a Web Application with JavaScript π,
- π₯ Object-oriented Concepts in JavaScript π,
- π₯ Functional Programming Concepts in JavaScript π,
- π₯ Transpiling and Polyfills for Extended JavaScript Support π,
- π₯ Proxy Objects and Reflect in JavaScript π,
- π₯ Web Assembly Interaction with JavaScript π,
- β π₯ Modern JavaScript from the Beginning - Second Edition π_ π,
- π The Joy of JavaScript π,
- π JavaScript from Beginner to Professional π,
- π JavaScript Complete Grandmaster 2023 π,
- π JavaScript: The Definitive Guide, 7th Edition π,
- TypeScript:
- Pluralsight - Typescript Core Language Path:
- β π₯ TypeScript: The Big Picture π,
- π₯ TypeScript 4: Getting Started π π
βΆοΈ , - π₯ Creating Object-oriented TypeScript Code π,
- π₯ Creating Asynchronous TypeScript Code π,
- π₯ Configuring, Compiling, and Debugging TypeScript 4 Projects π,
- π₯ Using TypeScript 4 Modules π,
- π₯ Creating and Using Generics in TypeScript 4 π,
- π₯ Creating and Using TypeScript 3 Decorators π,
- π₯ Using Specialized Types and Language Features in TypeScript π,
- π₯ Creating a TypeScript 3 Declaration File π,
- π₯ TypeScript 4 In-Depth π π,
- Learning TypeScript π π
βΆοΈ , - Understanding TypeScript β 2020 Edition π,
- β π₯ Building React Apps with TypeScript π π,
- Effective TypeScript,
- Pluralsight - Typescript Core Language Path:
- Node.js:
- Node.js API Masterclass with Express and MongoDB π
βΆοΈ , - Modern Frontend Development with Node.js π,
- π Node.js Design Patterns - Third Edition π,
- Pluralsight - Working with Node.js Path:
- β π₯ Node.js 12: The Big Picture π,
- π₯ Node.js 12: Getting Started π,
- π₯ Node.js 12: Getting Started π,
- π₯ Node.js 12: Getting Started π,
- π₯ Getting Started with NPM 4 π,
- π₯ Automating Node.js 6 with NPM Scripts π,
- π₯ Using MongoDB with Node.js π,
- π₯ Building Web Applications with Node.js and Express π,
- π₯ HTTP with Node.js 12 π,
- π₯ Understanding OAuth with Node.js π,
- π₯ Managing Files with Node.js 12 π,
- π₯ Async Patterns in Node.js 12 π,
- π₯ Mocking Node.js with Sinon 8 π,
- Pluralsight - Working with REST APIs in JavaScript Path:
- β π₯ JavaScript REST APIs: The Big Picture π,
- π₯ JavaScript REST APIs: Getting Started π,
- π₯ Building CRUD Actions in a JavaScript REST API π,
- π₯ Uploading Files with a JavaScript REST API π,
- π₯ Securing a JavaScript REST API with JSON Web Tokens π,
- π₯ Caching JavaScript REST API Data with Local Storage π,
- π₯ Developing Node.js Apps with Docker π,
- Building Command Line Applications in Node.js 8 π,
- Express Framework Mastery: From Beginner to Advanced with Node.js π,
- Web Development with Node and Express, 2nd Edition π,
- Distributed Systems with Node.js π,
- Node.js API Masterclass with Express and MongoDB π
- React:
- β π₯ React: The Big Picture π π,
- β π₯ React 17: Getting Started π π,
- β
π₯ React Front to Back 2022 π Gist:
- β Feedback App π,
- β GitHub Finder App π,
- β House Marketplace Gist π,
- β Support Desk π,
- β π₯ Designing React 17 Components π π π,
- Managing React State π,
- Styling React Components π,
- Optimize Performance for React π,
- β π₯ Choosing a React Framework π π,
- Whatβs New in React 18 π π,
- β π₯ React 18: The Big Picture π,
- React 18 Fundamentals π,
- Working with Components in React 18 π,
- Using Hooks in React 18 π,
- Styling Apps in React 18 π,
- Testing in React 18 π,
- React 18 with Next.js Playbook π,
- React 18 with Create-React-App Playbook π,
- MERN eCommerce from Scratch π
βΆοΈ , - React Application Architecture for Production π
βΆοΈ ,
- React Native:
- React Native Fundamentals π,
- React Native - The Practical Guide π
βΆοΈ , - React Native Projects π,
- React Native: Getting Started π,
- Building Mobile Apps with React Native π,
- Building React Native Applications Using Expo π,
- Building a Chat Application with React Native π,
- React Native 0.63: Components Playbook π,
- Styling React Native Applications π,
- Testing Mobile Apps in React Native π,
- Electron:
- Next.js:
- β π₯ Next.js 12: The Big Picture π π,
- β π₯ Next.js 13 Fundamentals π π,
- Next.js from Development to Deployment: Build a Music Event Website π
βΆοΈ , - Practical Next.js for E-Commerce: Create E-Commerce Sites with the Next.js Framework π,
- Real-World Next.js π,
- Node.js Website - built using Next.js with TypeScript, SCSS and MDXv2,
- π₯ Build a Microservices app with .Net and NextJS from scratch π π,
- π₯ Next.js Ecommerce 2025 - Shopping Platform From Scratch π,
- Vue:
- Pluralsight - Vue Path:
- Vue 3: The Big Picture π,
- Vue 3 Fundamentals π,
- Vue 3 Tooling π,
- Vue 3 Router π,
- Vue 3 Forms π,
- Vue 3 Authentication and Authorization π,
- Secure Coding in Vue 3 π,
- Vue 3 Animations π,
- Vue 3 Internationalization π,
- Vue 3 State Management with Pinia π,
- Vue 3 Testing with Vitest π,
- Vue 3 End-to-end Testing with Cypress π,
- Deploying Static Applications with Vue 3 π,
- Vue 3 Playbook π,
- Pluralsight - Vue Path:
- Blazor:
- π Web Development with Blazor - Second Edition π,
- π Blazor WebAssembly By Example - Second Edition π,
- π Mastering Blazor WebAssembly π,
- π Architecting ASP.NET Core Applications - Third Edition π,
- π₯ Pluralsight - ASP.NET Core 6 Blazor Path:
- β π₯ ASP.NET Core: Big Picture π,
- π₯ ASP.NET Core 6 Blazor Fundamentals π,
- π₯ Debugging in ASP.NET Core 6 Blazor π,
- π₯ Creating Components in ASP.NET Core Blazor π,
- π₯ JavaScript Interop in ASP.NET Core Blazor π,
- π₯ Building a Data-driven ASP.NET Core 6 Blazor Server Application with EF Core π,
- π₯ Unit Testing in ASP.NET Core 6 Blazor π,
- π₯ Building a PWA with ASP.NET Core 6 Blazor π,
- π₯ Deploying ASP.NET Core 6 Blazor Applications to Azure π,
- π₯ Building Blazor Hybrid Apps π,
- π₯ Building Enterprise ASP.NET Core 6 Blazor Applications π,
- Others:
This is (sort of) continuation of these project(-s):
- Learning JavaScript & ES6 - Accelerated Training,
- Learning HTML, CSS, JS,
- Learning Bootstrap,
- Learning TypeScript,
- Learning React,
- Learning - React - Summary and Core Feature Walkthrough.
Some useful tools & libraries:
- General:
- CSS:
- JavaScript:
- TypeScript:
- Node.js:
- React:
- React,
- create-react-app,
- Next.js,
- Blitz,
- Gatsby,
- RedwoodJS,
- Remix,
- Vite,
- Hydrogen,
- Snowpack,
- Nx,
- TSDX
Flux,- Redux,
- MobX,
- zustand - Bear necessities for state management in React,
- jsComplete Playground,
- HTML to JSX,
- React Developer Tools,
- CSS in JS,
- Axios,
- Formik,
- QuickType,
- MUI,
- React Hook Form,
- Zod,
- useQuery,
- create-t3-app,
- TailwindCSS,
- React Toastify,
- Recharts,
- React Native,
- Expo,
- Chakra UI,
- Clerk,
- Auth.js - authentication for the Web,
- next-auth - authentication for the Web,
- Next.js:
- HTMX:
- Others:
- Webpack,
- Babel,
- SWC,
- SWR,
- Bun.js,
- autocannon,
- TanStack,
- State of JavaScript,
- Codux,
- SVGR,
- Leaflet,
- React Leaflet,
- Swiper React Components,
- Pretty TypeScript Errors,
- Figma for VS Code,
- Ngrok π,
- XSS-Scanner.com,
- CodeSandbox,
- query-string - parse and stringify URL query strings,
- react-hook-form - performant, flexible and extensible forms with easy-to-use validation,
- react-datepicker - a simple and reusable datepicker component for React,
- react-hot-toast - smoking hot React notifications,
- Cloudinary.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}