---
# System prepended metadata

title: codeLab initial learning project
tags: [codeLab]

---

---
tags: codeLab
---

# codeLab Initial Learning Project Fall 2023

## The Initial Learning Project: The Personality Quiz!
- 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?
    - javascript
    - next.js and React components
    - airtable
    - css, tailwind, other styling languages you choose
- what do I need to build and share? when?
    - You want to build a web-based view of an airtable base that contains the options for your personality quiz. Anna and Christine used next.js and vercel to do this.
    - we'll share our progress, ask questions, troubleshoot, etc. via slack in the channel ```#ll-codelab```
    - You should share any moments that represent learning breakthroughs for you by posting to ```#ll-code-lab``` and ```#show-your-work```
        - 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
- lab logistics
    - codeLab leaders
        - Anna Ivanov: senior MDF (Slavic)
        - Christine: assistant director of the LL
    - slack channel
        - #ll-code-lab

## 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)
    * [a 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)


## some docs to get you started
* [terminal + setting up coding environment](https://hackmd.io/tDt-lhlZSninMyKj8S3xUA)
* [javascript basics - incl. making a next app](https://hackmd.io/qz_n8IV4QAepX2Sha2bZew)
* [connecting your next.js app to airtable](https://hackmd.io/AhBpXa0TRneC0H_6QizCeA)
* [next.js basics](https://hackmd.io/T68tvR_YT5Og8X6JYb6pqw)
* [mk notes on client side components](https://hackmd.io/g3wbroavSWqPsIkRKhtekQ)

## next.js and react tutorials
* [next.js for beginners](https://www.youtube.com/watch?v=ZVnjOPwW4ZA)
* [react for beginners](https://www.youtube.com/watch?v=SqcY0GlETPk&t=0s)
* [another next.js tutorial - 30 mins](https://www.youtube.com/watch?v=NgayZAuTgwM)
* [next.js tutorial using client forms as example](https://www.youtube.com/watch?v=nSfu7sHPE9M)
* [next.js making a POST request](https://www.youtube.com/watch?v=X5M8MtKsIs8)

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

## more useful links
* [markdown syntax basics](https://hackmd.io/im0mHRWDRWakfC5JS84e_w?both)
* [cloning a github repo](https://hackmd.io/KuxRCUEjTGuwZHMoWV7BJw)
* [adding dynamic routes](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)
* marlon's codeLab docs
    *    [mk-resource-setting-up-your-dev-env](/1ym5sQYWQpycSLoQ3dnfCA)
    * [mk-resource-starting-nextjs-13-app](/VUB0ZVLBQCa7DISuWKxchg)
    * [mk-resource-js-basics](/vB8EsXlcTjym8yscIz7Dgg)
