Let’s write the code. Assume we are using the CodeHS JavaScript library (similar to graphics.js ).

You create the parent, add children, but never call main.add(profileCard) .

// sidebar.component.ts import Component from '@angular/core';

In this article, we will break down exactly what nested views are, why CodeHS requires you to learn them, and how to solve the problem efficiently.

Now that you have a working solution, let's break down the core ideas:

: Start with a main that encompasses everything. Use the styles.container typically provided in the CodeHS Mobile Apps documentation.

// Parent View: The profile card container var profileCard = new Rectangle(200, 250); profileCard.setPosition(100, 100); // Position on the main screen profileCard.setColor("lightgray"); profileCard.setBorderWidth(2); profileCard.setBorderColor("black");

By nesting .stats inside .widget , and then three statistic cards inside .stats , the layout becomes modular. If the teacher later asks to duplicate the widget, you simply copy the entire .widget block.

In CodeHS (especially when working with React Native or similar component-based frameworks), a View is a generic container that holds other components. Think of it as a <div> in HTML or a Pane in other UI libraries. A View can have styles (like background color, padding, margin, flexbox properties), and it can contain text, images, buttons, or—most importantly—.

Child position = Parent position + Offset.

Assemble the hierarchy in the return statement of your render function. Ensure that there is exactly top-level parent View surrounding everything else.