Git/GitHub

TODO: mention GUI tools like Tower, GitKraken, GitLens that are free with GitHub Education pack

Learn Git - Tutorials, Workflows and Commands | Atlassian

HTML/CSS/JS Basics

JavaScript | MDN - great reference resource for anything relating to HTML, CSS, or JS

React and Next.js

React Foundations - good intro to Next.js and React, assumes knowledge of basic HTML/CSS/JS

Quick Start – React

The Beginner's Guide to React - free course on React to get a deeper understanding of what React does

Advanced Styling + Tailwind CSS

Styling with utility classes - Core concepts - explains why tools like Tailwind CSS are useful. site also includes a reference for all Tailwind CSS classes and corresponding CSS styles

The Thought Process Behind A Flexbox Layout | CSS-Tricks - basic overview of flexbox

CSS Flexbox Layout Guide | CSS-Tricks - flexbox reference with detailed explanations and examples of each property

CSS Grid Layout Guide | CSS-Tricks - same as above but for CSS Grid, comes in handy for more advanced layouts that can’t be easily achieved with flexbox

Knights of the Flexbox table - Good exercise for learning how flexbox works and remembering the corresponding Tailwind classes

Notes from old resource document:

• Git / GitHub

  • Learn Git Branching

    • Interactive tool for demonstrating branching

    • Introduces features building on top of the others

    • “Gamifies” it with a couple challenges for each feature

    • Learn Git Branching

• JavaScript & TypeScript

  • Learn Javascript

    • Seems like a decent resource, though requires linear completion (later parts don’t unlock till you’ve completed earlier stuff)

    • Quite basic, assuming only that you understand programming concepts

    • Learn JavaScript

  • Typescript for Javascript Programmers

    • Good, short tutorial to introduce the main differences and similarities between Typescript and Javascript

    • Documentation - TypeScript for JavaScript Programmers

  • Typescript for New Programmers

    • Also relatively short, but covers some topics more in-depth

    • Documentation - TypeScript for the New Programmer

• React

  • Components and Props

    • Explains basics of components and props in React

    • Components and Props – React

  • Thinking in React

    • Not exactly intro material, but important to consider

    • https://reactjs.org/docs/thinking-in-react.html

  • React Crash Course

    • 4-hour long mega-video all about stuff you can do in React

    • Nice chapter markings that mean you can just skip to the parts you need if you already know earlier stuff

    •  

•  

  •  

    •  

• NextJS

  • Create a Next.js App

    • Tutorial to create full nextjs app from the ground up

    • https://nextjs.org/learn/basics/create-nextjs-app