Software as a Medium for Expressing Ideas
Opening Frame
Traditional coding education says: "Learn the syntax first, then you can express yourself."
That's backwards.
Musicians don't wait until they're virtuosos to write songs. Writers don't wait until they know every word to tell stories. You shouldn't wait until you're a "real programmer" to use software as a medium.
You already know how to express ideas. Now the web can be your canvas.
The Gap: What's Possible vs. What People Think Is Possible
What Academics Currently Do
Publishing Research:
- Write papers → PDF format
- Static, linear, non-interactive
- Constrained by journal templates
- Readers can't explore the data
Presenting Findings:
- Create slides → PowerPoint/Google Slides
- Click-through format
- No interactivity
- Evidence is separated from claims
Sharing Data:
- Excel spreadsheets
- CSV files
- Supplementary materials in zip files
- Disconnected from narrative
What's Actually Possible Now
Research That Readers Can Explore:
- Hover over a claim → see the raw interview footage
- Click a data point → view participant demographics
- Filter dataset by variables in real-time
- Toggle between statistical and narrative views
Arguments With Interactive Evidence:
- Historical timeline where you click events to see primary sources
- Market analysis where readers adjust assumptions and see results update
- Literary analysis with inline annotations and comparisons
Data That Tells Its Own Story:
- Visualizations that respond to reader questions
- Self-documenting code and analysis
- Explorable explanations, not just static descriptions
Example: The Research Paper Gap
Traditional Paper:
"We found a significant correlation (r=0.67, p<0.01) between variable A and variable B across 127 participants..."
[Static table of numbers]
[Static bar chart]
[References to supplementary materials]
Interactive Version:
- Scatter plot where each dot is clickable
- Click a dot → see that participant's demographics and direct quotes
- Slider to filter by age, gender, background
- Chart updates in real-time
- Interview footage embedded at relevant points
- Statistical tests visible and re-runnable
The medium changes what's expressible.
The Mental Model Shift
Old Mental Model
I have an idea
→ I need to learn to code
→ Maybe in 6 months I can build it
→ Actually, I'll just stick with PowerPoint
New Mental Model
I have an idea
→ I describe it in natural language to an AI
→ It generates the structure
→ I refine through conversation
→ It exists in 20 minutes
What Changed?
Not the difficulty of coding—HTML, CSS, and JavaScript are the same as they were.
The interface changed—you can now describe what you want in plain English instead of needing to know syntax.
The bridge got shorter—from idea to implementation used to require translating through programming languages. Now it's conversational.
Live Demo: LinkedIn → Professional Website
Starting Point
Your LinkedIn profile (or a resume, or just talking through what you do)
Ending Point
Live professional website that looks polished and legitimate, hosted with a real URL you can share
Time Budget
- 20 minutes total
- 5 minutes: Conversation with AI to shape concept
- 10 minutes: Generation and refinement
- 5 minutes: Deployment
The Build Loop (Teach This Pattern)
1. Describe
I need a professional website. I'm a psychology major at U of Richmond studying social behavior. I've done research on [topic], I'm interested in [area], and here's my LinkedIn: [paste profile]. Make it clean and simple, one page, with sections for about, research interests, projects, and contact info.
2. Generate
- AI creates complete HTML file
- Includes structure (HTML), styling (CSS), and basic behavior (JavaScript)
- Professional-looking right out of the gate
3. Refine
Can you make the header image less tall? And change the color scheme to use blues instead of greens? And add a section for my coursework?
- Conversational iteration
- No need to know CSS color codes or HTML tags
- Describe changes in plain language
4. Deploy
- Copy HTML to file
- Upload to GitHub Pages / Netlify / Vercel
- Live URL in 2 minutes
Key Teaching Points During Demo
Point 1: You don't need to understand the code
- You don't need to read music notation to appreciate a song
- You don't need to understand assembly language to use a computer
- You don't need to parse HTML to create a webpage
Point 2: The AI is a translation layer
- You're fluent in "what I want to communicate"
- AI is fluent in "HTML/CSS/JavaScript"
- The conversation is the bridge
Point 3: Iteration is fast
- Traditional coding: make change → save → refresh → check → repeat
- This approach: describe change → get new version → done
- The feedback loop collapsed
Point 4: Legitimacy through craft
- Professional website → you look serious
- Hosted at a real URL → you seem prepared
- Clean design → you appear competent
- This isn't fake—it's demonstrating care through craft
Point 5: AI as your design consultant
- Stuck on layout? Ask: "How would you format this data?"
- Need inspiration? Ask: "What are different ways to display this?"
- Want alternatives? Ask: "Show me 3 different approaches"
- The AI isn't just a code generator—it's a design collaborator
Point 6: Get unblocked instantly
- "How would I deploy this for cheap?"
- "How could I store this data in a simple way?"
- "Explain why you did it that way like I'm 5"
- Traditional path: Google → StackOverflow → confusion → give up
- This path: Ask → get contextual answer → keep building
Your Turn: Build What Matters
Don't build a todo app. Don't make a calculator. Build something that matters to your field.
Psychology Student
Interactive Study Results
- Present your research with explorable data
- Click data points to see participant quotes
- Filter by demographics
- Show interview footage inline
- Make your findings explorable, not just readable
History Major
Interactive Timeline
- Historical events with primary sources
- Click an event → see original documents, letters, photos
- Compare perspectives from different sources
- Show causality relationships visually
- Make history explorable, not just narrative
Business Student
Market Analysis Dashboard
- Present market research with live data
- Readers adjust assumptions → see projections update
- Compare scenarios side-by-side
- Interactive charts and models
- Make analysis participatory, not just static
English Major
Annotated Digital Edition
- Text with layered annotations
- Click a passage → see critical interpretations
- Compare translations side-by-side
- Link to influences and references
- Make literature multi-dimensional
Computer Science Student
Algorithm Visualizer
- Show how your algorithm works step-by-step
- Interactive parameters
- Performance comparisons
- Code and visualization side-by-side
- Make complex logic visible
Biology Student
Interactive Experiment Results
- Lab results with explorable data
- 3D molecular visualizations
- Process animations
- Raw data available for inspection
- Make science transparent
The Process (Follow This)
Step 1: Pick Your Idea (5 min)
- What do you want to express?
- What feels impossible in PDF/PowerPoint format?
- What would benefit from interactivity?
Step 2: Describe It (10 min)
- Open conversation with Claude or ChatGPT
- Explain what you're making and why
- Be specific about your vision
- Include any data or content you have
Step 3: Generate First Version (10 min)
- Ask AI to create the structure
- Get a complete working version
- Don't worry about perfection
Step 4: Refine (20 min)
- What's working? What's not?
- Describe changes in natural language
- Iterate conversationally
- Add interactivity where it matters
Step 5: Deploy (10 min)
- Get it live with a real URL
- GitHub Pages, Netlify, or Vercel
- Share your link
Step 6: Show It (5 min)
- Share with the group
- Explain what you built and why
- Show the interactive elements
Using AI as Your Collaborator (Critical Skills)
When You're Stuck on Design
Don't stare at a blank page. Ask for suggestions:
"How would you format a table that shows participant responses over time?"
"What are 3 different ways to display this survey data?"
"Show me modern design patterns for research presentations"
"How can I make this data more interactive?"
The AI will give you options you didn't know existed.
When You're Blocked on Implementation
Use AI to unblock yourself immediately:
Deployment: "How do I deploy this for free? Walk me through it step by step"
Data Storage: "What's the simplest way to store and display this CSV data?"
Features: "How could I add a search function to this?"
Debugging: "Why isn't this working? Here's what I'm seeing..."
When You Don't Understand Something
Never stay confused. Always ask for clarity:
"Explain why you structured it this way like I'm 5"
"What does this part of the code do in plain English?"
"Why did you choose this approach over others?"
"What would happen if I changed this part?"
Remember: The AI has infinite patience. There are no stupid questions.
The Mindset Shift
Old Way (Solo Struggle)
- Hit a problem → Google for hours
- Copy-paste from StackOverflow
- Hope it works
- Give up when it doesn't
New Way (AI Collaboration)
- Hit a problem → Ask AI in context
- Get solution tailored to your project
- Understand why it works
- Keep building momentum
Pro tip: The AI is best when you're specific. Instead of "make it better," say "make the text more readable on mobile devices" or "add animations when data updates."
You Will Get Better at This
You'll Get a Feel for Building on the Web—FAST
Personal story: A year ago, I wouldn't have called myself a web developer. Now I'm very competent. The learning curve is exponential, not linear.
- →Week 1: Everything feels impossible
- →Week 2: You can make simple things work
- →Month 1: You're building real projects
- →Month 3: You have opinions about approaches
- →Year 1: You're legitimately competent
💡 Pro tip: When you're confused, ask the AI to teach you. "Explain this concept like I'm a beginner" or "Why does this work?" The AI is an infinitely patient teacher.
You'll Get Better at Directing the AI
Working with AI is a skill that improves rapidly. You'll develop intuition for:
Task Sizing
- • Which tasks are just right
- • When you're asking too much
- • How to break down complex requests
- • When to be specific vs. general
AI Management
- • How much freedom to give it
- • When to step in and redirect
- • Recognizing when it's going down a bad path
- • When to start over vs. iterate
Real examples of skill development:
- Beginning: "Make me a website"
- Better: "Create a portfolio site with sections for projects and about"
- Expert: "Build a single-page portfolio with smooth scroll navigation, project cards that expand on click showing GitHub links and live demos, responsive design with mobile-first approach, and a contact form that sends to email"
🚀 The Meta-Learning Effect
Each project makes you better at the next one. You're not just learning web development—you're learning how to learn with AI assistance. This skill transfers to EVERYTHING: writing, analysis, design, research, problem-solving. You're becoming fluent in human-AI collaboration.
The goal isn't perfect code. The goal is expressing your idea in a new medium.
What You Just Did
You manifested an idea as a web artifact.
This used to require:
- Computer Science degree (4 years)
- Development team (multiple people)
- Months of implementation time
- Budget for designers, developers, hosting
You did it with:
- Domain expertise (you already had this)
- Natural language description
- AI as translation layer
- About an hour
But Here's What Actually Happened
You didn't "learn to code" in the traditional sense.
You learned to:
- Think about structure (what are the components?)
- Describe interactions (what happens when someone clicks?)
- Refine iteratively (try, evaluate, improve)
- Deploy publicly (make it real)
These are design skills, not programming skills.
The Real Skill You Practiced
Bridging from idea to artifact through conversation.
This applies to:
- Software (what we did today)
- Design (describe layouts, generate mockups)
- Analysis (describe data transformations)
- Content (generate, refine, publish)
The skill is: knowing that the bridge exists, and how to walk across it.
Legitimacy as Build Artifact
The Pattern You Should Notice
When you create something polished and make it real:
- Professional website → You look more legitimate than someone with just a LinkedIn
- Interactive research → Your work looks more rigorous than a PDF paper
- Hosted resource → You seem more prepared than someone with just slides
This isn't fake legitimacy. It's demonstrating seriousness through craft.
Job Hunting:
- Everyone has a LinkedIn profile
- You have a custom professional site
- Signals: "I care enough to make something real"
Academic Work:
- Everyone submits a paper
- You submit an interactive experience
- Signals: "I understand modern communication"
Pitching Ideas:
- Everyone has a pitch deck
- You have a working prototype
- Signals: "I can execute, not just theorize"
The Meta-Example
This workshop itself is the pattern:
- Kyle had an idea (teach vibe coding)
- Used AI to develop concept and materials
- Built it as a live website
- The site itself demonstrates the concept
The medium is part of the message.
What's Now Possible For You
Immediate Applications
Academic Work:
- Research papers as interactive experiences
- Presentations that readers can explore
- Portfolio of work that stands out
Personal Projects:
- Ideas you've had but thought were "too technical"
- Side projects you can ship in weekends
- Tools that solve your own problems
Career:
- Professional presence beyond social media
- Demonstrated ability to build and ship
- Portfolio of actual artifacts, not just descriptions
Creative Expression:
- Art projects with interactive elements
- Storytelling in new formats
- Experiments you couldn't do before
The Barrier That Fell
Before: "I have an idea, but I'm not technical enough to build it"
Now: "I have an idea, I can describe it, therefore it can exist"
The bottleneck shifted from technical skill to clarity of vision.
If you can clearly describe what you want, you can build it.
Where to Go From Here
Continue Learning
The Build Loop:
- Keep practicing: Describe → Generate → Refine → Deploy
- Build small things regularly
- Get comfortable with iteration
Understand the Medium:
- HTML = structure (what things are)
- CSS = presentation (how things look)
- JavaScript = behavior (how things respond)
- You don't need to master these, just understand the buckets
Resources
AI Assistants:
- Claude.ai (excellent for complex projects)
- ChatGPT (great for quick generation)
- Both have free tiers sufficient for learning
Learning Platforms:
- MDN Web Docs (when you want to understand the code)
- Web.dev (modern web development practices)
- Observable (for interactive data visualization)
Tools & Libraries
Hosting Options:
- GitHub Pages (free, permanent, version controlled)
- Netlify (free tier, drag-and-drop)
- Vercel (free tier, automatic deployments)
Libraries to Explore:
- Chart.js (data visualization)
- D3.js (advanced interactive graphics)
- Tailwind CSS (styling system)
- Alpine.js (lightweight interactivity)
Stay Connected
Questions after the workshop?
Built something cool? Share it with Kyle—he'd love to see what you create.
The Provocation
Final Question
What would you build if you knew the technical barrier didn't exist?
Not "what app would you make?"
But: What idea have you had that felt impossible to express properly in a PDF or PowerPoint?
That's what's now possible.
The medium changed. The tools changed. The barrier fell.
What will you express now that you couldn't before?