Computer Science Principles

Course Progress 0/0
Sprint View
Week 2 About Page (about.md)

About Page (about.md)

3 min read

Interactive Flag Grid Builder

This lesson teaches you to build a grid of flags for the about.md using JavaScript DOM manipulation. You’ll learn to:

  1. Create HTML containers with JavaScript
  2. Style with CSS Grid for responsive layouts
  3. Build data arrays with JavaScript objects
  4. Loop through data to generate dynamic content

Each exercise provides live visual feedback and lets you copy the final code to paste into your about.md page.

Complete About personalization

Follow the Software Development Life Cycle (SDLC), by making code edits, run make, test, and commit.

  1. Section 1 – Past Grid Buildier code: make, test, commit
  2. Section 2 – Edit and personalize markdown make, test, commit
  3. Section 3 – Change images to personalized photos make, test, commit

Each section will create a new commit in your GitHub analytics, a minimimu of 3 commits should be created with this excercise.

Step 1: Create the HTML Container using JavaScript

Challenge

Create a div element with id "grid_container", style it, and add some sampletext inside.

Lines: 1 Characters: 0
UI Output

Step 2: Demostrate CSS styling for a grid layout

Challenge

Set container style elements for the grid_container to display generated items in a grid layout.

Lines: 1 Characters: 0
UI Output

Step 3: Focus on the Flag Data Array

Challenge

Create the data array with flag information. Add your own location to personalize it!

Lines: 1 Characters: 0
UI Output

Step 4: Complete Flag Grid for About Page

Challenge

Build the complete flag grid by looping through the data and creating styled grid items.

Lines: 1 Characters: 0
UI Output

How to Use Step 4 Code in Your about.md

When you copy code from the UI Builder to your about.md, you need to add setup lines to make outputElement work. The Setup linces creaate a grid container, assigns output element to the container. Alsoo, they enclose javascript code inside of script tags.

// Setup: lines from here to "Copy"
<div id="grid_container"></div>

<script>
var outputElement = document.getElementById("grid_container");

// ⬇️ Copy Start: start on outputElement.innerHTML line 
outputElement.innerHTML = '';
... All ui runner code from Step 4 here
outputElement.appendChild(container);
// ⬆️ Copy End: end on outputElement.appendChild line


// Setup: be sure to include end script tag
</script>

For Other Content: Use Markdown & HTML

The UI Builder is great for JavaScript-heavy components like the flag grid. But for other content like image galleries, we will use Markdown and HTML directly. Mix and match code types; Use JavaScript for dynamic grids, Markdown for descriptions, and HTML for gallery! We are doing all three to get familiar with the different options.

## Photo Gallery

<div class="image-gallery">
  <img src="/images/about/photo1.jpg" alt="Photo 1">
  <img src="/images/about/photo2.jpg" alt="Photo 2">
  <img src="/images/about/photo3.jpg" alt="Photo 3">
</div>

<style>
.image-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
}

.image-gallery img {
  max-height: 150px;
  object-fit: cover;
  border-radius: 5px;
}
</style>

Example: Text with Markdown

## Journey through Life

- 🏫 High School in Glendale (CA)
- 🎓 University of Oregon (Go Ducks!)
- 👨‍🏫 Teacher at Del Norte High School

Hacks for about.md

  1. Customize the flag data:
    • Learn about parts of JavaScript program.
    • Change the flag URLs with places you’ve lived or been. Make it personal.
  2. Copy the code from the final challenge using the Copy Code button
  3. Customize the about.md code:
    • Paste the flag code in Section 1, be mindful of important parts of code to maintain, review is above.
  4. Update Sections 2 and 3
    • Update greetings and descriptions in Markdown to match your interests or history.
    • Change image paths to your own photo gallery, place files in image directory and use site.basurl.
  5. Test locally with make to see your changes

Course Timeline