Skip to content

Instantly share code, notes, and snippets.

@carefree-ladka

carefree-ladka/Frontend & AI Agent YouTube Series — Master Checklist.mdx

Created June 30, 2026 15:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save carefree-ladka/2fd84107be343993db1f14e8981c266a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save carefree-ladka/2fd84107be343993db1f14e8981c266a to your computer and use it in GitHub Desktop.
Download ZIP
Frontend & AI Agent YouTube Series — Master Checklist
Raw
Frontend & AI Agent YouTube Series — Master Checklist.mdx
title Frontend & AI Agent YouTube Series — Master Checklist
description All topic checklists organized by series, for video/short planning

Frontend & AI Agent YouTube Series — Master Checklist

Table of Contents

  1. Core Language & Markup
  2. React
  3. Performance & Optimization
  4. Browser & Security Internals
  5. Networking & Backend-Adjacent
  6. Coding & Machine Coding Practice
  7. System Design
  8. Interview Prep & Patterns
  9. Tooling & Process
  10. AI Agents
  11. What You Might Have Missed

1. Core Language & Markup

1.1 JavaScript Checklist

  1. Understand scope
  2. Closures
  3. Hoisting
  4. Event loop
  5. Call stack
  6. Promises
  7. Async/await
  8. Debounce
  9. Throttle
  10. Higher-order functions
  11. Map/filter/reduce
  12. Currying
  13. Prototypes
  14. this keyword
  15. Bind/call/apply
  16. Shallow vs deep copy
  17. Event delegation
  18. Memoization
  19. Generators
  20. Modules (ESM)
  21. Destructuring
  22. Spread/rest operators
  23. Optional chaining
  24. Nullish coalescing
  25. Web API

1.2 TypeScript Checklist

  1. Type annotations
  2. Primitive types
  3. Arrays and tuples
  4. Union types
  5. Intersection types
  6. Literal types
  7. Type aliases
  8. Interfaces
  9. Optional properties
  10. Readonly properties
  11. Enums
  12. Any vs unknown
  13. Void and never
  14. Type assertions
  15. Functions with types
  16. Optional parameters
  17. Default parameters
  18. Rest parameters
  19. Generics basics
  20. Generic constraints
  21. Utility types — Partial
  22. Utility types — Pick
  23. Utility types — Omit
  24. Utility types — Record
  25. Utility types — Required
  26. Utility types — Readonly
  27. keyof operator
  28. typeof operator
  29. extends keyword
  30. Conditional types
  31. Mapped types
  32. Type guards
  33. Custom type guards
  34. Discriminated unions
  35. Classes with TypeScript
  36. Abstract classes
  37. Access modifiers
  38. Declaration files (.d.ts)
  39. Module augmentation
  40. TS config optimization
  41. Strict mode
  42. infer keyword
  43. Template literal types
  44. Advanced generics
  45. Common TypeScript interview questions

1.3 HTML Checklist

  1. HTML document structure
  2. Semantic HTML
  3. Head vs body
  4. Meta tags
  5. SEO basics
  6. Heading hierarchy (h1–h6)
  7. Text elements
  8. Lists (ul, ol, dl)
  9. Links and navigation
  10. Images and alt text
  11. Audio tag
  12. Video tag
  13. Tables
  14. Forms basics
  15. Input types
  16. Labels and accessibility
  17. Validation attributes
  18. Button types
  19. Iframes
  20. Data attributes
  21. Block vs inline elements
  22. Div vs span
  23. HTML entities
  24. Accessibility basics (ARIA)
  25. Lazy loading images
  26. Responsive images (picture, srcset)
  27. Preload resources
  28. Favicon setup
  29. Open Graph meta tags
  30. Canonical tags
  31. Local storage basics
  32. Session storage basics
  33. Drag and drop API
  34. Web Workers basics
  35. Canvas basics
  36. SVG basics
  37. Geolocation API
  38. Browser storage APIs
  39. Web Components basics
  40. Common HTML interview questions

1.4 CSS Mastery Checklist

  1. Selectors
  2. Specificity
  3. Box model
  4. Display properties
  5. Positioning
  6. Flexbox
  7. Grid
  8. Units (px/rem/em/vw)
  9. Responsive design
  10. Media queries
  11. Pseudo classes
  12. Pseudo elements
  13. Transitions
  14. Animations
  15. Transform
  16. Variables
  17. Custom properties
  18. z-index
  19. Overflow
  20. Modern layouts
  21. clamp()
  22. Container queries
  23. CSS functions
  24. Accessibility styles
  25. Performance optimization

2. React

2.1 React Checklist

  1. JSX basics
  2. Components
  3. Props
  4. State
  5. Event handling
  6. Conditional rendering
  7. Lists + keys
  8. useState()
  9. useEffect()
  10. useRef()
  11. useMemo()
  12. useCallback()
  13. memo()
  14. Context API
  15. Custom hooks
  16. Controlled forms
  17. Lifting state up
  18. Prop drilling solutions
  19. Error boundaries
  20. Lazy loading
  21. Suspense
  22. Code splitting
  23. React Router
  24. State management
  25. Performance optimization

2.2 State Management Checklist

  1. Local state
  2. Lift state up
  3. Context API
  4. Reducers
  5. Global state
  6. State normalization
  7. Derived state
  8. Server state
  9. Optimistic updates
  10. Caching strategy

3. Performance & Optimization

3.1 Web Performance Checklist

  1. Lazy load images
  2. Use WebP / AVIF images
  3. Compress images before upload
  4. Responsive images (srcset)
  5. Minify CSS, JS, HTML
  6. Enable Gzip/Brotli compression
  7. Code splitting
  8. Route-based lazy loading
  9. Tree shaking (remove unused code)
  10. Remove unused CSS
  11. Reduce bundle size
  12. Use CDN
  13. Cache static assets
  14. Cache API responses
  15. Preload critical resources
  16. Prefetch future resources
  17. Preconnect third-party domains
  18. Avoid render-blocking resources
  19. Inline critical CSS
  20. Use async / defer scripts
  21. Debounce search/API calls
  22. Throttle scroll/resize events
  23. Virtualize large lists
  24. Pagination or infinite scrolling
  25. Avoid unnecessary re-renders
  26. Use memo() carefully
  27. Use useMemo() carefully
  28. Use useCallback() carefully
  29. Reduce DOM size
  30. Optimize animations (transform, opacity)
  31. Use CSS animations over JS when possible
  32. Avoid layout thrashing
  33. Reduce expensive calculations
  34. Web Workers for heavy tasks
  35. Optimize fonts
  36. Preload fonts
  37. Use font-display: swap
  38. Reduce third-party scripts
  39. Reduce API requests
  40. Use skeleton loaders
  41. Server-side rendering (SSR) when useful
  42. Static site generation (SSG) when useful
  43. Use Edge caching
  44. Measure Core Web Vitals
  45. Profile with Google Lighthouse
  46. Analyze using Chrome DevTools
  47. Measure before optimizing

3.2 Bundle & Asset Optimization Checklist

  1. Minify CSS, JS, HTML
  2. Tree shaking (remove unused code)
  3. Code splitting
  4. Route-based lazy loading
  5. Dynamic imports
  6. Reduce bundle size
  7. Remove unused dependencies
  8. Import only what you use
  9. Replace heavy libraries with lighter alternatives
  10. Analyze bundle size regularly
  11. Compress images before upload
  12. Use WebP / AVIF images
  13. Responsive images (srcset)
  14. Lazy load images
  15. Optimize SVGs
  16. Inline small SVG/icons
  17. Optimize videos before upload
  18. Stream videos instead of loading fully
  19. Optimize fonts
  20. Use font-display: swap
  21. Preload fonts
  22. Use variable fonts when possible
  23. Remove unused CSS
  24. Purge utility CSS in production
  25. Inline critical CSS
  26. Avoid render-blocking assets
  27. Use async/defer scripts
  28. Enable Gzip/Brotli compression
  29. Cache static assets
  30. Use CDN
  31. Preconnect third-party domains
  32. Prefetch future resources
  33. Preload critical resources
  34. Reduce third-party scripts
  35. Reduce API payload size
  36. Use Edge caching
  37. Measure with bundle analyzer
  38. Test with Lighthouse
  39. Profile using DevTools
  40. Measure before optimizing

Note: Sections 3.1 and 3.2 overlap heavily (images, fonts, CDN, caching, compression, "measure before optimizing"). Consider merging into a single "Performance & Optimization" series with two angles — runtime performance (3.1) and build/bundle performance (3.2) — to avoid duplicate videos.

4. Browser & Security Internals

4.1 Browser Internals Checklist

  1. Critical rendering path
  2. DOM tree
  3. CSSOM
  4. Render tree
  5. Reflow vs repaint
  6. Browser storage
  7. Cookies
  8. LocalStorage
  9. SessionStorage
  10. IndexedDB
  11. Event loop
  12. Microtask vs macrotask
  13. Garbage collection
  14. Web Workers
  15. Service Workers
  16. CORS
  17. Same-origin policy
  18. Browser caching
  19. Hydration

4.2 Frontend Security Checklist

  1. XSS
  2. CSRF
  3. CORS
  4. Content Security Policy
  5. JWT storage
  6. Cookie security flags
  7. HTTPS
  8. Input sanitization
  9. Rate limiting basics
  10. API key exposure mistakes
  11. Avoid dangerouslySetInnerHTML
  12. Dependency vulnerabilities

5. Networking & Backend-Adjacent

5.1 API & Networking Checklist

  1. REST basics
  2. HTTP methods
  3. Status codes
  4. Headers
  5. Query params
  6. Authentication
  7. Authorization
  8. JWT
  9. Refresh tokens
  10. GraphQL basics
  11. WebSockets
  12. Polling
  13. SSE
  14. Retry mechanism
  15. Request cancellation
  16. Optimistic updates
  17. API caching

6. Coding & Machine Coding Practice

6.1 JS Polyfills Checklist

  1. Polyfill map()
  2. Polyfill filter()
  3. Polyfill reduce()
  4. Polyfill forEach()
  5. Polyfill find()
  6. Polyfill some()
  7. Polyfill every()
  8. Polyfill flat()
  9. Polyfill flatMap()
  10. Polyfill bind()
  11. Polyfill call()
  12. Polyfill apply()
  13. Polyfill Object.create()
  14. Polyfill Promise.all()
  15. Polyfill Promise.allSettled()
  16. Polyfill Promise.race()
  17. Polyfill Promise.any()
  18. Polyfill debounce()
  19. Polyfill throttle()
  20. Polyfill once()
  21. Polyfill memoize()
  22. Polyfill curry()
  23. Polyfill pipe()
  24. Polyfill compose()
  25. Polyfill Array.from()

6.2 JS Coding Problems Checklist

  1. Array flattening
  2. Deep clone object
  3. Nested object flattening
  4. Debounce implementation
  5. Throttle implementation
  6. Currying function
  7. Memoization function
  8. Promise chaining implementation
  9. Promise pool (limit concurrency)
  10. Event emitter implementation
  11. LRU cache implementation
  12. Infinite currying (sum(1)(2)(3))
  13. Group array by property
  14. Remove duplicates from array
  15. Find missing number
  16. First non-repeating character
  17. Anagram checker
  18. Frequency counter pattern
  19. Two sum problem
  20. Merge intervals
  21. Rotate array
  22. Move zeros to end
  23. Deep object comparison
  24. Implement JSON.stringify() (basic)
  25. Retry failed API requests
  26. Nested comments tree build
  27. Virtual DOM (basic implementation)
  28. Custom setTimeout()
  29. Custom Promise implementation
  30. Async task scheduler

6.3 Frontend (React) Machine Coding Problems Checklist

  1. Todo app
  2. Accordion
  3. Modal / Popup
  4. Tabs component
  5. Dropdown / Select
  6. Multi-select dropdown
  7. Search autocomplete
  8. Debounced search
  9. Infinite scrolling
  10. Pagination component
  11. Image carousel
  12. Image slider with autoplay
  13. Star rating component
  14. Progress bar
  15. Toast notification system
  16. Snackbar system
  17. OTP input component
  18. Password strength checker
  19. Form validation system
  20. Dynamic form builder
  21. File upload component
  22. Drag & drop upload
  23. Kanban board
  24. Nested comments system
  25. Chat UI
  26. Live typing indicator
  27. Poll component
  28. Quiz application
  29. Stopwatch
  30. Countdown timer
  31. Digital clock
  32. Calculator
  33. Memory game
  34. Tic-Tac-Toe
  35. Snake game
  36. Expense tracker
  37. Weather dashboard
  38. E-commerce product listing
  39. Shopping cart
  40. Mini dashboard with charts
  41. Theme switcher (dark/light)
  42. Sidebar navigation
  43. Breadcrumb component
  44. Stepper component
  45. Data table with sorting/filtering
  46. Virtualized list
  47. Folder explorer
  48. File explorer
  49. Code editor (basic)
  50. URL shortener UI

6.4 High-Value Interview Picks

Pull these forward in your upload schedule — they convert best for interview-prep audiences:

  • Search autocomplete
  • Nested comments
  • Infinite scroll
  • File explorer
  • Kanban board
  • Data table
  • Toast system
  • Virtualized list
  • Debounced search
  • Shopping cart

Note: "File explorer" and "Folder explorer" in 6.3 are effectively the same build — merge into one video unless you want to differentiate (read-only viewer vs. full CRUD explorer).

7. System Design

7.1 Frontend System Design Checklist

  1. Requirement gathering
  2. Component architecture
  3. Folder structure
  4. State management
  5. API layer
  6. Authentication
  7. Pagination
  8. Caching
  9. Error handling
  10. Loading states
  11. Search optimization
  12. Performance optimization
  13. Code splitting
  14. SSR vs CSR
  15. SSG
  16. Accessibility
  17. Logging
  18. Analytics
  19. Monitoring
  20. Deployment

7.2 Frontend System Design Problems

Use 7.1 as the framework and apply it to each of these as a worked example:

  1. Design YouTube
  2. Design Netflix
  3. Design WhatsApp Web
  4. Design Google Docs
  5. Design Instagram feed
  6. Design URL shortener
  7. Design notification system
  8. Design chat app
  9. Design autocomplete system
  10. Design analytics dashboard

8. Interview Prep & Patterns

8.1 Frontend Interview Checklist

  1. HTML basics
  2. CSS box model
  3. Flexbox
  4. Grid
  5. Positioning
  6. Specificity
  7. Event bubbling
  8. Event capturing
  9. Closures
  10. Hoisting
  11. Event loop
  12. Promise chain
  13. Async/await
  14. Debounce vs throttle
  15. Shallow vs deep copy
  16. call/apply/bind
  17. Polyfills
  18. DOM manipulation
  19. Virtual DOM
  20. React lifecycle
  21. Hooks
  22. Memoization
  23. Browser rendering process
  24. CORS
  25. System design basics

Note: This list is essentially a "best of" rollup of sections 1.1, 1.4, 4.1, and 7.1 — good as a single capstone/recap video or a rapid-fire short series rather than 25 new long-form videos.

8.2 Design Patterns Checklist

  1. Singleton
  2. Factory
  3. Observer
  4. Pub/Sub
  5. Module pattern
  6. Adapter
  7. Strategy
  8. Builder
  9. Decorator
  10. Proxy

9. Tooling & Process

9.1 Git Checklist

  1. init
  2. clone
  3. add
  4. commit
  5. push
  6. pull
  7. fetch
  8. branch
  9. merge
  10. rebase
  11. stash
  12. cherry-pick
  13. reset
  14. revert
  15. squash commits
  16. resolve conflicts

9.2 Testing Checklist

  1. Unit testing
  2. Integration testing
  3. E2E testing
  4. Mocking
  5. Test coverage
  6. Snapshot testing
  7. Async testing
  8. API testing
  9. Component testing
  10. User event testing

10. AI Agents

10.1 AI Agent Checklist

  1. What is an AI agent?
  2. Agent vs workflow
  3. Agent architecture basics
  4. LLM fundamentals
  5. Prompt engineering basics
  6. System vs user prompts
  7. Context windows
  8. Memory concepts
  9. Short-term memory
  10. Long-term memory
  11. Retrieval-Augmented Generation (RAG)
  12. Embeddings basics
  13. Vector databases
  14. Chunking strategies
  15. Similarity search
  16. Tool calling basics
  17. Function calling
  18. Structured outputs
  19. Agent planning
  20. ReAct pattern
  21. Single-agent systems
  22. Multi-agent systems
  23. Agent orchestration
  24. State management for agents
  25. Conversation history handling
  26. Token optimization
  27. Streaming responses
  28. Guardrails and validation
  29. Hallucination handling
  30. Error handling and retries
  31. Agent evaluation
  32. Human-in-the-loop workflows
  33. Agent observability/logging
  34. Web search integration
  35. Browser automation
  36. File processing
  37. Memory storage (DB)
  38. Authentication for tools/APIs
  39. Rate limiting
  40. Caching responses
  41. Async task execution
  42. Background jobs
  43. Multi-step workflows
  44. AI agent security
  45. Cost optimization
  46. Deploying AI agents
  47. Monitoring production agents
  48. Testing AI agents
  49. Measure before optimizing
  50. Build a complete AI agent project

10.2 Machine Coding for AI Agents

  1. PDF chat app
  2. Resume analyzer
  3. AI coding assistant
  4. Research agent
  5. Email assistant
  6. Meeting summarizer
  7. Travel planner agent
  8. Customer support agent
  9. Multi-agent system
  10. Autonomous browser agent

10.3 Shorts Titles (AI Agents)

  • AI Agent in 50 Days
  • Stop Calling Everything an AI Agent
  • AI Agents Roadmap for Developers
  • Build Real AI Agents, Not Chatbots 🚀

11. What You Might Have Missed

Gaps spotted relative to what a complete "frontend + AI agent creator" series usually covers:

Build tools & dev environment

  • Webpack / Vite / esbuild / Rspack basics
  • ESLint + Prettier setup
  • Monorepos (Turborepo/Nx)
  • Module bundler internals (how bundlers actually work)
  • Environment variables & .env management

Next.js / meta-frameworks (you cover SSR/SSG concepts but no dedicated framework checklist)

  • Next.js App Router fundamentals
  • Server components vs client components
  • Middleware
  • API routes / route handlers
  • Image/font optimization in Next.js
  • Remix or Astro as an alternative-framework comparison video

Accessibility (a11y) as its own series (currently scattered as single line items)

  • Keyboard navigation
  • Screen reader testing
  • Focus management
  • Color contrast tools
  • WCAG levels (A/AA/AAA)

Mobile / cross-platform

  • Responsive vs adaptive design
  • PWA basics (manifest, service worker, installability)
  • React Native basics (if you ever go cross-platform)

Soft/career content (high search demand, easy to produce)

  • How to read a frontend job description
  • Portfolio project ideas
  • Resume tips for frontend devs
  • Mock interview / behavioral round prep
  • Open source contribution guide

Deployment & DevOps for frontend

  • Vercel/Netlify/Cloudflare Pages deployment
  • CI/CD basics (GitHub Actions)
  • Environment-based deployments (staging/prod)
  • Docker basics for frontend devs

Data viz (you have "mini dashboard with charts" but no dedicated checklist)

  • Chart libraries (Recharts/Chart.js/D3 overview)
  • When to use canvas vs SVG for charts

AI agent series gaps

  • Choosing an LLM provider / model comparison
  • Local LLM basics (Ollama, etc.)
  • Agent frameworks comparison (LangChain, LlamaIndex, CrewAI, AI SDK)
  • Voice agents / speech-to-text integration
  • Agent pricing/cost calculator project

Misc cross-cutting topics

  • Internationalization (i18n) / localization (l10n)
  • Dark mode implementation patterns (beyond "theme switcher")
  • Error monitoring tools (Sentry, etc.) — ties into Logging/Monitoring items already listed
  • Web Components in production (you have "basics" — a follow-up "real-world usage" video could work)

Tip: Sections 3.1/3.2, 7.1/8.1, and the explorer/folder-explorer items in 6.3 have meaningful overlap — consolidating those could save you 10–15 video slots across the whole roadmap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment