The course introduces basic concepts, teaches architectural paradigms and gives hands-on insights on how to develop applications for web using vibe coding techniques as well as modern AI code generation tools (Chat GPT, Claude Code, Cursor). The course starts by introducing key concepts such as client-server architecture for web including REST and MVC design patterns, front-end vs back-end assignments, basic description of HTML, CSS, Javascript and their purposes as well as their basic elements (DOM tree, styles, functions). Then, the course dives into the creation of an efficient web application architecture which is populated, block-by-block, by auto-generated code using a preferred AI code generation tool. Within a web development project, participants will learn to develop and test a full-blown web application using a convenient rapid prototyping environment, such as Google App Script with Google Cloud.
Course Topics:
- Elements of web applications. Purpose, possibilities and types of web applications. Front-end vs back-end definition. Common web application UI elements. Concept of functions and storage. Building a Hello World web application using GAS.
- Basic architecture of a web application. Understanding application state machine and data exchange dynamics using REST. Understanding coding elements and their purpose – HTML, CSS, Javascript, DOM tree, JSON. Creating a basic block diagram of a web application.
- Vibe coding fundamentals. Introduction to AI code generation tools (Cursor, Claude Code, Chat GPT). Building simple prompts. Building web application development AI context. Prompting checklist. Inserting web application block diagram into the AI. AI-generation of the first front-end UI page (HTML / CSS) and application of it within GAS.
- Describing web application behavior to AI. Creation of CRUD functionalities for a simple web application UI dialog. Generating back-end functions. Using back-end storage (cache, sheets). Retrieving data at the front-end. Populating UI from JSON into HTML elements. Updating JSON from HTML elements. Storing changes to the back-end.
- Testing and debugging with AI. CRUD UI dialog front-end / back-end debugging of an injected example error. Types of errors and how to prompt AI to help us fix them. Keeping AI code in check. Managing complexity of the code. Code restoration.
- Complex web application buildup. Introduction of additional UI elements (dashboard, graphs, lists, loading indicators). Description of an exemplary web application for managing students and their enrollment to courses. Creating a complex web application block diagram. Generating and integrating AI-generated code within a complete solution.
- Web development recap with the exemplary team project. Intensive hands-on work on the development of a web application.
Requirements
Software: Chrome browser.
Hardware: Computer with an Internet connection, working speakers, and microphone.
Prior knowledge: Engineering background preferred. Computer literacy at the advanced level.
