2.3.9 Nested Views Codehs Site

To nest a view, you simply type the new layout tag inside the parent tags.

If the exercise asks you to create a nested horizontal layout, you would write:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<!-- This is the NESTED layout -->
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
<!-- These views are inside the nested layout -->
    <TextView ... />
    <TextView ... />
</LinearLayout>
<!-- End of nested layout -->

</LinearLayout>

Combine all the steps:

function start()
    var main = new Tab();
// Parent container
var profileCard = new Rectangle(200, 250);
profileCard.setPosition(100, 100);
profileCard.setColor("#f0f0f0");
profileCard.setBorderWidth(2);
// Child: Avatar
var avatar = new Circle(35);
avatar.setPosition(100, 60);
avatar.setColor("#4CAF50");
// Child: Name
var name = new Text("Jane Developer");
name.setPosition(100, 120);
name.setFont("bold 14pt Arial");
name.setTextAlign("center");
// Child: Bio
var bio = new Text("Loves nested views");
bio.setPosition(100, 145);
bio.setFont("10pt Arial");
bio.setTextAlign("center");
// Child: Button
var btn = new Rectangle(100, 35);
btn.setPosition(50, 180);
btn.setColor("#0084ff");
var btnLabel = new Text("Connect");
btnLabel.setPosition(100, 202);
btnLabel.setColor("white");
btnLabel.setTextAlign("center");
// Nesting
profileCard.add(avatar);
profileCard.add(name);
profileCard.add(bio);
profileCard.add(btn);
profileCard.add(btnLabel);
// Add to screen
main.add(profileCard);

This is the "nested" part. The text should sit inside the header view. Again, we calculate its position based on the header’s position.

var titleText = new Text("Dashboard");
titleText.setColor("white");
titleText.setPosition(headerView.getX() + 10, headerView.getY() + 30);
titleText.setFont("16pt Arial");
add(titleText);

Rating: ★★★★☆ (Essential Learning)

The Verdict: This exercise is one of the most important "lightbulb moments" in the early HTML/CSS curriculum. It successfully forces students to stop thinking about a webpage as a flat list of items and start thinking about it as a structured hierarchy of boxes. While it can be frustrating initially, the satisfaction of seeing the layout snap into place makes the struggle worth it. 2.3.9 nested views codehs

The Pros:

The Challenges (and why they are good):

Key Concepts Reinforced:

Final Thoughts: If you are a student stuck on this assignment, take a step back and draw your webpage on a piece of paper. Draw boxes around the elements. Each box you draw is a div. If you can visualize the boxes on paper, the code becomes much easier to write.

Conclusion: CodeHS 2.3.9 is a well-designed exercise that transforms students from beginners into layout architects. It is challenging enough to demand focus but structured enough to ensure success if the syntax is followed correctly.

---