Day 02 - JAMStack Architecture
Welcome to part 2 / 3 workshop series on building documentation sites
using JAMStack architecture.
Remember to check in at events.mlh.io/events/11731!
What type of workshop is this?
- Today we will be building out a workshop repository using 11ty
- It'll be less of a follow-along, more of a "build with me"
- Workshops will support each other, but 100% attendance is not mandatory!
Technical things we'll do today
- Moodboarding / grabbing inspiration
- Learn how to prototype like a designer with tldraw + penpot
- Diving into templating languages like nunjucks
- File based routing
- Component-based design like astro
- Emmet abbreviations
- Using a CSS framework like picocss
- Using GitHub codespaces + GitHub pages
- Integrating a canvas animation library like p5.js
Agenda
- Designing a workshop website
- Building a workshop website with 11ty
- Introducing cool tools and concepts along the way
No need to take notes!
This slide deck and all the resources in it will be available to you
via the MLH discord server in the #announcements channel.
Today's project on stream
I've been working on a repo for hosting my workshop material (still in the process of migrating them)
- Landing page
- A gallery view of workshops
- Each workshop should have at least 2 files
- Instructions for how to run the workshop
- Presenting material for the workshops
So we didn't quite get to finish our 11ty project onstream so here's a sandbox repo that has a working thing that's more bare bones and easier to go through 11ty-sandbox