Skip to content

Full Stack

UI/UX

Tools

Courses

  • DesignCourse
    • UI/UX
    • Rapid Refactors
  • Google UX Design Professional Certificate coursera
    • Foundations of UX Design
    • Start the UX Process
    • Build wireframes and low-fidelity prototypes
    • Conduct UX research
    • Create high-fidelity designs
    • Build dynamic UI for website
    • Design a UX for social good

Books

  • Refactoring UI
  • Don’t make me thing
  • The Design of Everyday things
  • The design of future things
  • About face: The essentials of interaction design
  • readabilityguidelines.co.uk
  • Laws of ux
  • Letting go of words
  • 100 things every designer needs to know about people
  • Lean UX
  • Articulating design decisions
  • Atomic design
  • Laying the foundations (design systems)

Design systems

  • designsystems.com
  • https://www.chainlift.io/liftkit
  • check frontend masters
  • Google Material
  • Apple Human Interfaces
  • Salesforce Lightning
  • Shopify Polaris
  • Ant Design
  • Microsoft Fluent
  • Uber
  • Mailchimp
  • Spotify
  • Liquid
  • IBM Carbon
  • Adobe Spectrum
  • Atlassian
  • Acorn Firefox

Frontend

  • link Web Platform Contribution Guide

MDN

  • link Guides
    • link Complete beginners start here
    • link HTML - Structuring the web
    • link CSS - Styling the web
    • link JavaScript - Dynamic client-side scripting
    • link Web forms - Working with user data
      • link User input methods and controls
    • link Accessibility - Make the web usable by everyone
    • link Performance - Making websites fast and responsive
    • link MathML - Writing mathematics with MathML
    • link Developing games for the web
    • link Tools and testing
    • link Server-side website programming
    • link Further resources
  • Reference
    • link Web performance
    • link OpenSearch description format
    • link Privacy on the web
    • link SVG: Scalable Vector Graphics
      • Check comparison to .ico files
    • link Security on the web
    • link URIs
    • link WebDriver

web.dev

Chrome

HTML

  • link WHATWG HTML Spec for Web Devs
  • link Idiosyncrasies of the HTML parser
    • link Chapter 1. Introduction
    • link Chapter 2. The HTML syntax
    • link Chapter 3. The HTML parser
    • link Chapter 4. Scripting complications
    • link Appendix C. Microsyntaxes
  • MDN Reference
    • link HTML: HyperText Markup Language
      • References
      • Guides
    • link Web media technologies
    • link Progressive web apps
    • link Web app manifests
  • link wev.dev learn
  • link DOMPurify

---

Other

  • CSS
    • Kevin powell courses
    • Check kevin powell videos on each topic
    • Frontend masters for topic like grid
    • Chrome link CSS and UI
    • MDN CSS
    • DesignCourse
      • CSS
      • AI Generative Video Production
    • web.dev/learn
      • Learn CSS
      • Learn Responsive Design
      • Learn Design
  • Post CSS
  • Lightning CSS
  • Tailwind CSS
  • Other
    • MDN
      • Privacy on the web
      • Progressive Web Apps
      • Security on the Web
      • Web Performance
    • MDN Curriculum
    • web.dev/learn
      • Learn Performance
      • Learn Privacy
      • Learn PWA
      • Learn Testing
  • Accessibility
    • MDN - Accessibility
    • web.dev/learn - Learn Accessibility
    • WCAG compliance
    • ADA compliance
    • WAI compliance
    • Stark
    • DHD Trusted Tester Certification
    • Deque University
    • r/accessibility
    • Problem: with accessibility with math equations (can maybe can extend to chemistry)
    • Make a tool like stark to check accessibility with wcag spec and other specs you can find.
  • Good posts by Adrian Roselli
  • JavaScript
    • web.dev/learn Learn JS
    • Eloquent js link
    • Modern JavaScript Tutorial
    • MDN Reference: Event reference
    • Utility libraries
      • jQuery
      • lodash
      • es-toolkit (newer replacement for lodash)
    • MDN
      • JavaScript
      • Web APIs
    • TypeScript
      • TSDoc
      • Typedoc
    • DesignCourse - Advanced Frontend
    • Animation libraries
      • GSAP
      • Motion One (alternative to GSAP)
      • Three.js
      • Lottie or Rive
    • Chart libraries
      • D3.js
      • uplot
    • Browser
    • Browser engines
      • chromium link
      • webkit
      • gecko
      • servo
      • flow
      • ladybird
    • Chrome browser blog
    • debugging link
    • Chrome developer
      • DevTools
      • Lighthouse
      • Extensions
      • Workbox
    • Zod (valibot modern replacement for zod)
  • Josh W Comeau blog posts (covers CSS, JS, performance)
  • Speeding up the JavaScript ecosystem blog series
  • JavaScript Tooling
    • link Tachometer for benchmarking
    • nvm
    • Package managers
      • npm
      • pnpm
      • jsr
    • Linting
      • ESLint
      • Million Lint
    • Prettier
    • Bundlers
      • Webpack (bundler)
      • ESBuild (used by vite for dev mode)
      • Rollup (used by vite for prod mode)
      • SWC (parser used by Rollup)
      • Rolldown (the rust port of Rollup)
      • Vite
      • rspack (webpack/vite replacement)
      • Babel (for polyfill)
      • core-js (for polyfills)
      • Turbopack (webpack/vite replacement for next.js)
    • Immer (for immutable state)
    • Minifier benchmark github
    • Nitro (server toolkit)
    • vinxi (combines vite and nitro)
    • JSBenchmark
    • WebContainers
  • SlateJS (text editor)
  • Testing
  • Socket (checks vulnerabilities in dependencies)
  • The Web Platform link
    • List all the web technologies being used
    • Can I Use
    • Test suite for web-platform-tests link
  • https://browsersl.ist/

web.dev/explore

web.dev/patterns

Frontend frameworks

Frameworks

  • Angular
    • Analog
  • React
    • Next.js
    • Preact
    • Remix
  • React libraries
    • https://million.dev/
    • State management
      • Zustand
    • Data Fetching
      • TanStack Query
      • tRPC
    • Styling
      • Tailwind CSS
      • clsx (to conditionally apply styles)
    • UI Libraries
      • Tailwind UI
      • MUI
      • React Aria
      • shadcn/ui
      • Headless UI
    • Animation
      • Framer Motion
      • GSAP
    • Charts
      • D3
      • Recharts
      • visx
    • Forms
      • React Hook Form
    • Authentication
      • Lucia
    • Test
      • React Testing Library
  • Vue.js
    • Nuxt
  • Astro
  • Svelte
    • SvelteKit
  • Solid
    • SolidStart
  • Qwik
  • Alpine.js
  • HTMX

Backend

Start with Hussein Nasser Courses

  • Node.js
  • ExpressJS
  • Fastify
  • NestJS

API

  • HTTP
    • Mozialla HTTP observatory link
    • HTTP-1
      • (book) HTTP: The Definitive Guide
      • MDN - HTTP
    • HTTP-2
      • (book) Learning HTTP/2: A Practical Guide for Beginners
      • (book) HTTP/2 in Action
    • HTTP-3
      • Read papers
    • (book) High performance browser networking
  • Networking
    • (book) TCP/IP: Network Administrator
    • (book) Computer Networking: A Top-Down Approach (also videos)
    • Beejs’ Guide to Network Programming
    • (book) UNIX Network Programming
      • volume 1
      • volume 2
    • (book) TCP/IP Illustrated
      • volume 1
      • volume 2
      • volume 3
    • Bulletproof SSL and TLS
  • API
    • (book) Mastering API Architecture: Design, operate and evolve API-based systems
    • (book) Learn API Testing: Norms, Practices and Guidelines
    • (book) Testing Web APIs
    • Google API design guide
    • Slack how we Design out APIs
    • OpenAPI Specification (define RESTful APIs)
    • Swagger (helps to build OpenAPI)
    • Testing tools
    • Soap UI
    • Mock Service Worker
    • OWASP ZAP (API security)
    • Documenting OpenAPI in docusaurus
    • API management (gateway)
      • Kong (built on top of NGINX)
      • Apache APISIX (better than Kong)
      • difference between kong, apisix blog

Web security

  • The Tangled Web: A Guide to Securing Modern Web Applications

Database

  • PostgreSQL
  • ScyllaDB

Extra

  • webpagetest
  • Husky
    • lint-staged
    • pre-commit
  • editorconfig

SAAS

  • Stripe
  • ParityDeals
  • Socket.IO