---
# System prepended metadata

title: codeLab-initial-learning-project-draft
tags: [codeLab]

---

---
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)