Learn how to build an app with AI

​Ready to see your ideas come to life on the web? In this fast-paced, one-hour workshop, you'll learn the basics of front-end development using the intuitive "vibe coding" approach with AI assistance. We'll focus on describing what we want to create and letting AI help with the code, enabling you to build a simple personal profile page to showcase your resume, portfolio, or anything you like! No prior coding experience is required – just bring your ideas!

Target Audience: Absolute beginners curious about web development, entrepreneurs, creatives, or anyone who wants to build a simple web presence quickly without getting bogged down in complex code.

​Course Goal: By the end of this hour, participants will have a basic, live profile webpage online and understand the core concept of using natural language and AI to build front-end interfaces.

• ​The Very Basics, Vibe-Style (10 minutes)

  • ​Introduce the fundamental building blocks (HTML for structure, CSS for style) not by deep-diving into syntax, but by explaining their purpose in simple terms relatable to describing a webpage.

  • ​Activity: Guide participants to use simple prompts to create basic page elements. Examples:

    • ​Prompt: "Create a main title for my page that says 'My Profile'." (Introduces <h1> or similar).

    • ​Prompt: "Add a paragraph of text below the title for my bio." (Introduces <p>).

    • ​Prompt: "Make the title text bigger and centered." (Introduces basic CSS styling via AI prompt).

• ​Building the Profile Layout (20 minutes)

  • ​Focus on structuring the profile page.

  • ​Activity: Guide participants to prompt the AI to add sections for:

    • ​A profile picture (e.g., "Add a space for my profile picture").

    • ​A section for resume/experience (e.g., "Create a section for my work experience with a heading").

    • ​A section for portfolio/projects (e.g., "Add a section for my projects with titles and descriptions").

  • ​Use prompts to arrange these sections simply (e.g., "Put the profile picture to the left of the bio text," or "Arrange the project sections in a list"). Emphasize describing the desired visual outcome.

• ​Adding Some Vibe (Styling) (10 minutes)

  • ​Focus on making the page look presentable using AI prompts for styling.

  • ​Activity: Guide participants to prompt for basic styling:

    • ​Changing background color or text color (e.g., "Make the background light gray," or "Change the text color to dark blue").

    • ​Adding some spacing between sections (e.g., "Add some space below each project description").

    • ​Making text bold or italic (e.g., "Make the section headings bold").

  • ​Show how small descriptive changes in prompts can affect the look and feel.