Unit 02 · lesson

Unit Build: Data-Driven About Page

Unit 2 ends when your About page is no longer a static block of repeated text.

It should now prove that you understand Markdown, YAML front matter, and Liquid as separate layers.

Required source

Your About page should use Markdown for content where appropriate and front matter for metadata.

Example shape:

---
title: About Me
description: Student builder interested in systems and technology.
featured: true
skills:
  - Python
  - Linux
  - Robotics
---

Your exact values should be yours.

Required template behavior

The page should demonstrate:

  • at least two Liquid objects;
  • one filter with a real purpose;
  • one conditional;
  • one loop over structured data.

Do not turn the page into a Liquid circus.

The point is to make the source more maintainable, not more complicated.

Verification evidence

For every dynamic behavior, record one source/output pair.

Example:

Source:
{{ page.title }}

Generated output:
About Me

Do the same for:

  • one front-matter field;
  • one filtered value;
  • one conditional result;
  • one loop-generated item.

Controlled failure

Choose one:

  • YAML indentation error;
  • incorrect front-matter key;
  • wrong Liquid scope;
  • malformed Liquid tag.

Predict the failure class before building.

Then run the experiment, repair it, and keep the evidence.

Unit defense

Answer:

  1. Why does front matter make page data available to Liquid?
  2. What is the difference between page and site scope?
  3. What does a filter change?
  4. What job do {% %} tags perform that {{ }} objects do not?
  5. Why can a successful build still produce incorrect content?
  6. When should repeated content become data plus a loop?

Move on when

  • the About page builds;
  • generated HTML contains the expected resolved values;
  • no accidental Liquid source appears in the browser;
  • your controlled failure has a bounded diagnosis; and
  • you can explain the data → template → output path without reading the lesson.

Unit 3 will move repeated page structure into layouts and includes.