I originally wrote this guide to onboard underclassmen studying CS at Berkeley onto building web apps, then rewrote it to be for anyone who wants to learn by doing 😄

<aside> 📌

consume all links in order

feel free to smartly use ChatGPT or other LLMs to explain errors and help you debug, but DO NOT use them to fully code for you until you’ve completed this guide imho u will learn better

google anything you don’t know how to do - this is a skill you develop with practice

</aside>

1. Learn what HTML, CSS, JavaScript, and TypeScript are - 6 min 40 sec at 1x speed

   HTML in 100 Seconds

   CSS in 100 Seconds

   JavaScript in 100 Seconds

   TypeScript in 100 Seconds

2. install Homebrew if ur on MacOS - 1 minute

   Homebrew

3. install nvm - ≤5 minutes

   GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

   at the time of writing this means you run curl -o- [<https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh>](<https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh>) | bash in your terminal, then add these lines to your ~/.zshrc file:

   export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
   
   [ -s "$NVM_DIR/nvm.sh" ] && \\. "$NVM_DIR/nvm.sh" # This loads nvm
   

   by editing the file ie run open .zshrc in your terminal, then copy and paste these two lines at the bottom of the file. Then save the file, quit the terminal app, and open it again. Now when you run nvm in your terminal it should spit out Node Version Manager (v0.39.5) and a long list of commands.

4. use nvm to install node LTS. At the time of writing you should run nvm install 'lts/*' in your terminal - <1 minute

5. install VSCode if you don’t already have it - ≤5 min

   install Pretty TypeScript Errors Extension

6. learn JavaScript

• this will take a while, if you already know how to code then don’t spend a ton of time on steps 6 & 7

  JavaScript Tutorial

  Learn JavaScript: Introduction Cheatsheet | Codecademy

7. learn TypeScript

   Documentation - TypeScript for the New Programmer

   Learn TypeScript: Types Cheatsheet | Codecademy

8. Learn how to read documentation - 12 min

   Layman Explained: Reading documentation

   How to read the documentation

   <aside> 📌 You do not have to remember everything, as long as you know where to look to derive the truth.

   </aside>

9. Learn React - go through all of the React learn pages. At the time of writing these are Quick Start, Installation, Describing the UI**,** Adding Interactivity, Managing State, & Escape Hatches. I suggest you code alongside the docs by running the example code you see locally, then tinker with it and observe what changes.

   Quick Start – React

10. Complete the Next.js React Foundations course

    React Foundations: About React and Next.js

11. Complete the Next.js Foundations course

    Next.js by Vercel - The React Framework

12. Learn what Tailwind CSS is

    Tailwind in 100 Seconds

13. Git!

    Git It? How to use Git and Github

14. the fun stuff! - 10 min

    Front-end web development is changing, quickly

    This UI component library is mind-blowing

    Introduction

    Components

15. Deliverable

    1. Create a Next.js app using create next app
    2. Publish your repo to GitHub
    3. Replace the default boilerplate page with your own page that has the following:

       1. Tailwind-styled text somewhere - read the TailwindCSS docs

       2. throw in a fun Aceternity component somewhere

       3. set upshadcn/ui

       4. build a form that renders a toast message on submit, exactly like the example in step 4 of the shadcn ui form docs

          → Go through the shadcn form docs step by step, as well as the react hook form and zod docs if the shadcn form docs are confusing.

       5. deploy your app to Vercel

16. Learn about HTTP requests and APIs - 24 minutes at 1x speed

    What are HTTP requests?

    RESTful APIs in 100 Seconds // Build an API from Scratch with Node.js Express

    JavaScript Promises 👨🏻‍💻in 1 Minute #shorts

    Learn Fetch API In 6 Minutes

    JavaScript Async Await 👨🏻‍💻 Tutorial in 1 Minute #shorts

17. Deliverable

    🗒️ Docs to Read:

    • Next.js docs in general should be referenced at every step, but specifically go over
      • Next.js installation
      • most importantly, data fetching on the server using fetch
    • Random user generator API docs
    • shadcn-ui installation

    📚 Objective: Apply what you've learned from previous lessons to build a Next.js app from scratch that fetches and renders data from the random user API.

    Requirements:

    • Random user Next.js app
      • a page that can render ≥2 users
      • number of users fetched can be set with a variable
        • must display an image of each user
        • must display the name of each user
        • must display at least one other piece of fetched information
      • functionality so that you can click on a user in the users list and then see more info about them. This can be be done with a modal.
    • data must be fetched using fetch()
    • publish your git repo on GitHub - if it’s private with raviriley added as a collaborator
    • deploy your app to Vercel

    Feel free to go beyond these requirements. Use shadcn-ui or any other component library you prefer.

18. shadcn/ui deep dive

    How Shadcn/ui ACTUALLY Works