AI UX & UI Design Bootcamp
- Format
- Live or Self-paced
Choose how you learn
Compare formats, then explore the details for your choice.
Book directly on nobledesktop.com. Opens in a new tab.
Book live on Noble DesktopSummary
Learn how to use AI as a practical partner throughout the UX/UI design process. In this hands-on course, students explore how AI can support user research, synthesis, personas, journey maps, user flows, UX strategy, UI ideation, design critique, usability testing, accessibility review, UX writing, and project documentation.
Students practice using AI to organize research findings, identify themes, draft design artifacts, critique interface decisions, summarize usability findings, and turn observations into prioritized recommendations. The course emphasizes responsible AI use, clear prompting, human review, evidence-based decisions, and ethical UX standards.
Curriculum
What you'll learn
- Use AI tools to support UX research synthesis, theme identification, and insight generation
- Create AI-assisted personas, journey maps, user flows, and project documentation
- Apply prompt engineering techniques to UX strategy, UI ideation, design critique, and UX writing
- Use AI to review interface designs for clarity, consistency, accessibility, and usability concerns
- Summarize usability testing findings and turn observations into prioritized recommendations
- Apply responsible AI practices while maintaining human judgment, evidence-based decisions, and ethical UX standards
Course outline
-
Figma Bootcamp 12 hours
Start learning Figma for UI/UX design. Gain a solid understanding of its capabilities, from creating files, to designing on a grid, working with text/photos/colors, creating components, building prototypes, exporting assets, sharing files, creating animations, and more.
- Create UI (user interface) and UX (user experience) designs for websites, apps, and more
- Design finished layouts that are optimized for mobile, tablet, and desktop screens
- Design on grids, extract image assets, share designs with clients/developers, and more
- Build interactive prototypes
- Make animations using smart animate
- Use components (including variants) to make updating your designs easier
- Work with Team libraries to share style and design components
-
Figma Advanced 6 hours
Take your Figma skills to the next level with this advanced prototyping course. Learn to use variables, modes, and conditionals to add more realistic interactivity to your prototypes.
- Explore Figma’s advanced prototyping features
- Learn how to use variables and variable modes
- Use conditionals to add advanced interactivity to prototypes
- Create light and dark modes using variable collections
- Use primitive and semantic layers when building a design system
-
UX Design Foundations 12 hours
Discover the essence of UX Design. From UX vs. UI to usability testing and prototyping, delve into the intricacies of user experience design. Gain practical skills in research, wireframing, and more. Elevate your design game with this comprehensive course.
- What user experience design is
- How UX Designers work
- The overall UX design process
- UX research methods: user interviews, observations, heuristics, etc.
- UXD terminology and deliverables: personas, journey maps, scenarios, etc.
- Sketching and the iterative design process
- How to document and present your work
-
UX & UI Design Bootcamp 114 hours
Learn the applied UX and UI design process through hands-on projects. Practice user research, user flow mapping, wireframing, responsive interface design, prototyping, usability testing, iteration, and UX case study development.
- Conduct user research through interviews, surveys, competitive analysis, and usability testing to better understand user needs
- Create personas, journey maps, user flows, and information architecture to organize insights and guide design decisions
- Design wireframes, responsive layouts, and polished UI screens for web and mobile interfaces
- Apply usability principles, accessibility standards, and common UI patterns to create clear, user-friendly experiences
- Build interactive prototypes and refine designs based on feedback, usability findings, and project goals
- Document your research, design process, and final solutions in a portfolio-ready UX case study
-
AI for UX & UI Design 18 hours
Build an AI-assisted UX workflow for research, product design, prototyping, and testing.
- Build a reusable AI workspace that supports your UX process from research through prototyping and testing
- Use AI to organize research, identify patterns, and develop evidence-based product opportunities
- Turn research findings into problem statements, user journeys, user stories, and feature priorities
- Define when AI should act, assist, recommend, request approval, or leave control with the user
- Design inclusive AI-powered experiences that account for accessibility, uncertainty, errors, correction, and recovery
- Turn structured Figma designs into interactive prototypes using AI-assisted development tools
- Test AI-powered experiences using realistic situations, including incomplete information and incorrect or uncertain outputs
- Evaluate and refine AI-generated work for design quality, accessibility, consistency, trust, and user control
- Create a repeatable Agentic AI workflow that can be applied to future UX projects
-
AI Coding Bootcamp with Claude Code 60 hours
Take command of the full process of planning, building, and deploying real web applications with Claude Code in this beginner-friendly bootcamp packed with expert instruction, interactive practice, seven labs, and a capstone project.
- Use Claude Code confidently for real development tasks and multi-step coding workflows
- Prompt and steer AI effectively using context setting, Plan Mode, review, and recovery techniques
- Work with Git and GitHub for version control, branching, pull requests, and code review
- Understand modern web development fundamentals, including HTML, CSS, JavaScript, APIs, frontend, and backend concepts
- Build full-stack applications with Next.js, databases, authentication, and external APIs
- Debug, test, secure, and deploy production-ready applications to the live web
-
AI UX Design Portfolio Development 60 hours
Students choose three UX/UI project options and build live applications that can be added to their professional portfolio.
- Plan and scope portfolio-ready UX/UI applications based on your goals and project interests
- Build live apps such as portfolio websites, case study builders, research repositories, and UX dashboards
- Create UX tools for journey mapping, service blueprinting, usability testing, accessibility audits, and design handoff
- Use AI app development tools to build responsive interfaces, database-backed features, and working product flows
- Integrate features such as authentication, contact forms, file uploads, AI-generated insights, reports, and custom domains
- Deploy and document three finished projects that demonstrate UX strategy, UI design, AI workflows, and technical execution
What's included
- Free course retake within one year to refresh the material and gain practice.
- 10 one-on-one mentoring sessions
Stated by the provider. Confirm what your tuition covers before enrolling.
Live classes
Choose dates and book your instructor-led class on nobledesktop.com.
-
–
In-person or live online
Mon, Tue, Wed, Thu, Fri
10:00–17:00 · America/New_York (EDT/EST)
-
–
In-person or live online
Mon, Tue, Wed, Thu, Fri
10:00–17:00 · America/New_York (EST/EDT)
-
–
In-person or live online
Mon, Tue, Wed, Thu, Fri
10:00–17:00 · America/New_York (EDT)
-
–
In-person or live online
Mon, Tue, Wed, Thu, Fri
10:00–17:00 · America/New_York (EDT)
-
–
In-person or live online
Mon, Tue, Wed, Thu, Fri
10:00–17:00 · America/New_York (EDT)
-
–
In-person or live online
Mon, Tue, Wed, Thu, Fri
10:00–17:00 · America/New_York (EDT/EST)
Confirm current dates and availability on Noble Desktop before booking.
Self-paced course
Learn through recorded lessons on your own schedule.
- Tuition
- $4,995
- Course length
- 312 hours
- Schedule
- On your schedule
Learn how to use AI as a practical partner throughout the UX/UI design process at your own pace. In this self-paced course, students explore how AI can support user research, synthesis, personas, journey maps, user flows, UX strategy, UI ideation, design critique, usability testing, accessibility review, UX writing, and project documentation.
Students practice using AI to organize research findings, identify themes, draft design artifacts, critique interface decisions, summarize usability findings, and turn observations into prioritized recommendations. The course emphasizes responsible AI use, clear prompting, human review, evidence-based decisions, and ethical UX standards.
Self-paced curriculum
What you'll learn self-paced
- Use AI tools to support UX research synthesis, theme identification, and insight generation
- Create AI-assisted personas, journey maps, user flows, and project documentation
- Apply prompt engineering techniques to UX strategy, UI ideation, design critique, and UX writing
- Use AI to review interface designs for clarity, consistency, accessibility, and usability concerns
- Summarize usability testing findings and turn observations into prioritized recommendations
- Apply responsible AI practices while maintaining human judgment, evidence-based decisions, and ethical UX standards
Self-paced course outline
-
Figma Bootcamp (Self-Paced) 12 hours
Start learning Figma for UI/UX design. Gain a solid understanding of its capabilities, from creating files, to designing on a grid, working with text/photos/colors, creating components, building prototypes, exporting assets, sharing files, creating animations, and more.
- Create UI (user interface) and UX (user experience) designs for websites, apps, and more
- Design finished layouts that are optimized for mobile, tablet, and desktop screens
- Design on grids, extract image assets, share designs with clients/developers, and more
- Build interactive prototypes
- Make animations using smart animate
- Use components (including variants) to make updating your designs easier
- Work with Team libraries to share style and design components
-
Figma Advanced (Self-Paced) 6 hours
Take your Figma skills to the next level with this advanced prototyping course. Learn to use variables, modes, and conditionals to add more realistic interactivity to your prototypes.
- Explore Figma’s advanced prototyping features
- Learn how to use variables and variable modes
- Use conditionals to add advanced interactivity to prototypes
- Create light and dark modes using variable collections
- Use primitive and semantic layers when building a design system
-
UX Design Foundations (Self-Paced) 12 hours
Get to the heart of what UX design is all about. From UX versus UI through usability testing and prototyping, dig into the finer points of user experience design. Build practical skills in research, wireframing, and more. Take your design game to the next level with this comprehensive course.
- What user experience design actually is
- How UX Designers work
- The overall UX design process
- UX research methods, including user interviews, observations, heuristics, and more
- UXD terminology and deliverables, such as personas, journey maps, scenarios, and more
- Sketching and the iterative design process
- How to document and present your work
-
UX & UI Design Bootcamp (Self-Paced) 114 hours
- Conduct user research through interviews, surveys, competitive analysis, and usability testing to better understand user needs
- Create personas, journey maps, user flows, and information architecture to organize insights and guide design decisions
- Design wireframes, responsive layouts, and polished UI screens for web and mobile interfaces
- Apply usability principles, accessibility standards, and common UI patterns to create clear, user-friendly experiences
- Build interactive prototypes and refine designs based on feedback, usability findings, and project goals
- Document your research, design process, and final solutions in a portfolio-ready UX case study
-
AI for UX & UI Design (Self-Paced) 18 hours
Develop a repeatable AI-assisted UX workflow at your own pace, from research through prototyping and evaluation.
- Stand up a reusable AI workspace that supports your UX process from research through prototyping and testing
- Use AI to organize research, surface patterns, and build evidence-based product opportunities
- Convert research findings into problem statements, user journeys, user stories, and feature priorities
- Decide when AI should act, assist, recommend, request approval, or leave control with the user
- Design inclusive AI-powered experiences that plan for accessibility, uncertainty, errors, correction, and recovery
- Convert structured Figma designs into interactive prototypes with AI-assisted development tools
- Test AI-powered experiences against realistic situations, including incomplete information and incorrect or uncertain output
- Assess and refine AI-generated work for design quality, accessibility, consistency, trust, and user control
- Establish a repeatable Agentic AI workflow you can reuse on future UX projects
-
AI Coding Bootcamp with Claude Code (Self-Paced) 60 hours
Learn Claude Code at your own pace while building full-stack web apps from scratch.
- Use Claude Code as a practical coding assistant for planning, editing, debugging, and shipping apps
- Build confidence with Git, GitHub, and collaborative development workflows
- Understand the structure of modern web apps across frontend, backend, APIs, and deployment
- Create full-stack projects with Next.js, Supabase, authentication, and third-party APIs
- Improve app quality with responsive design, accessibility, testing, and security practices
- Deploy a finished application with environment variables, a custom domain, and launch-ready polish
-
AI UX Design Portfolio Development (Self-Paced) 294 hours
Create three deployed UX/UI applications at your own pace while building projects that combine user research, design systems, usability testing, accessibility, AI workflows, and live app development.
- Plan and scope portfolio-ready UX/UI applications based on your goals and project interests
- Choose three projects from a selection of UX/UI-focused app options
- Build live apps such as portfolio websites, case study builders, research repositories, and UX dashboards
- Create UX tools for journey mapping, service blueprinting, usability testing, accessibility audits, and design handoff
- Use AI app development tools to build responsive interfaces, database-backed features, and working product flows
- Deploy and document three finished projects that demonstrate UX strategy, UI design, AI workflows, and technical execution
What's included with self-paced
- 10 one-on-one mentoring sessions
- Self-paced video lessons
Self-paced lessons
Watch free previews and explore the lessons included with enrollment at Noble Desktop.
Figma Bootcamp (Self-Paced)
-
Overview & Setup
Lesson 1: Figma Fundamentals
1:10
Discover what this Figma design course covers and how to get the most out of the training videos and exercises.
This preview is temporarily unavailable. Please try again later.
-
Getting Started with Figma
Lesson 1: Figma Fundamentals
10:00
Learn how to create a Figma account and navigate the interface using either the browser or desktop app.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Designing on Grids & Layout Fundamentals
Lesson 1: Figma Fundamentals
29:43
Master grid-based design principles to keep content equally sized and consistently spaced across pages.
View enrollment options at Noble Desktop -
Enrollment required
Working with Photos & Pixel Based Graphics
Lesson 1: Figma Fundamentals
27:16
Import photos and pixel-based images into your Figma designs using prepared layout files.
View enrollment options at Noble Desktop -
Enrollment required
Vector Graphics, Colors & Effects
Lesson 1: Figma Fundamentals
30:11
Bring in vector graphics and apply colors, color styles, and effects like drop shadows to enhance your layouts.
View enrollment options at Noble Desktop -
Introduction to Components & Auto Layout
Lesson 2: Components & Prototyping
10:00
Explore Figma's component system and get an introductory look at auto layout for reusable design elements.
This preview is temporarily unavailable. Please try again later.
-
Prototyping Interactive Designs
Lesson 2: Components & Prototyping
10:00
Turn static designs into clickable, interactive prototypes that simulate real user experiences.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Sharing, Exporting & Collaboration
Lesson 2: Components & Prototyping
29:42
Share finished designs with teammates, stakeholders, and developers using Figma's collaboration features.
View enrollment options at Noble Desktop -
Understanding Auto Layout
Lesson 3: Deep Dives
10:00
Dive deeper into auto layout to understand how automatic sizing and spacing work in Figma.
This preview is temporarily unavailable. Please try again later.
-
Advanced Auto Layout Techniques
Lesson 3: Deep Dives
10:00
Master nested auto layout frames with different directions, padding, and spacing settings for complex layouts.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Prototype Scrolling & Hyperlinks
Lesson 3: Deep Dives
18:54
Configure vertical and horizontal scrolling within prototypes for long pages and scrollable sections.
View enrollment options at Noble Desktop -
Enrollment required
Typography Styles & Sketch File Import
Lesson 3: Deep Dives
13:58
Create and manage reusable type styles to maintain consistent typography across your designs.
View enrollment options at Noble Desktop -
Component Properties & Design Systems
Lesson 4: Advanced Features
10:00
Leverage component properties to build flexible, reusable elements that scale into a design system.
This preview is temporarily unavailable. Please try again later.
-
Hover States, Overlays & Smart Animate
Lesson 4: Advanced Features
10:00
Design hover effects and overlay interactions for desktop interfaces using Figma's prototyping tools.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Team Libraries & Shared Design Systems
Lesson 4: Advanced Features
20:23
Set up team libraries to share styles and components across multiple files and users in your organization.
View enrollment options at Noble Desktop -
Enrollment required
Wrap Up & Next Steps
Lesson 4: Advanced Features
0:12
Review key takeaways from the Figma course and get encouragement to continue practicing.
View enrollment options at Noble Desktop
AI Coding Bootcamp with Claude Code (Self-Paced)
-
Course Introduction
Lesson 1: Getting Started with Claude Code
5:45
Discover what to expect throughout this hands-on bootcamp, including the types of projects you'll build and how Claude Code empowers coders of all skill levels to create polished, production-ready applications.
This preview is temporarily unavailable. Please try again later.
-
What is Claude Code?
Lesson 1: Getting Started with Claude Code
5:55
Learn how Claude Code works as an AI coding agent, including understanding its LLM foundation, what tasks it can handle autonomously, and how to think of yourself as the manager guiding it rather than the coder doing the work.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Installing Claude Desktop
Lesson 1: Getting Started with Claude Code
7:19
Walk through downloading and installing the Claude Desktop application, setting up your account, and navigating the platform's key areas, including where to find Claude Code and how to connect it to a project folder.
View enrollment options at Noble Desktop -
Enrollment required
Installing Claude in VS Code
Lesson 1: Getting Started with Claude Code
3:01
Set up the Claude Code extension directly inside VS Code, giving you a fully integrated AI coding assistant within the same professional development environment used by experienced developers.
View enrollment options at Noble Desktop -
Git and GitHub Explained
Lesson 2: Setting Up Your Workflow
10:00
Understand how Git and GitHub work together as a version control system, including creating checkpoints, pushing code to the cloud, and cloning repositories, all with Claude handling the technical commands on your behalf.
This preview is temporarily unavailable. Please try again later.
-
Setting Up Your Claude.md File
Lesson 2: Setting Up Your Workflow
10:00
Configure a Claude.md file to give Claude a persistent set of rules and preferences that carry over between sessions, covering coding style, documentation habits, and how to test that your instructions are actually working.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Understanding Permission Modes
Lesson 2: Setting Up Your Workflow
18:26
Explore Claude's three permission modes, Ask, Auto Accept, and Plan, and learn when to use each one so you stay in control of your project while giving Claude the right level of autonomy for the task at hand.
View enrollment options at Noble Desktop -
Enrollment required
Guided Lab: Build Your First Project
Lesson 2: Setting Up Your Workflow
16:15
Apply everything you've learned by forking a course repository, using Claude to explore and customize a working quiz website, and committing your finished project to GitHub, with an optional challenge to publish it live using GitHub Pages.
View enrollment options at Noble Desktop -
Introduction to Prompt Engineering
Lesson 3: Prompting Claude Code Effectively
6:47
Master the core principles of prompt engineering, including how to communicate goals, define behaviors and constraints, and steer Claude back on track when it makes assumptions you did not intend.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Explore, Plan, Execute, Review
Lesson 3: Prompting Claude Code Effectively
7:02
Follow a four-step workflow for setting Claude up for success on any task, walking through how to explore a codebase, outline a plan, give Claude the green light to build, and review the output before moving on.
View enrollment options at Noble Desktop -
Enrollment required
Managing Context and Session Length
Lesson 3: Prompting Claude Code Effectively
4:32
Recognize the signs that a Claude session has gone on too long, including contradictions, ignored constraints, and hallucinations, and learn how to start fresh sessions while preserving the rules and context Claude needs to keep working effectively.
View enrollment options at Noble Desktop -
Enrollment required
Scaffolding Your First Project
Lesson 4: Scaffolding a New Project
15:20
Build a fully functional command line to-do list application in Python by scaffolding the project structure with Claude, defining core features upfront, testing the output, and progressively adding enhancements like color-coded terminal output.
View enrollment options at Noble Desktop -
How the Internet Works
Lesson 5: Web Development Fundamentals
10:00
Discover what actually happens when you type a URL into a browser, from DNS lookups and request response cycles to HTTP status codes, so you can understand and troubleshoot the web infrastructure Claude builds on.
This preview is temporarily unavailable. Please try again later.
-
HTML and CSS Basics
Lesson 5: Web Development Fundamentals
10:00
Get a practical introduction to HTML structure and CSS styling by exploring real code in the browser dev tools, so you can read and understand the code Claude generates without needing to memorize syntax.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Introduction to JavaScript
Lesson 5: Web Development Fundamentals
9:16
Learn what JavaScript is, how it makes web pages interactive through variables, functions, and event listeners, and how to direct Claude to add JavaScript behavior to your projects without writing it yourself.
View enrollment options at Noble Desktop -
Enrollment required
Frontend, Backend, and APIs
Lesson 5: Web Development Fundamentals
8:12
Understand the difference between frontend and backend development, how servers and databases work together behind the scenes, and what APIs are so you can confidently direct Claude when building more complex applications.
View enrollment options at Noble Desktop -
Enrollment required
Development vs Production Environments
Lesson 5: Web Development Fundamentals
6:11
Learn the difference between development, testing, and production environments, including how error handling, API keys, and environment variables should be managed at each stage so your projects are secure and stable when they go live.
View enrollment options at Noble Desktop -
How to Debug with Claude
Lesson 6: Debugging and Testing Your Code
10:00
Develop a detective approach to debugging by learning how to gather clues from the browser console, network tab, and URL bar, then communicate symptoms clearly to Claude so it can diagnose and fix the root cause.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Setting Up Automated Tests
Lesson 6: Debugging and Testing Your Code
7:11
Use Claude to build automated unit and integration tests for your projects, catching bugs before users do and creating living documentation that shows exactly how your program is supposed to work.
View enrollment options at Noble Desktop -
Libraries, Packages, and NPM
Lesson 7: Modern App Architecture and Next.js
6:53
Understand what libraries and packages are, why developers use them, and how NPM works as the tool that installs and manages them, so you know what Claude is doing when it references or installs external code on your behalf.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Choosing the Right App Architecture
Lesson 7: Modern App Architecture and Next.js
14:02
Compare the three most common application architectures, static sites, server side rendering, and single page applications, and learn the strengths and limitations of each so you can make informed decisions when Claude asks how you want to build.
View enrollment options at Noble Desktop -
Enrollment required
Anatomy of a Next.js Application
Lesson 7: Modern App Architecture and Next.js
15:19
Take a guided tour of a Next.js project built with Claude, exploring how routing, layouts, components, the public folder, and the package.json file all work together so you can confidently navigate your codebase and direct Claude as you build.
View enrollment options at Noble Desktop -
Enrollment required
Landing Page Lab Walkthrough
Lesson 8: Building a Business Landing Page
10:41
Build a business landing page by choosing an architecture, crafting a detailed and well-constrained prompt, and using plan mode to guide Claude toward a polished result, then continue iterating to add new features and improvements.
View enrollment options at Noble Desktop -
Skills and Slash Commands
Lesson 9: Advanced Claude Code Features
10:00
Create reusable skills and trigger them instantly with slash commands, so you can automate repeated tasks like building and running tests without rewriting complex prompts every time.
This preview is temporarily unavailable. Please try again later.
-
Running Parallel Sessions
Lesson 9: Advanced Claude Code Features
8:06
Speed up development by running multiple Claude sessions at the same time, learning how to assign separate tasks to each session while avoiding conflicts when both sessions might touch the same files.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Hooks and Sub Agents
Lesson 9: Advanced Claude Code Features
8:49
Automate follow up tasks in Claude using hooks that trigger automatically after certain actions, and use sub agents to handle closely related tasks in the background without creating a fully separate session.
View enrollment options at Noble Desktop -
Enrollment required
Extending Claude with MCP Servers
Lesson 9: Advanced Claude Code Features
7:43
Install and use MCP servers to give Claude new capabilities beyond reading code files, including taking browser screenshots to visually evaluate pages and connecting to external tools like Figma and databases.
View enrollment options at Noble Desktop -
Branching and Feature Development
Lesson 10: Advanced Git and GitHub Workflows
10:00
Learn how to create feature branches to develop new functionality in isolation, understand how branches protect your main codebase, and use Claude to build and commit changes on a separate branch before merging them back in.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Pull Requests, Merges, and Reverts
Lesson 10: Advanced Git and GitHub Workflows
9:29
Walk through the full GitHub pull request process, from pushing a feature branch and reviewing diffs to merging into main, deleting the completed branch, and using reverts to safely roll back changes when needed.
View enrollment options at Noble Desktop -
Why Use a Database?
Lesson 11: Databases and User Authentication
9:48
Understand what databases are, how SQL and NoSQL differ, and why Supabase with Postgres is the recommended choice for this course, so you can make informed decisions when Claude asks how you want to store your data.
This preview is temporarily unavailable. Please try again later.
-
Database Schemas, Tables, and Relationships
Lesson 11: Databases and User Authentication
10:00
Design a visual database schema using DB Diagram and Claude, learning how tables relate to each other through foreign keys and how to choose the right data types for each field before writing a single line of database code.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Connecting Your Schema to Supabase
Lesson 11: Databases and User Authentication
25:04
Set up a Supabase project, connect it to a Next.js app using environment variables, and run database migrations to turn your schema blueprint into real working tables, then validate everything is live by inserting sample data.
View enrollment options at Noble Desktop -
Enrollment required
Adding User Authentication
Lesson 11: Databases and User Authentication
16:50
Implement user authentication in a Next.js app using Supabase, including encrypted password storage, session and cookie management, and building signup and login pages so users can securely register and stay logged in.
View enrollment options at Noble Desktop -
Enrollment required
Notes App Project Kickoff
Lesson 12: Building a Notes App
17:40
Scaffold a full stack notes application from scratch by setting up a Next.js project, connecting it to a Supabase database, generating a Claude.md file, and using plan mode to map out the full app architecture before writing a single line of feature code.
View enrollment options at Noble Desktop -
Adding OAuth with GitHub
Lesson 13: OAuth, External APIs, and Caching
10:00
Set up GitHub OAuth through Supabase so users can sign into your app with their GitHub account, and learn the principle of least privilege so you give third-party providers only the permissions they actually need.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Working with External APIs
Lesson 13: OAuth, External APIs, and Caching
21:32
Integrate a free weather API into the notes app by obtaining an API key, storing it securely in an environment file, and prompting Claude to display live weather data, including how to debug when the widget does not appear as expected.
View enrollment options at Noble Desktop -
Enrollment required
Caching API Data with Supabase
Lesson 13: OAuth, External APIs, and Caching
11:18
Implement a caching layer for external API data using a Supabase table so your app stores short-term results locally, reducing network requests, protecting against rate limits, and keeping the app functional even when the external API is unavailable.
View enrollment options at Noble Desktop -
UX and UI Fundamentals
Lesson 14: Design, Accessibility, and UX
8:54
Apply the four core design principles of hierarchy, white space, consistency, and contrast to guide Claude toward building interfaces that are clear, readable, and visually effective, and learn where to find design inspiration to share directly with Claude.
This preview is temporarily unavailable. Please try again later.
-
Components and Design Systems
Lesson 14: Design, Accessibility, and UX
5:40
Speed up development and improve visual consistency by using a component library like Shadcn UI, which gives you pre-built tested components that Claude can install and customize directly inside your Next.js project.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Responsive Design
Lesson 14: Design, Accessibility, and UX
8:47
Ensure your app looks great on every screen size by understanding breakpoints and the mobile first approach, and learn how to use the browser's built in developer tools to test your layout across different devices and screen sizes.
View enrollment options at Noble Desktop -
Enrollment required
Building for Accessibility
Lesson 14: Design, Accessibility, and UX
15:26
Build websites that work for all users including those with visual impairments or limited motor ability, by using semantic HTML, keyboard navigation, proper contrast ratios, and ARIA labels to meet accessibility standards with Claude's help.
View enrollment options at Noble Desktop -
Enrollment required
Component States and Dev Tools
Lesson 14: Design, Accessibility, and UX
8:50
Design a better user experience by building out all six component states including loading, empty, error, success, disabled, and default, and learn how to use toasts, skeletons, and spinners to give users clear feedback at every stage.
View enrollment options at Noble Desktop -
Six Attacks Every Developer Should Know
Lesson 15: Web Security Fundamentals
10:00
Get a practical overview of the six most common security threats your application will face, including cross-site scripting, SQL injection, CSRF, brute force attacks, insecure data handling, and vulnerable dependencies, so you know what to watch for and how to direct Claude to protect against them.
This preview is temporarily unavailable. Please try again later.
-
Input Validation
Lesson 15: Web Security Fundamentals
10:00
Protect your application from bad and malicious data by validating user input on both the client and server side, using allow lists, deny lists, and regular expressions to ensure only clean and expected data ever reaches your database.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Rate Limiting
Lesson 15: Web Security Fundamentals
11:22
Defend your application against brute force attacks, credential stuffing, denial of service attacks, and runaway API costs by implementing rate limiting on login, signup, password reset, and any endpoints that call external services.
View enrollment options at Noble Desktop -
Enrollment required
Data Privacy and Legal Compliance
Lesson 15: Web Security Fundamentals
7:57
Understand your legal obligations under GDPR and the California Consumer Privacy Act and learn the practical steps needed to stay compliant, including writing a privacy policy, collecting only necessary data, encrypting your database, and giving users the ability to delete their information.
View enrollment options at Noble Desktop -
How to Deploy Your App with Vercel
Lesson 16: Deployment, SEO, and Performance
10:00
Deploy your finished Next.js project to the internet by connecting your GitHub repository to Vercel, configuring your environment variables, and running your first production build, then test the live app to make sure everything works as expected.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
SEO and Performance Optimization
Lesson 16: Deployment, SEO, and Performance
15:25
Improve your deployed site's search engine ranking and load speed by adding metadata and semantic HTML, using Google Chrome's Lighthouse tool to identify issues, and applying targeted fixes like image sizing, skeleton loaders, and caching with Claude's help.
View enrollment options at Noble Desktop