Learning HTML & CSS & JavaScript

This repository contains numerous examples that help to grasp concepts related to HTML, CSS, JavaScript, and other web technologies.

Repository Contents

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.

Learning Resources

Based on these (free) courses:

• HTML:
  • 🎥 Learn HTML – Full Tutorial for Beginners (2022),
• CSS:
  • 🎥 CSS Tutorial – Full Course for Beginners,
  • CSS Games / Tutorials:
    • 📖 Flexbox Froggy,
    • 📖 Grid Garden,
  • TailwindCSS:
    • 🎥 Learn TailwindCSS – Course for Beginners,
    • 🎥 Coding Shorts: DaisyUI,
    • ✅ 🎥 Ultimate TailwindCSS Tutorial - Build a Discord-inspired Animated Navbar,
• JavaScript:
  • 🎥 Learn JavaScript - Full Course for Beginners,
  • ✅ 🎥 JavaScript Framework Tier List,
  • 🎥 Bun Tutorial – JavaScript Runtime (Node.js Alternative) - Full Course,
• TypeScript:
  • 🎥 TypeScript - The Basics,
  • 🎥 TypeScript Course for Beginners - Learn TypeScript from Scratch!,
  • 🎥 Learn TypeScript – Full Tutorial,
  • 📖 TypeScript Deep Dive 👍,
  • 📖 Setting up Webpack for any Typescript project from Scratch,
• Node.js:
  • 🎥 Node.js Ultimate Beginner’s Guide in 7 Easy Steps,
  • 📖 Building a REST API with Node and Express,
  • 🎥 Node.js Full Course for Beginners,
  • 📖 5 Ways to install Node.js 👍,
  • 📖 NVM for Windows – How to Download and Install Node Version Manager in Windows 10,
• 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 ▶️:
    • ShareMe Social Media Application,
    • Modern Full Stack ECommerce Application with Stripe & Sanity,
    • Micael - The Ultimate Web Development Portfolio,
  • 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 ▶️:
    • YouTube Clone App,
    • Fitness Exercises App,
    • Spotify Clone App,
  • 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:
    • 🎥 Bootstrap 5 Fundamentals 📁,
    • 🎥 Bootstrap 4 From Scratch With 5 Projects 📁,
    • 📖 Practical Bootstrap: Learn to Develop Responsively with One of the Most Popular CSS Frameworks 📁,
  • 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,
• 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 📁,
• 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:
  • Electron from Scratch: Build Desktop Applications with JavaScript 📁 ▶️,
• 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 📁,
• 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:
  • ✅ 📖 Hyperskill: Frontend Developer 👍,
  • ANF: Architektura Na Froncie,
  • Babel: Get Started 📁,
  • Webpack 5 Fundamentals 📁,
  • User Experience: The Big Picture 📁,
  • Figma: Getting Started 📁,
  • Svelte: Getting Started 📁.

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.

Useful Tools & Libraries

Some useful tools & libraries:

• General:
  • Prettier,
• CSS:
  • Bootstrap,
  • Tailwind CSS,
  • daisyUI,
• JavaScript:
  • MDN Web Docs for JavaScript,
  • Ecma T39 📁,
  • Can I Use?,
  • ESLint,
• TypeScript:
  • typescriptlang.org 📁,
  • jsr.io,
  • JSON to TypeScript,
• Node.js:
  • Node.js,
  • 📖 Node.js - Previous Releases,
  • Express,
  • NPM,
  • YARN,
  • PNPM,
  • nvm,
  • n,
  • Bun 📁,
  • hono,
• 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:
  • Next.js,
  • Next.js - Examples,
• HTMX:
  • </> htmx 📁,
  • mustache.js,
• 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.