My Research

What You Are Building

Stage 6 adds the My Research section: a source documentation area where you list and describe the resources you used throughout this unit. Three pre-built source cards are already in the code. Your job is to add a fourth: a source you found on your own during the stage 5 personal research task.

This is the same horizontal flex source card pattern you used in Unit 12. You already know how it works. The source cards display a type badge (Government, Tribal Nation, Academic, Archive, etc.) alongside the source title, URL, and a brief description of what the source contains and how you used it.

New CSS: Source Cards

You built this pattern in Unit 12. Here is a clean review of the CSS, because using familiar patterns across multiple projects is the skill being practiced.

Source card horizontal flex layout

• display: flex; align-items: flex-start: places the type badge column and the content column side by side, both aligned to the top. flex-start rather than center means that as the content column grows taller, the badge stays at the top rather than moving to the vertical midpoint.
• flex-shrink: 0 on .source-type-col: prevents the type badge from compressing when the card is narrow. The badge width is fixed. The content column absorbs all available space.
• flex: 1; min-width: 0 on .source-content: flex: 1 tells this column to fill all remaining horizontal space. min-width: 0 is a CSS flexbox quirk fix: without it, long unbreakable text (like a URL) can overflow the card boundary instead of wrapping.

Type badge and source details

• white-space: nowrap on .source-type: prevents the badge text from wrapping to a second line on narrow screens. Source types like "Tribal Nation" are short enough that wrapping would look broken rather than intentional.
• word-break: break-all on .source-url: forces URLs to break at any character if they are too long for one line. URLs often have no natural break point (no spaces), so this override is necessary to keep them from overflowing the card.

Your Task

Three source cards are pre-built in the starter code: the National Archives Fort Laramie Treaty page, the Standing Rock Sioux Tribe official website, and the Smithsonian National Postal Museum (source of the Sitting Bull quote). Your task is to add a fourth: the official source you used for your personal research in Stage 5.

Find the <!-- ADD YOUR SOURCE HERE --> comment in the editor. Add a fourth source card using the same structure as the three existing cards. Fill in:

• Source type: Tribal Nation, Government, Academic, Archive, or another appropriate category
• Source title: the name of the website or document
• URL: the full web address
• Description: 1 to 2 sentences on what this source contains and what you used it for

Why Documentation Is Part of the Design

Source documentation is not an afterthought appended to a research website. It is part of the design. Placing the sources in a visually distinct section, with type badges and formatted cards, makes a statement: this research was done carefully, and you can verify every claim. The design of the source section communicates the same thing as the content: rigor and accountability.

Listing a Tribal nation's official website as your primary source for information about that nation is also a design argument. It says: for information about a community, the community's own documentation is the authoritative source. That sourcing practice is something you can carry across every research project you do from here.