lugvitc / learn-webdev

LUG resources to learn web development.

1. Session - 1

   • html //sam

     • doc structure
     • semnatic html

   • css //sam

     • variables
     • positioning
     • flex
     • structuring (modularity)

   • js //beleswar

     • basics
     • arrow functions
     • functional programming - map, filter
     • fetchAPI
     • async wait, promises
     • dom
     • local/session storage

   • about the sessions: schedule

2. Session - 2

   • React //sam
     • setup, vite
     • folder structure explanations
     • jsx
       • variables
       • mapping
       • conditional rendering
     • css, images importing (function importing)
     • components
       • props
     • hooks
       • useState
       • useEffect
       • useRef(optional)
     • counter frontend

3. Session - 3

   • API introduction
   • Flask //beleswar
     • file structure with modularity
     • .env files
     • endpoints (dynamic endpoints)
     • CORS
   • counter application
     • database models (sqllite)
     • api-building
       • HTTP methods
       • JSON
       • CURL
       • entering data into db, viewing db, deleting (CRUD)
       • HTTP response return status codes
     • Counter Application
       • increment + decrement
       • save button + load from database button
       • app setup

4. Session - 4

   • Trivia App
     • frontend //samridh
       • make a simple page which can display questions
       • form to add questions
     • backend //beleswar
       • question model creation
       • add question end point
       • send question end point
       • validation question
     • frontend //samridh
       • form request to backend for adding question
       • verify that questions are added to db (view db in backend)
       • Display question - fetch from backend
       • Answer button

5. Session - 5

   • Deployment //beleswar
     • frontend on github pages
     • backend on digitalocean
     • db on digitalocean
   • Future Works //samridh
     • authentication
       • jwt tokens
       • cookies
     • try making a CGPA calculator
     • use react router
     • master css
     • responsiveness
     • use bootstrap/tailwind

// schedule

// miscellanoues

• forms in React - examples - counter, buttonClick => counter value - state, conditional rendering - local storage - trivia app - static questions - questions to be imported from a js file - make a trivia app - apiFetch - dynamic - mapping - component