CRASH COURSES

Crash Course - Front-End

YouTube Label: Front-end Crash Course - Start Your Free Coding Bootcamp Journey Here! #100Devs (HTML, CSS, & JS)

YouTube Link: https://www.youtube.com/watch?v=eAe4GmiUm2I

Slides: https://slides.com/leonnoel/html-css-js-review-100devs

Mar 14, 2021

Courtesy of ARK

MDN: https://developer.mozilla.org/en-US/docs/Web/HTML

2:33 IMPORTANT CONCEPT #1: Active Recall (https://www.youtube.com/watch?v=fDbxPVn02VU)

4:32 IMPORTANT CONCEPT #2: Spaced Repitition (https://www.youtube.com/watch?v=Z-zNHHpXoMM)

8:45 Online Course: Learning how to Learn. (https://www.coursera.org/learn/learning-how-to-learn)

9:38 [TIP]: Study with Me + Anki Flashcard Method - Ali Abdaal (https://www.youtube.com/watch?v=W-EpiaPcgTk)

10:38 About Leon

13:08 Half hard-work / half believe-in-yourself

16:30 Imposter Syndrome

19:36 Trough of Sorrow

28:50 To succeed - Manage Frustration / Consistency / Taking Care of Yourself

33:31 What is the Internet? ****************************************************************

42:00 Front End / Back End

48:15 [TIP] FreeCodeCamp - good place to start BUT start building stuff ASAP.

50:54 The Golden Rule (HTML / CSS / JS) Separation of Concerns

54:39 BREAK - Discussion During Break

56:10 Shopify / Wordpress

56:30 Vue: Where to learn Vue?

57:14 100dev Future?

57:58 React and/or Vue

58:08 Harvard CS50 & MIT 6.0001

58:30 REACT

58:38 Kent Dodds: The Beginner's Guide to React (Free)

(https://egghead.io/courses/the-beginner-s-guide-to-react)

59:20 WordPress: Just a CMS - enables you to build a site that folks can update without know how to code.

1:01:46 HTML (Mark Up Language) ****************************************************************

1:01:38 HTML Syntax

1:02:26 Tags <p> </p> Example: <p An Attribute and its value> Enclosed text content </p>

1:03:32 Tags: Heading Element: <h#></h#> (One of most important TAGS) by Importance & Symantec Meaning

1:05:40 Tags: Other Text Elements: <p></p>, <span></span>,<pre></pre>

1:07:16 Tags: Containing Elements: <div> </div>, <section> </section>, <aside> </aside>, <header> </header>, <footer></footer>

1:08:56 CODE ALONG (VS Code): Brownies

1:17:22 > [TIP] RESOURCES: MDN (Mozilla Dev. Network) for HTML/ CSS/ JavaScript

(https://developer.mozilla.org/en-US/docs/Web/HTML)

1:18:46 > IMAGE TAG: Attribute Value Pair. RARE - Self Closing - has NO CLOSING TAG

1:19:42 > [TIP] Comment Example: <!-- Used on items on the list

1:22:56 > [TIP] Who are we building this for (General User, Accessibility User, Search Engines)

1:25:49 > LISTS: Unordered (UL) & Ordered

1:26:35 > LISTS: UL </ul> </ul>

1:27:20 >> LISTS: LI <li> </li> <!-- Used on items on the list

1:28:02 >> LISTS: Anchor Tags <a> </a> Example: <a href='#'> WhateverText </a>

1:30:16 >> LISTS: Anchor Tags <a> </a> Example: <a href='#'> WhateverText </a>

1:32:28 [TIP] RESOURCES: MDN & Shay Howe (https://learn.shayhowe.com/html-css/)

1:33:10 BBC: Review / deconstruct BBC website

1:33:56 > BBC: HTML5 Introduced New TAG: NAV TAG

1:40:41 CSS ****************************************************************

1:41:37 Linking CSS file to HTML

1:42:22 Writing RULES in CSS

1:43:34 Rule/ Selector/ Declarations/ Declaration Blocks

1:45:14 Cascade

1:46:59 BREAK

1:55:36 Some Simple Styles

1:55:40 Colors (Word/ Hex/ RGBa/ HSLa)

1:58:10 Fonts

2:00:08 Font Families

2:01:34 How to Research Styles (i.e. Italics): Use MDN

Also - ShayHowe (https://learn.shayhowe.com/html-css/

2:03:08 CODE ALONG (CS CODE)

2:06:34 Commenting in CSS: /* */ (highlight text, and then ctrl + /

2:08:40 [TIP] Portfolio - build from scratch or use template?

2:12:06 Styling ONLY the paragraphs INSIDE of a section

2:15:15 Selecting By Relationship: parent > child (select element that is DIRECT descendant)

2:16:42 Selecting By Relationship: parent child (select element w/o being direct descendant)

2:18:00 Selecting By Relationship: previous sibling + next sibling (select element that is the next sibling use)

2:19:10 CODE ALONG

2:27:05 IDs & CLASSES

2:27:28 IDs: Only one id with the same value per document: #idName

2:28:18 CLASSES: for selecting multiple elements: .className

2:29:11 Specify

2:31:42 Specify

2:35:39 Specify

2:37:02 Specificity Practice

2:52:34 BREAK

2:59:18 AstroPad to replicate screen to iPad & DemoPro to do highlighting

3:00:20 The Box Model

3:05:20 CODE ALONG: The Box Model

3:11:00 Starter Template

3:11:46 Layouts

3:11:50 Floats (Old way to do layouts)

3:12:28 Layout 1

3:20:44 Responsive Websites

3:21:42 Fixed vs. Responsive

3:22:06 Media Queries

3:24:22 PROGRAMMING CAT!!! Discussion wrapping up HTML & CSS before kicking of JS

3:24:53 Mobile Screen Sizing

3:26:10 Entry levels will likely be HTML/ CSS

3:26:46 Mobile First Design

3:28:14 100hr assignment Full Stack with Application

3:39.20 JSS ****************************************************************

3:29:22 JSS (The Big Four - Variable, Conditionals, Functions, Loops - Data Structures, Arrays, Objects - OOP - APIs - How to get a Job)

3:39.57 [TIP] Using a Template for a Portfolio

3:31:08 Simple Circuits

3:35:55 True Story - Independence Day Movie

3:39:00 JavaScript

3:41:36 JS Syntax (SemiColon, Brackets, Parentheses, Quotation Marks, Other Unique Characters?) :;{}[]'"||-()*&&%$#!~`

3:43:00 BREAK

3:49:40 [TIP] Book: Eloquent JavaScript

3:51:08 MASTER THE BIG FOUR(Variable, Conditionals, Functions, Loops)

3:51:44 VARIABLES

3:53:38 Variable Syntax: Declaring Variables (LET)

3:54:36 Variable Conventions: camelCase

3:55:27 Variable & Data Types

3:55:31 Strings '' ""

3:56:14 Numbers

3:56:40 Signed

3:56:46 Arithmetic

3:58:00 CODE ALONG: Variable Fun Time

4:03:56 Getting an INPUT from a user & STORING it. <-------------INPUT!!!!!

4:13:50 Making Decisions: CONDITIONALS (==, ===)

4:16:10 Logical Operators (==, ===, !=, !==, >, <, >=, <=)

4:18:44 Conditional Syntax

4:19:16 Conditional Syntax (if, else if else if else if...., else)

4:20:34 Conditional Syntax (Dominos, Papa Johns, Dominoes)

4:23:30 DANGER: Assignment vs. Comparison

4:24:25 Multiple Conditions (example): if(name === "Leon" && status === "Ballin"){}

4:28:40 Multiple Conditions (example):

4:29:00 FUNCTIONS

4:32:48 CODE ALONG: Simple Function Code

4:45:18 BREAK

4:53:16 Pseudo Code

4:56:39 Bachelor Code (Notes: DOM (document.querySelector), INPUT) <---------- DOM??? & INPUT!!!

5:02:43 Loops

5:03:42 Loops: FOR

5:04:58 CODE ALONG: Savage Loop

5:12:00 Loops: WHILE

5:12:16 Arrays

5:13:38 Arrays - are TOASTERS

5:15:10 Arrays - Definition

5:15:50 Declaring Arrays: Array Constructor

5:15:55 Declaring Arrays: Literal Notation

5:16:19 Array Indexing

5:17:52 Array: Accessing elements: []

5:18:28 Array: Updating (adding) to array

5:18:50 Array: Overwriting

5:19:25 Array: Length (.length)

5:20:12 CODE ALONG: In Paradise: after Paradise

5:27:36 Array Iteration

5:28:22 Array Built in METHODS: Iteration <-------NEW INFO!

5:29:24 Array Built in METHODS: Remove Item at FRONT (.shift)

5:29:56 Array Built in METHODS: Remove Item at END (.pop)

5:30:14 Array Built in METHODS: Add Item at FRONT (.unshift)

5:30:26 Array Built in METHODS: Add Item at END (.push)

5:30:50 Array: Other Array Methods: Example: let bestRappersAllTime = bestRappers2020.map(x => 'Dylan')

5:32:22 CODE ALONG: Winter Games << LOOK FOR SEPARATE VIDEO ON WINTER GAMES

5:33:07 Objects

5:34:42 Objects: Definition

5:35:44 Objects: Think of a physical object

5:35:50 Example - Stop Watch.

5:36:50 StopWatch Object << (.notation, .notation for a method as a function) !!!!!!

5:38:34 Creating a lot of Objects: Factory - > Constructor

5:39:10 Object: Constructor

5:41:10 Object: EF6 - replacement SYNTAX for Constructor (syntactical sugar)

>> QUICK REVIEW OF OBJECTS. FOR IN DEPTH, WILL NEED TO REFER TO OTHER VIDEOS

5:44:08 BREAK

5:53:12 APIs ****************************************************************

5:56:14 Definition: A simple interface. Example: Restaurant menu. You pick on thing, complex stuff occurs in kitchen.

5:58:26 URLs. JSON (JavaScript Obj Notation) brings data back from server (from API).

5:59:05 APIs: FETCH - Fetch Fido, Fetch! (FETCH is built into JavaScript)

6:00:54 CODE ALONG: Dog Photos!

6:04:24 APIs: Query Parameters

6:05:38 Why use Objects? Object Oriented Programming (OOP)

6:06:43 OOP ****************************************************************

The Four Pillars

6:08:06 ENCAPSULATION

6:11:56 ABSTRACTION

6:12:28 Abstraction: Hide details and show essentials (Simple, predictable, manageable)

6:12:45 Create New Objects - based on older ones

6:13:08 Eliminate redundant code

6:14:08 INHERITANCE

6:14:54 Code that works with different objects

6:16:15 POLYMORPHISM

6:16:39 Recap: The Four Pillars

>> QUICK REVIEW OF OOP. FOR IN DEPTH, WILL NEED TO REFER TO TWO OTHER CLASSES

******************************************

6:18:52 01. GRAB THE CHECKLIST

6:16:19 Start prepping for interviews NOW

6:20:20 02. PUSH EVERY DAY -

6:20:30 03. HITLIST

6:20:48 04. 100Hours Project

6:21:02 CodeWars C.A.R. (Cause Action Result)

6:21:14 P.R.E.P. (Parameters, Returns, Examples, Pseudo Code)

Crash Course - Back-End

YouTube Label: Back-end Crash Course - Start Your Free Coding Bootcamp Journey Here! #100Devs (HTML, CSS, & JS)

YouTube Link: https://www.youtube.com/watch?v=U8UnY9R9R0E

Slides: https://slides.com/leonnoel/backend-crash-course-100devs

May 02, 2021