Skip to content

Week 16

Thursday 5/16

Today is an optional day. I’m going to let you all lead what we talk about based on your questions. After class, or near the end depending on how long the final project questions last, I will work with people who have had a hard time converting their normal HTML/CSS Responsive sites to their 11ty portfolios. This may also help some of you for the final project as well

Also, your 11ty portfolio assignment was not previously visible to you in Blackboard. I’m sorry about that. It is available now and so please submit as soon as you can.

Tuesday 5/14

Today we are going to have you move forward with your content and design for your site. We will focus on two hands-on exercises:

  1. Git Branching. We will look at the Basic Git Branching Workflow post.
    • Adding tags to pages: in the middle of this we will get you started with adding some pages with tags so you can practice with Collections as well as brancing.
  2. Showing Pages in a Collection using Tags and Nunjucks
    • You will start making the pages for your site without all of the content so you can focus on how the tags work first.

Collections Part 1: Super simple Page

Each of you will be making a couple of pages and then listing them using Nunjucks.

FIRST: give each of you two unique family/toy/bed etc from your project. So if you’re doing a project on toys you might do soemthing like:

  • person 1: toy of family 51 and toy of family 283
  • person 2: toy of family 41 and toy of family 938
  • person 3: toy of family 22 and toy of family 153
  1. Each Make your own branch
  2. Each of you Create a page. We will keep it super simple, but make sure to use an actual family/toy etc that you will use in your site so you can fill it out with all of the information later. EACH PERSON IN THE GROUP SHOULD USE A DIFFERENT PAGE NAME Here is an example page
---
title: Most Loved Toy of Family 51
layout: base
tags: [toy, loved]
---

# {{ title }}

3. Each do this again with another page for another family/toy etc.

Collections Part 2: Listing pages in a Collection

Each of you Create a test page to show the collection. Make sure to name this in a unique way so it is different: chris-test.md

Add in the following to the page. Change the toy tag to whatever tag your group is using. So if your tag is banana then line 9 would be: {% for page in collections.banana %}

---
layout: base.njk
title: Chris Pages with the "Toy" Tag
---

<h1>Pages Tagged with "Toy"</h1>

<ul>
  {% for page in collections.toy %}
    <li><a href="{{ page.url }}">{{ page.data.title }}</a></li>
  {% endfor %}
</ul>