(UI)
Unit 5: Building Your Application
What is a User Interface?
A **User Interface (UI)** is the visual part of your application—what the user sees and interacts with. A well-designed UI is intuitive and easy to use.
A great UI focuses on three key principles:
- **Clarity:** It should be immediately obvious what each element does.
- **Consistency:** The same type of element (like a button) should look and behave the same way across your entire app.
- **Feedback:** The UI should respond to the user’s actions, for example, by changing color when a button is clicked or showing a loading indicator.
In this lesson, you’ll learn the fundamental building blocks of a UI and practice arranging them to create a functional and pleasant experience.
Core UI Components
UIs are built from a combination of these components:
Layouts
The structure and arrangement of elements using HTML tags like <div> and CSS properties like flexbox or grid.
Components
The individual interactive elements like buttons, input fields, and cards. These are the building blocks of your UI.
Visuals
The aesthetic elements such as colors, typography (fonts), icons, and shadows that give the UI its look and feel.
Interactivity
How the UI responds to user actions, like clicking a button or typing in a form. This is where JavaScript comes in to make your UI “come alive.”
Activity 1: Simple To-Do List UI
This is a working example of a simple To-Do List UI. Try adding and removing tasks to see how the UI responds to your actions!
My Daily Tasks
- Finish Lesson 1 on UI Design
- Plan Unit 5 lessons
Activity 2: The Color Changer
Click on a color swatch to change the background color of the preview box below. This demonstrates how a simple event (a click) can trigger a visual change in your UI.
Activity 3: Build a Simple Card UI
Your task is to build a simple UI element, a “profile card,” by filling out the forms below. The preview will update in real-time as you type, showing you how different UI components can be combined.
Preview Title
Preview Subtitle
Preview Description
