Course Curriculum

6 Sections
00

Designers Are Fully Capable of Using a Developer’s Tools

2 Lessons 3 min
  • An Engineer's Tools in a Designer's Hands 2 min
  • My Recommended Free Software to Download 1 min

Resources Provided

  • 0.0_CheatSheet_Coding-Tools-for-Designers (PDF)
01

The Context That Most Developer Educators Skip

3 Lessons 33 min
  • Making Sense of “The Terminal” 4 min
  • Command Line Interfaces (CLIs) and Why Coders Use Them 5 min
  • Running Commands and Reading the Results 6 min

Practice Activities

  • Using the Terminal (Instructions) 16 min
  • Using the Terminal (Walkthrough) 2 min
02

Getting Comfortable in an Integrated Development Environment (IDE)

3 Lessons 33 min
  • Making Sense of IDEs 4 min
  • The UX of Many Small UIs 4 min
  • It's All Text Files 4 min

Practice Activities

  • Navigate the Sample Project in an IDE (Instructions) 17 min
  • Navigate the Sample Project in an IDE (Walkthrough) 4 min
03

Running Code and Debugging Errors

3 Lessons 35 min
  • What Does It Mean to “Run Code”? 4 min
  • Running Code in an IDE 5 min
  • Errors, Line Numbers, and Shortcuts 4 min

Practice Activities

  • Fixing Errors (Instructions) 17 min
  • Fixing Errors (Walkthrough) 5 min
04

How to Guide the AI as It Writes Your Code

5 Lessons 43 min
  • Files, Text, and AI 3 min
  • Giving the AI the Right Context 4 min
  • Prompting as a Designer 5 min
  • Using Markdown Files to Save Yourself Time 7 min
  • Using Images and Design Files to Guide AI 3 min

Practice Activities

  • Generate a Real UI Using Prompts and Context Documentation (Instructions) 17 min
  • Generate a Real UI Using Prompts and Context Documentation (Walkthrough) 4 min

Resources Provided

  • 4.4_Template_Sample-Context-Files (ZIP)
05

Building Sophisticated and Shareable Prototypes That Work

6 Lessons 37 min
  • Code as a Design Surface 3 min
  • A Sample Setup 2 min
  • Building Prototypes That Work Anywhere 5 min
  • Designing Beyond the Happy Path 5 min
  • Keeping the AI from Going Too Far 2 min
  • Conclusion 1 min

Practice Activities

  • Prototype a Feature for a Real Product (Instructions) 17 min
  • Prototype a Feature for a Real Product (Walkthrough) 2 min

Resources Provided

  • 5.2_Skill_NNG-Portable-Prototype (ZIP)

Learning Outcomes

  • Work in the terminal, run commands, and recognize outputs in tandem with AI
  • Navigate through projects in a code editor (IDE) and find the files powering your UI
  • Guide the AI using the right context, rules files, and design prompts
  • Evaluate AI outputs against human judgment and iterate with AI-assistance

Course Preview

 to watch NN/g videos

Tools Used in This Course

To complete activities in this course, you will need access to your computer’s terminal and a coding tool like Visual Studio Code.

All other resources can be accessed through a standard PDF reader.

This course features unique interactive files and an agent skill that lets you practice what you’ve learned. These can be accessed and downloaded through any browser, although we recommend using your desktop.

Turn Problems Into Solutions

Stop staring at screens of text and work confidently in coding tools

  • Navigate folders and run commands in the terminal without prior coding experience
  • Read terminal output and recognize what an AI assistant is doing when it runs commands
  • Open a project in a code editor and find the files behind any piece of UI

Get AI to build what you intended, not what it guessed

  • Point AI at the right files and screenshots so it works from real context
  • Write rules, spec, and design system files so you stop repeating instructions in every prompt
  • Ask for a plan before any code is written, then review proposed changes and decide what to keep, reject, or adjust

Bring your design judgment into the codebase before engineers ship without you

  • Run a project locally and fix errors by giving AI the browser console output
  • Design error states, empty states, and edge cases that AI-generated prototypes usually skip
  • Build prototypes with realistic data and saved state that teammates can open on their own computers

Frequently Asked Questions

How long will I have access to this course?
Once purchased, your access will never expire. This ensures you can learn at your own pace and return to review content as often as you'd like, whenever you need.
Will I get personalized instructor feedback on course activities?
No, personalized feedback is not provided for activities completed during the course. Most courses provide answer keys to activities that help learners reflect on their progress and understanding of course materials and examples.
What content can I download?
You can download a variety of resources provided with each course, including templates, how-to guides, cheat sheets, posters, reading lists, and more. Video lessons provided in all courses will not be available for download.
Can I access this course offline or on a mobile device?
Offline access isn't available yet, although we plan to add it. Most courses offer downloadable resources for offline reference.

For the best experience, mobile devices are not recommended.
Is this course eligible for the NNGroup UX Certification Program?
Unfortunately, self-paced courses do not count toward UX Certification. However, learners who complete the final exam will receive a “Recognition of Completion” to demonstrate their achievement.

See our Live Online courses for options that count toward UX Certification.
What can I share with my employer to show I’ve completed the training?
Upon completing a course’s final assessment, you will receive a “Recognition of Completion” showcasing your dedication to learning the topic. This document can be shared with your employer or professional network to demonstrate your new skills and commitment to professional development.