Web Dev Simplified

In this video we will cover everything you need to know about SQL in only 60 minutes. We will cover what SQL is, why SQL is important, what SQL is used for, the syntax of SQL, and multiple examples of SQL. SQL is the standard language for interacting with and manipulating data in a relational database system, and is one of the most important concepts you can learn in programming. It allows you to create, read, update, and delete data which is something nearly every application will need to do.

IMPORTANT: Exercises Worksheet Repository:
https://github.com/WebDevSimplified/Learn-SQL

How to Install MySQL:
https://youtu.be/u96rVINbAUI

Outline:
[00:00] - Intro
[05:10] - SQL Syntax
[07:30] - Create Database
[09:20] - Drop Database
[10:34] - Use Database
[11:22] - Create Table
[13:01] - Alter Table
[14:47] - Drop Table
[15:08] - Create Table (Part 2)
  [15:35] - Band Table
  [15:55] - Not Null
  [16:10] - Primary Key/ID/Auto Increment
  [18:40] - Album Table
  [20:05] - Foreign Key/Table Relationships
[23:05] - Insert Into
[25:40] - Select
  [26:27] - Limit
  [26:52] - Specific Columns
  [27:18] - As/Alias Columns
  [28:20] - Order By
[29:24] - Insert Into (Part 2)
[32:04] - Distinct Select
[33:07] - Update
[33:40] - Where
  [33:15] - Less Than
  [33:55] - Like String Filter
  [37:26] - Or
  [38:04] - And
  [38:40] - Between
  [39:20] - Is Null
[39:46] - Delete
[41:00] - Join
  [43:25] - Inner/Left/Right Comparison
[46:42] - Aggregate Functions
[48:05] - Group By
  [50:40] - Combined With Join
  [51:15] - Alias Tables
  [53:57] - Having vs Where
  

Learn X in Y Minutes Playlist:
http://bit.ly/2RscdMZ

Twitter:
https://twitter.com/DevSimplified

GitHub:
https://github.com/WebDevSimplified

CodePen:
https://codepen.io/WebDevSimplified


#SQL #LearnSQL #MySQL

Learn SQL In 60 Minutes

ES6 came with many new features, but one of the best features was the official introduction of Promises. Promises allow you to write clean non-callback-centric code without ever having to worry about callback hell. Even if you never write your own promise, knowing how they work is incredibly important, since many newer parts of the JavaScript API use promises instead of callbacks. Checkout the full video to learn how to define and use promises.

Promise Article: https://blog.webdevsimplified.com/2021-09/javascript-promises

Code From This Video:
https://codepen.io/WebDevSimplified/pen/jXoXYj

Twitter:
https://twitter.com/DevSimplified

GitHub:
https://github.com/WebDevSimplified

CodePen:
https://codepen.io/WebDevSimplified


#JavaScript #Promises #WebDevelopment

JavaScript Promises In 10 Minutes

🚨 IMPORTANT:

Part 2 (Face Recognition) Tutorial: https://youtu.be/AZ4PdALMqx0

In this video we will be setting up real time face detection through a webcam using AI. This AI is so quick that we are able to draw in real time the various faces and expressions of every person in the video without much performance overhead. We will be using the Face API JS library built on Tensor Flow to setup the face detection.

By the end of this video you will have fully functional real time face detection on your site which can be used with any webcam or phone camera. If you want to see a part two of this video make sure to let me know in the comments below.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/Face-Detection-JavaScript
Face API Library: https://github.com/justadudewhohacks/face-api.js
Models Used: https://github.com/WebDevSimplified/Face-Detection-JavaScript/tree/master/models


🧠 Concepts Covered:

- Streaming a webcam through HTML
- Using Face API to detect faces in real time
- Drawing facial landmarks in real time
- Determining emotion through facial expressions in real time


🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#AI #FaceDetection #JavaScript

Build Real Time Face Detection With JavaScript

For some reason I thought it would be a good idea to challenge Kevin Powell, the CSS king, to a CSS battle. Will I lose miserably? Probably, but at least it will be fun.


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
01:00 - Round 1
07:45 - Round 2
23:23 - Round 3
37:03 - Outro


#CSSBattle #WDS #KevinPowell

I Challenged The CSS King To A CSS Battle

In this video we will cover everything you need to know about JSON in only 10 minutes. We will cover what JSON is, why JSON is important, what JSON is used for, the syntax of JSON, and multiple examples of JSON. JSON is the most popular data representation format, and is one of the most important, and easiest concepts you can learn in programming. It allows you to create APIs, config files, and structured data. We will be covering all of the terminology, and going through live examples of all the different JSON types.


Learn X in Y Minutes Playlist:
http://bit.ly/2RscdMZ

Twitter:
https://twitter.com/DevSimplified

GitHub:
https://github.com/WebDevSimplified

CodePen:
https://codepen.io/WebDevSimplified


#JSON #WebDevelopment #Programming

Learn JSON in 10 Minutes

Projects are the best way to learn JavaScript, and a calculator is one of the best projects to choose. A calculator covers all the complex interactions with UI and JavaScript while still being simple enough for people of any skill level.

In this video I will walk you through the steps it takes to build a completely modern calculator using JavaScript best practices. If you want to learn JavaScript or improve your JavaScript skill this is a must do project.

📚 Materials:

Code: https://github.com/WebDevSimplified/Vanilla-JavaScript-Calculator

🧠 Concepts Covered:
 
- How to use ES6 classes to organize code
- How to sync JavaScript code with a UI
- CSS Grid
- Flexbox
- The best way to cleanly handle user input
- How to debug complicated edge cases

🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#JavaScript #WebDevelopment #Programming

Build A Calculator With JavaScript Tutorial

🚨 IMPORTANT:

Learn CSS Today Course: https://courses.webdevsimplified.com/learn-css-today?utm_medium=video-description-no-mention&utm_source=youtube&utm_campaign=css-20-minutes

In this video we will cover everything you need to know to get up and running with CSS in only 20 minutes. We will cover CSS syntax, how to add CSS to your HTML, CSS colors, CSS units, the box model, and best practices for CSS walking through a full example of CSS being used to style an HTML page. By the end of this video you will know enough about CSS to style any basic web pages in your own projects!

Introduction to HTML Series:
https://www.youtube.com/watch?v=BvJYXl2ywUE&list=PLZlA0Gpn_vH8BoXcpCUvdmdPZFuR5y2lV&index=1

Twitter:
https://twitter.com/DevSimplified

GitHub:
https://github.com/WebDevSimplified


#CSS #WebDevelopment #Programming

Learn CSS in 20 Minutes

🚨 IMPORTANT:

Learn CSS Today Course: https://courses.webdevsimplified.com/learn-css-today?utm_medium=video-description-no-mention&utm_source=youtube&utm_campaign=css-position

Chances are you have heard of relative and absolute position in CSS, but did you know there are still three other positions? In this video I will be covering all five CSS positions (static, relative, absolute, fixed, and sticky) by showing you examples of each position and comparing them with each other.

This video may be short, but I cover everything about each CSS position in this video, so you can learn everything you need to know about CSS position. By the end of this video you will have a deep understanding of the interactions between the different CSS positions, so you can effectively use them in your next project.


📚 Materials/References:

CSS Position Article: https://blog.webdevsimplified.com/2022-01/css-position
Sticky Position Tutorial: https://youtu.be/NzjU1GmKosQ
CodePen Code: https://codepen.io/WebDevSimplified/pen/VNRMNP


🧠 Concepts Covered:

- All five CSS positions
- How absolute position interacts with the other positions
- How to use top/right/left/bottom to position elements
- How the document flow works
- When to use relative position


🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#CSSPosition #CSS #WebDevelopment