The ability to visually build complex, data-driven applications in Shipcode is powerful, but that power must be wielded with a foundational understanding of the core technical concepts that underpin all modern digital experiences. This section teaches the essential mental models required for responsible building—the underlying "why" that ensures your projects are logically sound, scalable, and optimized for performance.

By mastering the principles in this section, you will go beyond simple drag-and-drop actions to understand the flow of information from the internet into your user interface (UI), setting the stage for building advanced logic and integrations later in your journey.

What You Will Learn

The articles in Foundations focus purely on conceptual knowledge, equipping you with the intellectual toolkit to approach any Shipcode project effectively. By the end of this section, you will be able to:

• Understand Data Movement: Grasp the communication pattern that allows your application to ask for and receive data from external services (Client and Server).
• Structure Your Application: Differentiate between application navigation and web navigation, and understand how screens are organized logically inside your project (Routes and State).
• Define Structure and Style: Understand the two-part system used by the internet to create a visual display: one part for organizing content and one part for applying appearance and layout (HTML and CSS).

Key Definitions for Responsible Building

Before diving into the detailed concepts, it's important to align on a few key terms as they relate to the structure of your work in Shipcode:

• Client: The device and the visual application you build in Shipcode. The Client is the part of the experience that initiates the conversation, sending a Request for data and displaying the final user interface.
• Server: Any external service or integration your application connects to, such as a database or commerce platform. The Server is the piece that processes a Request and sends back a Response.
• Layout: The primary container for a single, complete screen within your Shipcode project. It defines the visual canvas and structure for a specific part of your application. (Layouts Documentation)
• Component: A fundamental, reusable, modular building block (like a button, image, or container). Components are the visual elements that provide the structure and content (conceptually, HTML) of your application. (Components Documentation)
• Route: A unique, structured address that directs a user to a specific Layout within your running application. It is the core concept used to manage structured navigation. (Routes Documentation, Routes Tutorial)
• CSS (Cascading Style Sheets): The technical concept that controls the visual appearance (color, font, size) and the layout (positioning, alignment) of all your components. Shipcode provides visual controls to write this code for you.