---
tags: codeLab
---

# cd ilp-code-lab-23-24
* [terminal + setting up coding environment](https://hackmd.io/tDt-lhlZSninMyKj8S3xUA)
* [cd-adapted-from-mk-resource-nextjs-13-app](https://hackmd.io/T68tvR_YT5Og8X6JYb6pqw)
* [markdown syntax basics](https://hackmd.io/im0mHRWDRWakfC5JS84e_w?both)
* [javascript basics](https://hackmd.io/qz_n8IV4QAepX2Sha2bZew)
* [connecting your next.js app to airtable](https://hackmd.io/AhBpXa0TRneC0H_6QizCeA)
* [cloning a github repo](https://hackmd.io/KuxRCUEjTGuwZHMoWV7BJw)
* [adding dynamic routes](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)

# mk-ilp-code-lab-23-24

a log of all the steps I took

- [mk-resource-setting-up-your-dev-env](/1ym5sQYWQpycSLoQ3dnfCA)
- [mk-resource-starting-nextjs-13-app](/VUB0ZVLBQCa7DISuWKxchg)
- [mk-resource-js-basics](/vB8EsXlcTjym8yscIz7Dgg)

## The Tools

Learning how to code and then using code to build websites and apps requires many tools.

For the app we'll build first, knowing these tools will be helpful:
* javascript
* [codecademy js tutorial](https://www.codecademy.com/learn/introduction-to-javascript)
* next.js
* here's a tutorial that walks through how to [create a next app](https://nextjs.org/docs/app/building-your-application)
* airtable
* [an overview of airtable](https://www.airtable.com/guides/start/airtable-basics)
* [an sample airtable](https://airtable.com/app8kRRfha0CQ1hG2?) that anna and christine made for their personality quiz prototypes
* [using airtable personal access tokens](https://airtable.com/developers/web/guides/personal-access-tokens)
* this will be useful once you're trying to connect your app to an airtable base
* css
* [linkedin learning css tutorial](https://www.linkedin.com/learning/css-essential-training-3)
* [next.js styling doc](https://nextjs.org/docs/app/building-your-application/styling)

## The Initial Learning Project
- what is the initial learning project?
- The initial learning project in codeLab is a personality quiz that passes in data from an airtable, logs user responses, and then connects to openAI (ex., by asking "based on these responses, which ten movie characters am I like?")
- what tools will I be learning?
- js
- next.js
- airtable
- css, tailwind, other styling languages you choose
- what do I need to build and share? when?
- You want to build a view of an airtable base that contains the options for your personality quiz. Anna and Christine used next.js and vercel to do this.
- You should share any moments that represent learning breakthroughs for you!
- maybe when you learn how to return an array from airtable
- or you get your answers to show up as cool looking grids
- of course, you'll eventually share your personality quiz in #ll-personality-quiz, so we can all take it and learn about ourselves :)
- deadline: end of October
- some pathways (at a high level)
- include visualization of a file structure here?
- at least one really granular step-by-step or sped-up screen capture
- maybe we screen record anna's screen when she's in next?
- showing getting connected to airtable
- and then some quick styling?
- and maybe connecting to openAI
- lab logistics
- codeLab leaders
- Anna Ivanov: senior MDF (Slavic)
- Christine: assistant director of the LL
- slack channel
- #ll-code-lab

## some real-world code examples
* [this linkedin learning python tutorial has some useful coding analogies that apply across different languages](https://www.linkedin.com/learning/programming-foundations-real-world-examples/what-you-should-know?resume=false&u=2194065)
* [same with this one](https://www.linkedin.com/learning/programming-foundations-object-oriented-design-3/encapsulation?u=2194065)