NodeJS Tutorial

This page is under construction! In the meantime, you can still learn SQL by checking out the below videos.

Sublime Text Windows Install

Install Sublime Text Mac

Installing WampServer on Windows

Install MAMP on Mac

If you have problems with the caching of PHP files, meaning the changes don't update in the browser right away when you change the php code, 

This link provides all of the sql code we use throughout the course. If you have a typo you can check to see how your code compares with mine.

Create and Delete a Database in SQL & PHPMyAdmin

Create Tables in PHPMyAdmin

Create a Table with SQL

Insert into table with SQL

Deleting Records Part 1

Duplicating a Table in SQL

Deleting Records in SQL

Altering Table Structure

Update Rows in SQL

Find Records with Select & Where

sql code

Inner Joins (Combining Tables)

Left & Right Joins

Note: This tutorial needs some minor corrections, but you'll still need to go through this tutorial in order to understand the next tutorials. I'll make the adjustments when I can.

Outer Joins & Unions

Foreign Key Constraints & Data Integrity

One to Many Relationships SQL

Many to Many Relationships

SQL Tutorial

This page is under construction. In the meantime, Please check out the following MongoDB Tutorials:

Inserting Documents:  **See code below video**

Code to insert

sample records

Filtering Code

Filter with Less Than

Get Documents with Or Conditional Exercise:

Get Documents with Or Conditional Solution:

Or Conditional Code

Find documents by objectID

Get if Field Exists

Regex Solution

Deleting Documents

Updating MongoDB Documents

Unsetting Fields

Delete the existing pets collection (by clicking the delete button in mongodb cloud) and re-insert all the data with the below command:

Insert Many Pets

The below "code block" is not meant to be run inside MongoDB Atlas. Below we're walking through the creation of our query one step at a time first.

Aggregation Pipeline

Aggregation 2

Aggregation 3

Aggregate with a match + sum of documents

Aggregation 4

Pets & owners sample data

One to Many in MongoDB

sample data

Many to Many Aggregation

Sample Data

Create the "index" on the "whereat" object with 

db.games.createIndex( {whereat: "2dsphere"} )

Find games within specified distance from the specified coordinates:

Geospatial Queries

Learn MongoDB

best text editor

Authentication and Authorization is one of the most important parts of nearly all applications. Is the person using your app who they say they are? Is the right data for the right person being displayed at the right time?

Auth (short for Authentication) is also one of the harder parts to understand how to build. This page is dedicated to exploring different ways to authenticate and authorize an application.

PassportJS docs aren't the best, but Passport is one of the most popular authentication methods in Node & Express applications, so we're going to start with Passport. The cool thing about Passport is it offers a variety of separate "strategies" to authenticate your app. You can use Twitter, Google, Email & Password, Json Web Tokens, and much more.

In this section, we're first going to learn about Sessions, and how they work all by themselves. Once we understand how sessions work, we'll be able to implement a sessions based authentication strategy with Passport.js.

Once we understand how Sessions work we're going to learn about JSON Web Tokens (JWT) and how they work to store personalized, sensitive data. After we learn how the process of storing info in JWTs and decoding the token into usable data works, we will implement an authentication strategy in Passport that utilizes the passport-jwt strategy.

Authentication

This page is under construction. In the meantime you can learn still learn the basics of VSCode

Install VSCode

: nfn  (and tab when ready to move to next step.)

: usstn (requires ES7 React/Redux snippet pkg by dsznajder)

: uefs (requires ES7 React/Redux snippet pkg by dsznajder)

: Ctrl + Shift + L (added keybinding) OR "clg" from es6 code snippets.

: tc (from JavaScript es6 snippets... I think?)

(I needed to turn off my GPU Hotkeys YMMV)

Quick Jump to Character (Requires MetaJump)

:  ALT + / "characters" type letters that popup (case sensitive)

: Ctrl + Shift + f (enter search term) then CTRL + Down arrow (need to fix that to j)  Then use arrows/vim keys to move up and down in explorer. Press SPACE BAR to collapse/expand the files. Press ENTER to move into currently highlighted file.

** Need to set "search.focus.nextInputBox" to the desired key to switch from input field to the results **

Quick Jump + Select (Uses MetaJump & Vim)

Summary: ALT + Shift + / = select & jump.

To delete a multi-line block, the entire lines, go to beginning of line. Then ALT + Shift + / then enter character(s) and select using the metajump popup characters. THEN move to end of line and run DELETE command (d)

"backgroundColor" to delete "ground", have cursor on "g". type "dtC" to delete all the way to C. Does not delete "C".

: rg (= replace current character with g)

: P = Paste before cursor, p = paste after cursor

: # b (ex. 2b move to beginning of words two back.)

 Couldn't easily figure out a way to make vim search not suck in VSCode, so I removed the vim keybinding. CTRL +Shift + p  and right click on the keybinding with "vim" something in it, and "remove" keybinding. That allows the normal search to work.

 to put cursor on the chosen results line.

- Want a better way to get to end / beginning of a React component the same way I can use % to get to begin and end of ( ) and { }

- Doesn't delete matching bracket. If I only have {} and backspace the {, the closing bracket isn't removed.

- Wrap highlighted text with { } or " " etc.

- Can't Cancel the search results with ESC. probably because of VIM bindings.

- Advanced New File not working properly. with or without vim.

- Want to enter insert mode while putting a new line above / below. currently if I need a new line, I'll put cursor on line above, move to end. hit enter then type. Would like a faster way to do that.

- Don't like how "rafc" pulls in "import React". It may already be there. sometimes I want useState, sometimes useState and useEffect, etc..

Vscode Tutorial

This page is under construction, and we'll have an entire series on Git soon, but for now, get the crash course version and learn Git in 20 minutes!

Git Tutorial

This tutorial will get you up and running with React in a single video. Check out the link to get started.

React Tutorial

On your journey to becoming a web developer, HTML & CSS is often a great place to start your computer science career. Whether you want to be a designer, full-stack developer, or software engineer, learning html and css will be a step in the right direction. Let's take a look at what HTML and CSS is, and how it can help you achieve your goals.

It is what allows you to design content on a web page to look the way you want it through "tags". There's a variety of HTML tags to choose from, and they each do something slightly different. I'm going to make an "Unordered List" with the 

 tag right now to list off a few commonly used HTML tags:

, which is used to make consistent styling across your website and web apps. CSS also makes it easier to define rules and priorities for how the content on your site should look. Let's take a look at an example of some HTML and CSS code:

Example HTML & CSS Code

This code will end up looking like this in a web browser:

Not everyone needs to learn html and css, but if you're interested in web design or web development, then you should learn html and css because these markup languages will help you create the look and feel of the website. Everything that is displayed in a web browser renders as HTML and CSS. Every time you search the web you look at HTML and CSS, so if you're working on websites there's no way around it.

Designers don't usually work in HTML and CSS, but they design mockups of what a page will look like as a finished product. Being comfortable with HTML and CSS helps designers know what works and what doesn't work for the developers and helps you to have a more cohesive team.

 that covers all the fundamentals. This course requires zero experience and is the perfect place to start learning to code. There's quite a bit to learn just in the realm of HTML & CSS. take a look at the below sections to find out more about what you may want to learn when it comes to HTML & CSS:

The only thing you need before learning html and css is a text editor! The easiest text editors to get started are Sublime Text or VSCode.

Besides getting setup with a text editor, learning HTML & CSS fundamentals is one of the first things a beginner programmer will do when learning to code. Everything on a web page ends up as HTML and CSS, which are the building blocks of the world wide web. Before getting into intermediate and advanced concepts like Flexbox, CSS Grid, and more, you should have a solid understanding of the most basic building blocks. What is an html element? How do you style different elements and use them on a page?

You can learn the fundamentals of HTML & CSS at our 

Or see the bottom of the page for the basics tutorials:

Flexbox is a powerful design system that allows you near complete control over the layout of your app. Flexbox is especially helpful for aligning your items in a variety of ways. Learn how to build highly flexible layouts with our HTML & CSS course or check out our 

CSS Grid is an incredibly powerful layout system that allows fine-grain control on both the horizontal and vertical axis. CSS Grid allows you to layout your webpage in the form of a "Grid", where you can have columns and rows of different sizes. Each element inside a grid can span multiple rows and columns, and even overlap other elements in the grid. You can control the amount of space between each grid "cell", customize the position and order of each element, and much much more. Learn the CSS Grid on our 

Zero Quick Tip

HTML Hello World

CSS Stylesheets

CSS Classes and IDs

Specificity Basics

Border, Margin, Padding

Chrome Dev Tools

CSS Combinators

Display Types: Block and Inline

CSS Positioning

Collapsing Margin Quirks

Color Codes

Media Queries

Pseudo Classes

Form Styling

Custom CSS Properties

Learn HTML & CSS

How much can I earn as a JavaScript developer?

What else should I learn in addition to JavaScript?

Object Oriented Programming In JavaScript is a big topic, and we're going to break it down step-by-step.

Before trying to tackle JavaScript OOP, you should have an understanding of the fundamental building blocks of JavaScript. Once you have the fundamentals, it will be much easier to pick up Object Oriented Programming concepts as they relate to JavaScript.

The Prototype Property in JavaScript helps objects share the same function. If you have 100 cat objects and they all "meow", there's no need to write the same function 100 times. Instead, we can re-use a function with the Prototype feature of JavaScript. The Prototype feature is what allows us to create a "chain" of objects that JavaScript will "look up" to when searching for a property or function.

"This" in JavaScript is used to reference an object in a reusable way. For example, if you want to increase the users age, you wouldn't want to have to do something like 

 was created, allowing us to do something like 

 and having complete control over what "this" means in different scenarios.

Programming Tutorials & Courses