The IPO Cycle: Difference between a Webpage and a Web App

The IPO (input-process-output) cycle explains how any computer task flows in three steps: Many systems (not just computers) follow this pattern.
- Input: Data and instructions that go into the system (e.g., typing on a keyboard, tapping a screen, scanning a QR code).
- Process: The system works on the input using rules or programs (calculations, comparisons, sorting, validating, transforming).
- Output: The system returns results in a useful form (text on screen, printed receipt, a saved file, an audio alert).
A webpage is typically read-only content: only output exists
A web app is interactive software in the browser, ****where users ****provide Input, the system does the processing, and then returns corrsponding Output.

<aside> 💡

Learning how to write a web app is learning how to build a system based on the IPO cycle.

</aside>

Frontend Basics [Theory]

3 files are created automatically

A web page typically includes three files:

HTML (Hypertext Markup Language): This is the markup language used to define the structure and layout of the page, including headings, paragraphs, images, links, and other elements.
CSS (Cascading Style Sheets): This is used to define the presentation and styling of the webpage, including colors, fonts, line spacing.
JS (JavaScript): This is a programming language used to add interactivity and behavior to the webpage. JavaScript allows you to add animations, *event listeners, and other interactive features to the webpage.
- event listeners are “sensors” installed on different elements on a webpage, include the sensors for “click”, “mouseover”, “change”, “select”, “keydown”

The roles played by the 3 files

Follow the steps below to get ready for web development.

Step 1: From your file explorer, click View > Show > File name extensions to show the full file name.