Javascript Bootcamp — Basics to Pro | Syllabus

Mastering the Basics

I tried documenting all the references for each concept talked about here. Many of the examples used are from the javascript documentation itself. However, the projects will be unique and tailored to your personal interests. The goal here is to quickly give you the documented examples, deconstruct and explain with real-world examples and get you practicing it asap.

Realistic Expectations —

Like anything else, this is going to take time and dedication to learn and master. Now before you give up I wanted to reassure you that mastering proficiency in the core concepts within 30–90 days is completely possible. However, prior to being hired at an agency or confidently going after higher-paid contracts the combination of taking on smaller projects and dedicating time each week for practice will, over time, lead to the skill capacity desired by employers.

So, how much should you dedicate weekly to master this new skill? If you are a complete neophyte to STEM then this may be a bit more challenging however still possible to achieve.

I will give two basic scenarios and expectations:

Option One —

More than 20 hours a week each week

30 days to master the core concepts and 1 year to become extremely adept

Option Two —

Less than 20 hours a week each week

60–90 days to master the core concepts and 1–3 year to become extremely adept

WOAH WOAH WOAH…. I thought you said 90 days max to master proficiency in the core concepts? Well… yes. The core concepts are the basics, gaining the skill capacity desired by employers takes a bit more effort and dedication. Instead of thinking that 1 or even 3 years is long, consider this alternative perspective. IT'S ONLY TAKING YOU 1–3 YEARS TO COMPLETELY CHANGE A NEW PROFESSION.

Software development is a fast-growing career with high demand (I MEAN HIGH DEMAND). The average salary for jr engineers/developers are between $50k — $80k and more advanced engineers/developers are above the $100k threshold [1].

Pre Requisites

I will go over the prereqs for every section within the syllabus, but universally a fundamental understanding of software concepts is helpful in addition to having critical thinking and problem-solving skills which is why higher mathematics is usually expected.

Methodology

The instructive methodology I decided to implement reflects much of how I go about learning new concepts, anyway. I take broad strokes at the subject and conduct an 80/20 analysis of the concepts leading to proficiency. There are usually a minority of concepts needed to grasp a greater than 80% understanding of a new subject. This means learning more by learning less [2][3]. As a computer engineer and software developer, you will quickly reconceptualize your world to adjust to your new mental framework. You will attack problems more critically and look for the most efficient and effective solution to your problems.

So, I focused on curating content that best reflects this 80/20 approach. I will briefly mention the more critical info in the initial section and also create cheat sheets listed below the section, similar to what I use when studying and learning. However, I strongly suggest you take a more active role in learning by building your own cheat sheet to reference when building in addition to just implementing hours on the screen (either building or reading code).

Objectives

The objectives are listed in the corresponding sections of the syllabus. However, I aim to teach you by the end of this Bootcamp how to master the basics of javascript in the Basic Section, be able to confidently build websites and basic web apps for clients within 3–6 months in the Moderate Section, and build fully-fledged web apps — even native apps — using frameworks like React and React Native in the Advanced Section.

Limitation

The basic limitation is yourself in this instance. You determine how many hours you dedicate to learning and practice, thus determining the timespan needed to master proficiency in this new skill.

Limitations for the course are listed in the corresponding section but the primary limitations are highlighting basic concepts like HTML and React. Since this Bootcamp is specific to javascript I did not want to dilute the instruction by focusing on HTML/CSS concepts or diving deep into teaching the React framework (which is what's used in the advanced section). So I do suggest you look at these resources to assist you in the corresponding sections:

HTML For Beginners:

CSS For Beginners:

React For Beginners:

After completing the Basic section leading into the Moderate section you should quickly grasp the concepts of HTML and CSS, plus I teach you about packages which make both concepts much easier to implement.

React is a framework for javascript, so its just javascript with slightly different nuances. Go through the React for Beginners course to get the concepts but you will be shocked at how similar it is to vanilla js and jquery.

Basics

Objectives:

The core objective of this particular section is to teach and engrain the basic core concepts of javascript into your brain! These are the foundational building blocks of your applications. Think of this section as words, sentences, paragraphs, and then a book. Each concept builds on each other to complete a robust book — or in our instance an application.

• Vanilla Javascript basics

Prerequisites

There are absolutely no prereqs for this section, however, having basic STEM understanding and some higher mathematical experience is helpful, but NOT mandatory to learn and complete this section successfully. Yes, even the great Joe Exotic could learn and master this section with the consistent dedication of hours on screen practicing the concepts about to be taught.

https://www.texasmonthly.com/wp-content/uploads/2019/05/EXOTIC_Joe-Exotic-5.jpg

Limitation

The obvious limitation is that this section will only equip you with the foundational tools necessary to build anything meaningful. However, we will learn how to build some basic projects that you could actually use in your daily life. Nevertheless, at this stage, you are limited to pretty basic functionalities and design.

01 Types of Languages

1. Project Usecase

https://www.javascripting.com/

02 Setting up Your Environment

1. Installing VSCode
2. Coding Environment Variations
3. Our Environment
4. First Application

03 Data Structures & Objects

1. Type vs Non-Type
2. Primitive Types
3. Objects (everything else)

04 Operators

1. Basic Operators
2. Comparison Operators
3. Advanced Operators

05 JS Statements

1. Declarations & Functions
2. Iterations
3. Control Flow

06 Methods & Functions

1. Function Expression vs Declarations
2. Functions
3. Nested Statement Scope
4. Call Back Fn
5. Methods

07 Built-in Objects

1. List of Top Used
2. List of Rest (resource)

08 Creating Objects

1. Type of Functions
2. Object Literals
3. This Keyword

09 Objects-Oriented Programming

1. Classes
2. Enhanced Methods

10 Errors & Handling

1. Parse Time vs Run Time
2. Try
3. Catch
4. Throw
5. Finally
6. Others

11 Mini Project

1. Build Together
2. Choose Your Own [list of project ideas]

Moderate

Objectives:

The objectives for this section of the “Bootcamp” is to get you proficient in building websites, learning DOM and DOM manipulation to create a robust user experience, learning about packages, and how they assist you to build more by doing less and build basic web apps with limited functionality. We will also explore concepts that will be covered in greater detail in the advanced section.

• HTML/CSS Basics
• Jquery — User interaction/events

Pre request

Having mastered organized a comprehensive understanding of the Basic Section allows you to easily jump into this part of the Bootcamp. I also listed the HTML/CSS resources above for you to look through as we are primarily focusing on jquery in this section and user interaction. I will be building a website, so your understanding of basic HTML/CSS is encouraged, but not 100% needed for this stage.

Limitation

These are fully functional websites or basic static sites. After finishing this section and practicing for several weeks you should gain the knowledge and skillset needed to build robust websites for future clients (yes these two sections equip you with the knowledge to build websites and scout contracts). However, you are limited to the functionality that you can deploy on these sites and the overall security is low.

01 HTML — Quick Overview

1. Tags & CSS - Structuring content and making content look good
2. Tag Structure
3. CSS Basics

02 DOM

1. Types of Manipulation (Change CSS, Add content, react to user events)
2. Exercise for Each ^
3. Practice Exercise

03 Modules & Packages

1. Overview (Greater Detail in Advanced Section)
2. Jquery
3. Other Packages

JavaScript modules

04 JSON

1. How to Use
2. JSON to String and Back
3. Other Types

05 Database Introduction

1. Organization — Tables and Records
2. Fields & Values
3. Operations — Sorting, Fetching/Adding,
4. DBMS — Intro Firebase
5. Flat DB vs Relational DB
6. Example
7. Advanced Info:

06 Generators & Iterators

1. Syntax
2. Yield

07 Async / Await

1. Synchronous vs Asynchronous
2. Promise
3. Then
4. Additional Info:

08 Decorators

1. Subclassing
2. Decorating
3. Higher-order Fn — See Callbacks

09 Deploy a Site

1. Firebase Introduction
2. Command Lines

10 Concurrency model and the event loop

This stuff is additional info that could be used in the future, but for now, you do not need to know these as well as you do the other subtopics mentioned.

Concurrency model and the event loop

11 Memory Management

Additional Info:

Memory Management

12 Strict Mode

This one may be useful for you to understand when you see it while reading code. In short, it parses through the code and detects more bugs than otherwise. Most bugs are found in comparing data types that are not identical. Here is a quick example:

'strict mode'

var a = 0
var b = '0'
const compare = (a,b) => {
   else if (a === b) {
      console.log('a === b')
   } else {
      console.log('a != b')
   }
}

compare(a,b)
// Expected Result: 'a != b'

Additional Info:

Strict mode

12 Mini Project

1. Build a Site

Advanced

Objectives:

In this last and final section of the “Bootcamp”, we are going to dive into learning a robust framework. We will briefly cover the React framework basics, talk about app planning, cover cloud functionality, using authentication, and learning advanced techniques for communicating objects across your app.

Pre request:

You need to understand HTML/CSS and have mastered the Basics from section one. Also in section two (Moderate) you should have mastered the basic concepts of databases, using and manipulating external data, decorators (or Higher-order Functions), and learn how to communicate data to and from a server from the client.

Limitation:

This section does not give a thorough explanation of React. If you continue to use react as a preferred framework and dive into the hybrid language of react-native then you may be limited at producing a fully native iOS or Android application. Otherwise, this section could potentially (with practice over time) get you developing relatively robust applications with highly desirable functionality and equip you with the skillset sought after by reputable employers.

01 React.js & React Native — Basic Overview

1. Refer to Basics 01 for frameworks
2. JSX — vDOM
3. Components & Props
4. State — Data & UI (dynamic data)
5. Nesting Components
6. Functions as Props & Updating State

02 App Planning

1. Defining the Purpose & Goals
2. Defining the Core Functionality
3. Flow Chart of User Navigation
4. UI Design
5. UI/UX Building & Testing
6. Build Backend/Core Functions
7. Database Management
8. Add Auth
9. Beta Test
10. Launch

03 Server vs Client

1. Quick Overview

04 Setting up Your Environment

1. NPM Intro
2. Project Folder — src Folders
3. Hello World — Exercise

05 Class vs Constructor Functions

1. When to Use?
2. Lifecycle of Component

06 Set up Nav Components

1. React-Router-Dom — npm
2. Router, Switch, Link, Redirect

07 First Screen — Main/Dash/Home

1. Piecing it together

08 Other Screen Component

1. Repeat 07

09 Link Pages — React-Router-Dom

1. Link in the app.js file
2. to Address

10 Finish Other Components

1. Repeat 07 (perhaps not UI based components)

11 Make Components Functional

1. Look at Step #6 in App Planning

12 Add Dummy Data

13 Create a Store

1. Communicating data from components
2. Store/Action/Reducer
3. Thunk
4. HoCs

14 Creating a Firebase Project

1. Setting up the FB Console
2. Linking the Project
3. Security Rules
4. Creating an instance
5. Creating the DB & Calling the data

15 Async Code with Redux

1. Using Thunk
2. Halt Dispatch to Run Asynchronously

17 Connecting Redux to Firestore/Firebase

1. React-Redux-Firebase
2. Redux-Firestore
3. Enhancing the Store & Actions

18 Add & Call Data from Firebase

1. Adding to the Database
2. Calling from the Database

11 Setting up Firebase Auth

1. Firebase Auth
2. Sign up/Sign In With Email & Password

19 Signup, Sign in, Sign out

1. Firebase Auth
2. Creating a User Document in the Users Collection

20 Connecting Firebase Auth to Redux

1. Tracking Auth State

21 Route Guarding

1. Using Auth is Loading or Redirect

22 Security

1. Rules

23 Cloud Functions

1. Set up Environment (firebase-tools)
2. Two Trigger Types
3. Securing Functions

24 Sorting Firestore Data

1. Order List
2. Filtering Methods

25 Deploying

1. Init & Deploy

26 Mini Project

1. Small App

References

https://www.glassdoor.com/Salaries/entry-level-software-engineer-salary-SRCH_KO0,29.htm

https://www.amazon.com/80-20-Principle-Secret-Achieving/dp/0385491743

https://www.amazon.com/4-Hour-Workweek-Escape-Live-Anywhere/dp/0307465357

Thanks for reading! If you enjoyed this article, make sure to applaud us down below! Would mean a lot to me and it helps other people see the story.

Connect with me:

Instagram| Twitter| YouTube| Group Chat

Written by: Angel Mondragon.