WBS Web & App Development Bootcamp (January 25th 2023) Resources

A collection of external resources from the WBS Web & App Development Bootcamp

HTML/CSS

A Complete Guide to Flexbox

Background image CSS not working fixes

Learn CSS Grid - A 13 Minute Deep Dive

Learn Flexbox CSS in 8 minutes

What is Flexbox?

Flexbox Defense

CSS Diner

Flexbox Froggy

Responsive Web Design

Relative Measurements

Flexbox or grid - How to decide?

10 CSS Pro Tips - Code this, NOT that!

Learn CSS Animations In 20 Minutes - For Beginners

CSS Keyframes Animation Code Generator

Figma Youtube

Getting Started with Visual Studio Code and Building HTML Websites

Codeacademy Intermediate CSS Quiz

Codeacademy Sizing Elements Quiz

Codeacademy Media Queries Quiz

Why you shouldn't use a div for everything

5 common beginner CSS mistakes

Using data attributes

UI / UX

Balsamiq

Make My Persona Tool

A Pilot to the Difference between UI and UX

UI vs. UX Design Explained in a Meme

The Gestalt Principles

Gestalt psychology

Gestalt qualities

Fitts's law

UX Project Checklist

The theory of metaphors, or why Metaverse will fail

The Myth of Metaphor

The Myth of Finding the Right Metaphor for your UI

Creativity and Efficiency in Web Writing

Accessibility (a11y)

The A11Y Project

ARIA guides

WAI-ARIA Overview

WAI-ARIA basics

Bootstrap

Codeacademy: Getting Started with Bootstrap

Bootstrap - Getting Started

What is Bootstrap?

Get started with Bootstrap

Bootstrap Grid System Tutorial | Bootstrap 5

Bootstrap 5 Tutorials - YouTube

Bootstrap 4 vs. Bootstrap 5: What is the Difference?

Migrating to v5

How to Customize Bootstrap with Sass

Javascript

JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour

The Ultimate React.js Guide

Silent Teacher

https://www.freecodecamp.org/news/learn-javascript-closures-in-n-minutes/

JavaScript in 14 minutes

JS Cheatsheet

Number() vs parseInt()

Object initializer

Difference between console.dir and console.log in javascript?

JavaScript Style Guide

JavaScript Best Practices

Working with objects

Object references and copying

Destructuring assignment

How To Use Destructuring And The Spread Operator? (One Of The Best JS Features)

How to get a grip on reference vs value in JavaScript

Event bubbling, capturing and how to prevent them

JavaScript modules

JavaScript module examples

State of JS

What is Babel?

Webpack

Fetch API

Learn Fetch API In 6 Minutes

How to use Axios with React

JavaScript Promises In 10 Minutes

Ajax

XMLHttpRequest

HTTP Messages

Promise

JavaScript Promises - Explain Like I'm Five

Using promises

JavaScript Promise and Promise Chaining

Javscript async/await

async function

await

GraphQL

Introduction to GraphQL

Getting Started With GraphQL.js

Introduction to Apollo Client

Key pros and cons of GraphQL for your project

Pros and Cons of GraphQL

Date

Date Object

The Many Quirks of Javascript Dates

JavaScript Date: a Bad Part

Intl.DateTimeFormat() constructor

Recursion

Reasons To Use Recursion and How It Works

Recursion Vs Iteration |10 Differences (& When to use?)

When to use a function declaration vs. a function expression

Web API

Element.matches()

HTMLElement.dataset

Element: dblclick event

eval()

DOM Manipulation

What is the Difference Between textContents, innerText, and innerHtml?

HTMLCollection vs NodeList

5 Must-Know HTMLCollection Vs NodeList Differences In JavaScript

Style visibility Property

Web APIs

Navigating the DOM with JS 101

GIT

How to Add a New Remote to your Git Repo

An open source game about learning Git!

How do I fetch all Git branches?

7 Git Best Practices to Start Using in Your Next Commit

What are Git version control best practices

Git Best Practices in 2021

Git Commit Best Practices

Git Branch

Birthday Party

Git Teamwork Overview

JavaScript Homework

Merging vs. Rebasing

Visualize Git

Gitflow Workflow

Simplified Git Flow

Gitflow workflow vs Feature Branch workflow

What Are the Best Git Branching Strategies

Miscellaneous Programming Guides

Rubber Duck Debugging

Introduction to Variables

Thinking About Errors in Your Code Differently

Learn How to Code

Learn JavaScript Closures in 6 Minutes

Gentle Explanation of "this" in JavaScript

JavaScript Recursive Function

30 Day Vanilla JS Coding Challenge

JavaScript For Cats

When should one use Arrow functions in ES6 ?

Understanding Arrow Functions in JavaScript

70 Free JavaScript Books

DevFreeBook JS

Arrow function expressions

Eloquent Javascript

Simplified Git Flow

React

Learn React In 30 Minutes

Thinking in React

React for Beginners - Build a Todo-List App

React JS Full Course 2022 | Build an App and Master React in 1 Hour

Quick Start

Your First Component

Introducing Hooks

Built-in React Hooks

Using the Effect Hook

Synchronizing with Effects

State and Lifecycle

Responding to Events

Passing Props to a Component

[Reacting to Input with State](Reacting to Input with State)

Reconciliation

Lists and Keys

DOM Elements

React Without JSX

[Add React to a Website](Add React to a Website)

Adding Custom Environment Variables

Dev Tools

Google Dev Tools

Firefox DevTools User Docs

Responsively App

Ceros Inspect

Can I Use?... Browser Compatibility Checker

Postman

VS Code Extensions

GitHub Repositories

Prettier - Code formatter

HTMLHint

Portfolio

Codeacademy: What is a Portfolio Project?

Miscellanous Guides

Codeacademy: What is programming?

macOS guide: Screen sharing with Google Meet

What is e-Residency

How do I ask a good question?

Learn Trello board basics

Full Stack Development Explained

Full Stack vs. Specialized Developer: Who Is The Best For Your Remote Business?

Full Stack Developer vs. Front End Developer vs. Back End Developer

What is a Full Stack Developer?

What Is a Full Stack Developer?

Codeacademy: Thinking About Errors in Your Code Differently

I built the same app 10 times // Which JS Framework is best?

MERN Stack Explained

What is a Single-Page App?

What is an API?

What is a REST API?

Representational state transfer

Stateless protocol

Miscellaneous Tools

Keep tabs on your tabs in Google Chrome