Unit 04 · lesson

Build a Project Grid from `_data`

Before moving projects into a collection, use a data file to understand the tradeoff.

Create project data

_data/projects.yml

- title: Line Follower
  summary: A small robot that follows a high-contrast track.
  technologies:
    - Arduino
    - C++
  featured: true

- title: Network Dashboard
  summary: A learning project for visualizing system status.
  technologies:
    - Python
    - HTML
  featured: false

Render cards

<section class="project-grid">
  {% for project in site.data.projects %}
    <article>
      <h2>{{ project.title }}</h2>
      <p>{{ project.summary }}</p>
      <ul>
        {% for technology in project.technologies %}
          <li>{{ technology }}</li>
        {% endfor %}
      </ul>
    </article>
  {% endfor %}
</section>

Inspect the architecture

The data file owns:

project records;
project titles;
summaries;
technology lists.

The template owns:

article structure;
heading level;
list structure;
CSS hooks.

Change one record

Add a technology to one project.

Build.

Verify only the intended card data changes.

Where `_data` begins to hurt

Now imagine each project needs:

several paragraphs;
images;
code examples;
its own permanent URL;
a project-specific page layout.

You can force that into data.

But a collection may represent the content more naturally.

Keep this version. You will migrate it later and compare.

Checkpoint

Write:

What _data is excellent at here:
What becomes awkward if the project grows:

Build a Project Grid from _data