Box Ninja

UI development in a nutshell:
Javascript manipulates both css and html. Html is very minimal (since I only use a div). So the majority of things I manipulate with javascript are css properties. Sometimes I also manipulate html with javascript as well. But that's about it. There's nothing to it. Just don't create Types/Components. And don't use bloated frameworks. I did that for about 15 years all it does is make development slow. Remember the Shai UI Mantra: "Var to code is like Div to UI". Keep everything Typeless. That's the whole point of JavaScript. And feel free to ask me any questions in the comment section.

A few notes:
1. You'll notice I don't talk about modern css properties like flexbox. It's because it's not really needed. The majority of huge websites you see today (amazon, youtube, google, twitter, etc) were all originally done without having flexbox. So classic css (as I'm detailing in this video) is more than enough for just about anything you need. In this video I detail all the properties I deal with on a day-to-day basis.

2. You might want to watch this vid on 2x speed. Because there might be too much info! maybe in the future I will make a more concise video.

3. What about the server?! The server is obviously equally important to the client. But with the advent of node.js the server and client are becoming more and more similar (they both use javascript). I always felt that front-end is more challenging than back-end so I focused on that. I also encourage new developers to start on the front-end that way when you code, you can see the results visually. The server is generally how we store data like using a database, changing files in the filesystem, etc. For now though, you can use easy ways to store data like 'localStorage' on the client. But I'll talk more about the server in futures videos.

Tab as a function: (easy way, most often do it this way)
https://jsfiddle.net/foreyez/gpw2Lqkx/
Tab as an object: (harder way, but sometimes this type of functionality is needed)
https://jsfiddle.net/foreyez/Lu41o3rc/
Html editor:
https://www.youtube.com/watch?v=jEeYPFFmMcs
Bootstrap Glyphicons:
https://getbootstrap.com/docs/3.3/components/
Glyphicons (entire collection):
https://www.glyphicons.com/

00:00 Interlude
00:30 Introduction
02:15 Keep the Syntax Small
03:08 Style a div with class or id
07:05 Intro to Most Commonly Used CSS Properties
08:10 Quick JS Intro
08:30 JS Functions and Events
10:04 How To Change HTML from JS
12:05 CSS - The Most Important Element in The World
13:00 CSS - Don't Use Components, Be Typeless
14:30 CSS - Intro to CSS Properties
15:30 CSS - Styling a div - width, height, background
16:39 CSS - Keep This in Mind When Using Percentages
18:19 CSS - Color Basics
19:28 CSS Appearance - margin,padding,font-size,font-weight,font-family
22:01 CSS Appearance - border, border-radius, color, text-align, line-height
23:51 CSS Appearance - box-shadow
25:09 CSS Behavior - user-select, overflow, white-space, pointer-events
27:41 CSS Variables
29:35 CSS Position - display
32:20 CSS Position - Nesting Divs
33:30 CSS Position - absolute, relative, fixed, left, top, bottom, right
36:00 CSS Position - How to make position absolute relative to a specific parent
38:20 CSS Position - Relative vs Absolute Differences
40:45 CSS Position - Fixed
41:15 CSS Position - z-index
42:00 CSS Position - vertical-align on an inline-block
43:40 CSS Position - float
44:25 CSS Position - display none
44:50 CSS Position - calc
45:54 Animation - transition
47:55 Animation - Changing Style with JavaScript
49:35 Animation - Timing Functions (linear, ease, etc)
51:00 Animation - Better to Animate Transforms and not width, height, left, etc
51:45 Animation - Translate and Scale Transforms
53:00 Animation - transform-origin
53:30 Animation - Transition on Transforms
53:55 Animation - Keyframe Animations
55:40 Animation - Running Animation onclick event
56:38 Animation - Ping-pong Animation with alternate
57:06 Glyphicons - Intro to Glyphicons
57:44 Glyphicons - Customizing Bootstrap to Just Use Glyphicons
59:40 Glyphicons - Showing a Few Example Glyphicons
01:00:45 JavaScript - Avoid Complicated Libraries (unless you really need them)
01:03:00 JavaScript - Putting Everything Together: let's create a tab control
01:03:26 JavaScript - html5 doctype
01:04:10 JavaScript - Everything is a BOX!
01:06:30 JavaScript - This is where the css comes into play
01:19:37 JavaScript - Two tab controls together
01:23:23 JavaScript - Functions vs Objects (aka Namespaces)
01:29:08 JavaScript - Creating a Component Without being a Component
01:33:00 JavaScript - Summary