FREE TUTORIALS · Learn from zero to expertBusiness DirectoryPut Your Business Ad Here — Free
Independent course disclaimer · expand / collapse

These are independently developed tutorials. Technology names belong to their respective owners; no endorsement is implied. Examples are educational, not guarantees. Verify commands, costs, security, browser support, and framework versions before production use. Google Translate requires internet and can make mistakes. Terms · Privacy · Legal.

Fundamentals → Mastery guide · Six levels, practical projects, topic checklist, worked code and results.
EasyTutorGuide · Free practical course · Six levels

UI/UX Design — from absolute beginner to advanced professional practice

Start without knowing any terminology. Work through the chapters in order, read the small explanations, edit the code, check the visible output, and answer twenty practice questions in every chapter.

145 chapters6 levels20 answered questions per chapterMobile + RTL/LTRYouTube narration flow

Start Chapter 1

Level 1 · Absolute Beginner

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 1: What UI and UX Mean
  2. Chapter 2: Difference Between UI and UX
  3. Chapter 3: Identify User Needs
  4. Chapter 4: Define a Real Problem
  5. Chapter 5: Stakeholders and Constraints
  6. Chapter 6: User Centered Design Process
  7. Chapter 7: Understand User Goals
  8. Chapter 8: Identify User Tasks
  9. Chapter 9: Business Goals versus User Goals
  10. Chapter 10: Basic Research Ethics
  11. Chapter 11: Research Consent
  12. Chapter 12: Interview Question Writing
  13. Chapter 13: Observe User Behavior
  14. Chapter 14: Create a Task Flow
  15. Chapter 15: Sketch on Paper
  16. Chapter 16: Information Architecture Basics
  17. Chapter 17: Wireframe First Screen
  18. Chapter 18: Understand Visual Hierarchy
  19. Chapter 19: Typography for Interfaces
  20. Chapter 20: Color Contrast Basics
  21. Chapter 21: Spacing and Alignment
  22. Chapter 22: Buttons and Clear Actions
  23. Chapter 23: Feedback and Status Messages
  24. Chapter 24: Project: Improve a Contact Form

Level 2 · Foundation

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 25: Research Interview Planning
  2. Chapter 26: Avoid Leading Questions
  3. Chapter 27: Conduct a User Interview
  4. Chapter 28: Summarize Interview Findings
  5. Chapter 29: Analyze Qualitative Notes
  6. Chapter 30: Define User Scenarios
  7. Chapter 31: Create Personas Responsibly
  8. Chapter 32: Job Stories and Jobs To Be Done
  9. Chapter 33: Journey Mapping
  10. Chapter 34: Affinity Mapping
  11. Chapter 35: Task Analysis
  12. Chapter 36: Card Sorting Methods
  13. Chapter 37: Tree Testing Concepts
  14. Chapter 38: Navigation Label Testing
  15. Chapter 39: Build a Site Map
  16. Chapter 40: Low Fidelity Wireframes
  17. Chapter 41: Form Design Fundamentals
  18. Chapter 42: Field Labels and Help Text
  19. Chapter 43: Design Error Messages
  20. Chapter 44: Design Empty States
  21. Chapter 45: Design Loading States
  22. Chapter 46: Responsive Breakpoint Planning
  23. Chapter 47: Mobile First Interface Design
  24. Chapter 48: Project: Course Directory UX

Level 3 · Intermediate

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 49: Visual Design Principles
  2. Chapter 50: Gestalt Principles
  3. Chapter 51: Layout and Grids
  4. Chapter 52: Type Scale Construction
  5. Chapter 53: Color Systems and Tokens
  6. Chapter 54: Component States
  7. Chapter 55: Create a Design System
  8. Chapter 56: Buttons and Form Controls
  9. Chapter 57: Accessible Navigation
  10. Chapter 58: Keyboard Focus Indicators
  11. Chapter 59: Screen Reader Semantics
  12. Chapter 60: WCAG 2.2 Overview
  13. Chapter 61: Focus Order Planning
  14. Chapter 62: Touch Target Design
  15. Chapter 63: Accessible Dialogs
  16. Chapter 64: Inclusive Error Recovery
  17. Chapter 65: Responsive Table Design
  18. Chapter 66: Responsive Content Priority
  19. Chapter 67: Design for RTL Languages
  20. Chapter 68: Localization UX
  21. Chapter 69: Progressive Disclosure
  22. Chapter 70: Microcopy and Clarity
  23. Chapter 71: Information Density
  24. Chapter 72: Project: Accessible Booking Form

Level 4 · Advanced

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 73: Interactive Prototyping
  2. Chapter 74: Clickable User Flows
  3. Chapter 75: Prototype Fidelity Choices
  4. Chapter 76: Prototype Branching
  5. Chapter 77: Animation with Purpose
  6. Chapter 78: Reduced Motion Options
  7. Chapter 79: Usability Test Planning
  8. Chapter 80: Set Success Criteria
  9. Chapter 81: Task Completion Metrics
  10. Chapter 82: Time on Task Analysis
  11. Chapter 83: Error Rate Measurement
  12. Chapter 84: Usability Severity Ratings
  13. Chapter 85: Moderated Test Sessions
  14. Chapter 86: Unmoderated Test Sessions
  15. Chapter 87: Remote Test Ethics
  16. Chapter 88: Synthesize Test Findings
  17. Chapter 89: A B Testing Concepts
  18. Chapter 90: Experiment Hypotheses
  19. Chapter 91: Analytics Event Planning
  20. Chapter 92: Funnel Analysis
  21. Chapter 93: Understand Drop Off
  22. Chapter 94: Prioritize UX Fixes
  23. Chapter 95: Document Design Rationale
  24. Chapter 96: Project: Checkout Redesign

Level 5 · Expert

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 97: Service Design Basics
  2. Chapter 98: Omnichannel User Journeys
  3. Chapter 99: Advanced Information Architecture
  4. Chapter 100: Content Design for Interfaces
  5. Chapter 101: Microcopy for Complex Actions
  6. Chapter 102: Multi Step Form Strategy
  7. Chapter 103: Error Prevention Patterns
  8. Chapter 104: Decision Architecture
  9. Chapter 105: Search and Discovery UX
  10. Chapter 106: Sorting and Filtering UX
  11. Chapter 107: Onboarding User Experience
  12. Chapter 108: Account Recovery UX
  13. Chapter 109: Trust and Privacy UX
  14. Chapter 110: Permission Request Timing
  15. Chapter 111: Dark Patterns to Avoid
  16. Chapter 112: Cognitive Load Management
  17. Chapter 113: Internationalized Products
  18. Chapter 114: Accessible Charts and Data
  19. Chapter 115: Responsive Dashboard UX
  20. Chapter 116: Ethical Personalization
  21. Chapter 117: Research Repository Organization
  22. Chapter 118: Collaborative Design Reviews
  23. Chapter 119: Product Metrics and UX Outcomes
  24. Chapter 120: Project: Learning Product Audit

Level 6 · Mastery

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 121: Lead an End to End UX Project
  2. Chapter 122: Define Research Questions
  3. Chapter 123: Recruit Participants Fairly
  4. Chapter 124: Facilitate Discovery Workshops
  5. Chapter 125: Synthesize Evidence
  6. Chapter 126: Translate Research to Requirements
  7. Chapter 127: Create a Prioritized Backlog
  8. Chapter 128: Sketch Multiple Solutions
  9. Chapter 129: Build a High Fidelity Prototype
  10. Chapter 130: Design Complex Navigation Systems
  11. Chapter 131: Test Accessibility with Users
  12. Chapter 132: Evaluate Mobile Usability
  13. Chapter 133: Evaluate Desktop Usability
  14. Chapter 134: Design for Low Connectivity
  15. Chapter 135: Design for Diverse Abilities
  16. Chapter 136: Evaluate LCP and INP Experience
  17. Chapter 137: Design Quality Assurance
  18. Chapter 138: Cross Functional Handoff
  19. Chapter 139: Present Evidence to Stakeholders
  20. Chapter 140: Iterate After Launch
  21. Chapter 141: Establish Continuous Research
  22. Chapter 142: Capstone: Education Platform UX
  23. Chapter 143: Capstone: Appointment Platform UX
  24. Chapter 144: Portfolio Case Study
  25. Chapter 145: Mastery: Product Experience Review

How to learn like a complete beginner

You do not need to learn every word in one reading. Read the lesson, type the example, look at its real output, change one part, and explain what changed. Return when you have forgotten something. For frameworks requiring an installer or compiler, the source must be tested in a real project—not only in the browser-only illustration.

Suggest an improvement or share a learning idea on the blog.

Disclaimer, trademarks and learning guidance

Independent educational material. External names are used solely to identify subjects. These tutorials are not official training or certification. Output may vary by browser and software version. If a framework requires a build tool, the standalone browser demonstration is an illustration, not execution of the framework source. Always test your own code before publication. Legal notice.