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

#html #css #javascript #web-development #developer