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:
- 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 MarketplaceGist π,
- β 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.