Vibe Coding is a high-energy, hands-on workshop designed for developers, DBAs, and DevOps engineers who want to explore coding in a new way—one that emphasizes flow, feedback, and full-spectrum creativity. In this class, we bridge the technical and the intuitive, combining solid frontend engineering principles with dynamic, real-time experiences that bring code to life. Whether you're building internal tools, dashboards, data visualizations, or live interfaces, Vibe Coding will help you develop projects that feel as good as they function.
This 6-hour session blends rapid prototyping, generative UI patterns, and creative coding exercises in a fast-paced environment. Come ready to learn, experiment, and flow.
Prerequisites:
- Solid understanding of HTML and CSS
- Working knowledge of JavaScript (ES6+)
- Familiarity with the browser console and basic dev tools
Audience: This class is designed for:
- Frontend or full-stack developers looking to break out of rigid design systems
- Database administrators (DBAs) who want to surface insights with expressive UI
- DevOps engineers interested in building intuitive, real-time monitoring tools or dashboards
Objectives: By the end of this workshop, participants will be able to:
- Build fast, expressive web UIs using minimal frameworks and modern JavaScript
- Apply creative coding patterns to real-world dashboards and visualizations
- Use live data and reactive layouts to create interfaces that feel alive
- Incorporate auditory, visual, and kinetic cues to enhance usability and user flow
- Prototype quickly using web-native tools (e.g. CodePen, Figma-to-code, or AI code generation)
- Create custom components and animations with a clear “vibe” or visual identity
Course Outline
Morning: Foundation and Flow
- What is Vibe Coding? Philosophy and examples
- Quick-start setup: dev environment, starter kits, libraries
- “Hello, Flow”: Creating your first reactive UI
- Vibe components: Buttons, inputs, loaders, transitions
- Visual rhythm: Using spacing, motion, and feedback cues
- Prototyping with feel: Using AI and code playgrounds to sketch ideas
- Micro-interactions: Responsive UI that talks back
Afternoon: Data, Dynamics, and Delivery
- Integrating live data: APIs, JSON, and web sockets
- Building expressive dashboards (without overkill)
- Looping in sound and light: Audio/visual feedback
- Color, contrast, and mood: Accessible but expressive UI
- Deploying your vibe: GitHub Pages, Vercel, and Netlify workflows
- Group project: Build a vibe-rich interface from scratch
- Show & Tell: Group demos + feedb
This course is available for "remote" learning and will be available to anyone with access to an internet device with a microphone (this includes most models of computers, tablets). Classes will take place with a "Live" instructor at the date/times listed below.
Upon registration, the instructor will send along additional information about how to log-on and participate in the class.