Use this boilerplate to create an ‘index’ for your observation journal entries. Your folder structure should look like this:

📂 core-2-interaction/
└─ 📂 lab/ 
   └─ 📁 projects/
      └─ 📁 03_journal-index
         ├─ 📄 index.html
         ├─ 📁 entries
         │  ├─ 📄 1.html
         │  ├─ ...
         │  └─ 📄 15.html
         ├─ 📁 assets
         └─ 📁 media

Required Pages

Your site will include the following pages:

1. 1 index page, linking to each entry
2. 15 entry pages

Required Information

Each entry should include the following information:

1. A Title
2. An Image (with alt text)
3. A Date
4. A piece of unique metadata (time of day, weather, feeling, etc.)

Putting it Together

Your index page can include any subset of the required information, but your entry pages must include all 5 pieces of information. How can you use CSS positioning and layout properties to make a page with style and behaviour that is unique to your content?

Remember to use semantic HTML! Make good use of the <figure> element.

Resources

Grid Garden
Flexbox Froggy
CSS Tricks: CSS Grid
CSS Tricks: Flexbox