[Edit] Placeholders: Context and Types

content/uiux/concepts/placeholders/placeholders.md

@@ -3,6 +3,7 @@ Title: 'Placeholders'
 Description: 'Placeholders are used to represent high-fidelity content such as text, images, and videos.'
 Subjects:
   - 'Web Design'
+  - 'Web Development'
 Tags:
   - 'UI'
   - 'UX'
@@ -11,4 +12,25 @@ CatalogContent:
   - 'paths/front-end-engineer-career-path'
 ---
 
-When creating [sketches](https://www.codecademy.com/resources/docs/uiux/sketching) or [wireframes](https://www.codecademy.com/resources/docs/uiux/wireframe), [low-fidelity](https://www.codecademy.com/resources/docs/uiux/low-fidelity) **placeholders** are used to represent [high-fidelity](https://www.codecademy.com/resources/docs/uiux/high-fidelity) content such as text, images, and videos. [Wireframe elements](https://www.codecademy.com/resources/docs/uiux/wireframe-elements) are an example of placeholder content. Indicating the use and placement of an element, without emphasis on how the content will appear visually, is what placeholders achieve.
+When creating early-stage [sketches](https://www.codecademy.com/resources/docs/uiux/sketching) or [wireframes](https://www.codecademy.com/resources/docs/uiux/wireframe), [low-fidelity](https://www.codecademy.com/resources/docs/uiux/low-fidelity) **placeholders** are used to represent [high-fidelity](https://www.codecademy.com/resources/docs/uiux/high-fidelity) content such as text, images, and videos. [Wireframe elements](https://www.codecademy.com/resources/docs/uiux/wireframe-elements) serve as placeholder content, indicating the use and placement of an element without emphasizing its final visual appearance.
+
+## Purpose of Placeholders in Design
+
+Placeholders help designers and stakeholders focus on layout and interaction flow without getting distracted by details such as final copy or image styling.
+
+They are often used in:
+
+- Low-fidelity wireframes to represent headings, paragraphs, and buttons using grey boxes or "lorem ipsum" text.
+- Content planning sessions to mark where dynamic or pending assets (such as videos or embedded charts) will go.
+- Prototyping when functionality needs to be tested before assets are finalized.
+
+## Types of Placeholders
+
+Common forms of placeholders include:
+
+- **Text placeholders:** Generic copy such as “Headline here” or “Lorem ipsum” to represent future body content.
+- **Image placeholders:** Grey boxes or icons marked with an 'X', a camera symbol, or image dimensions (e.g., 800×600).
+- **UI component placeholders:** Blocks or lines indicating future dropdowns, tabs, or carousels in a layout.
+- **Loading placeholders (skeleton screens):** Shimmering or animated blocks displayed while real data is being fetched — often used in modern web applications.
+
+> _Note:_ Skeleton screens are a special category of placeholders focused on perceived performance rather than structural design.