12HR+ YouTube Coding Bootcamp 2021 (video)

#tutorial #javascript #codenewbie #css

Just bring your laptop!

Hello everyone and welcome to this online Coding Bootcamp. This Bootcamp has been designed specifically to make your coding journey easier by utilising all of YouTube functionalities such as the Timestamps and Cards.

We will be using the Timestamps to break up our Bootcamp into sections, so that you can easily navigate to and from each one using the description below. I will also be using Cards in order to direct you to an external project you can try, based on where we are in our Coding Journey.

I have also provided Code Sandboxes at the bottom for those stuck on code setup for the learning sections. I would advise to always type out the code to each exercise yourself, but as a safety net, they are provided as well.

This 12hr+ Bootcamp is unsponsored and free and will always be free, so if you enjoy it please do give a big thumbs up and Subscribe!

Content:
00:00 Introduction
03:34 Code Editors
-- HTML --
06:05 HTML Introduction
08:22 HTML Boilerplate setup
10:55 HTML Elements
17:53 Online Portfolio Project
-- CSS --
20:05 Check-in
21:02 CSS Introduction
23:37 File set up
27:42 Class names and Id's
30:48 Pop Quiz
37:52 Box Model
39:56 Colours
44:12 Unordered and Ordered Lists
49:33 Images
54:22 Styling classes as id's
57:07 The Data property
59:00 Flexbox
01:01:45 Pop Quiz
01:03:41 Flexbox website layout
01:09:43 Commenting out Code
01:13:37 Gradients in CSS
01:15:53 Box Shadows in CSS
01:17:18 Button Styling in CSS
01:25:51 Fonts
01:29:25 Generic Website Layout
01:34:28 Making a NavBar
01:46:54 Anchor Links
01:50:17 Creating Sections
02:13:50 Forms in CSS and HTML
02:26:55 Font Awesome
02:32:12 Break points
02:38:35 Z-index
-- JAVASCRIPT --
02:49:24 Check-in
02:51:07 Introduction to JavaScript
02:52:12 JavaScript file setup
02:58:39 Variables
03:16:15 Control Flow
03:16:40 If Statements
03:26:09 Operators
03:55:39 Fizz Buzz Exercise
04:00:59 for loops
04:07:58 Arrays
04:14:42 Objects
04:24:50 Functions
04:37:51 A Progress Exercise
04:48:20 Arrow Functions
04:52:21 While loop
04:55:23 Built-in-Objects Introduction
04:56:02 .length()
05:01:29 .concat()
05:06:41 .join()
05:12:06 .pop()
05:18:46 .shift()
05:22:13 .unshift()
05:25:32 .push()
05:29:02 .slice()
05:35:51 .splice()
05:41:47 .forEach()
05:50:25 .some()
05:59:49 .map()
06:07:19 .filter()
06:17:06 .reduce()
06:22:27 .every()
06:28:25 .split()
06:34:25 Array work - Exercises to practise
07:18:06 .addEventListener()
07:26:09 .removeEventListener()
07:33:57 querySelector()
07:39:59 Check-in and Project suggestion
07:40:51 Math.random()
07:53:08 Let's make a Responsive Burger NavBar
08:10:12 Date
08:19:29 setTimeout()
08:29:00 setInterval()
08:44:11 Classes in JavaScript
08:52:16 Check-in and Project suggestion
08:52:58 Keys
09:01:46 switch case
09:22:51 .sort()
09:24:52 Introduction to Algorithms
09:25:16 .includes()
09:27:34 .contains()
09:29:52 .createElement()
09:38:22 Check-in and Project Introduction
10:27:07 Check-in and Project suggestions
10:28:16 Introduction to HTTP
10:36:55 fetch(). GET POST PUT DELETE
11:07:24 Check-in and video suggestion
11:07:53 Storing Projects on GitHub
11:15:58 Where to go next

Code Sandboxes:
at 04:05: To get started: https://codesandbox.io/s/tender-tdd-nwg7v
at 02:53:49: JavaScript set up: https://codesandbox.io/s/distracted-field-vcliy
at 04:40:24: Functions Exercise : https://codesandbox.io/s/eager-tu-t2691

Generic Sandbox Setup: Use your coding skills to change the HTML and CSS to whatever you need for the exercise using this as a template: https://codesandbox.io/s/hopeful-shadow-f5pvv

Memory Game final code: https://github.com/kubowania/memory-game