[Upcoming] Mon.school course: Fundamentals of Javascript

Mon School
1

PREMISE

  • I have noticed that many people are working with javascript without a good understanding of the fundamentals
  • Hence, this course will only focus on the fundamentals of javascript

COURSE SYLLABUS

The course will mainly focus on the concepts of javascript mentioned in the official documentation
There is also a JavaScript guide available on the website

We can evaluate how well it is structured and make some modifications on that.
Once we are convinced about the course structure, we can create videos for the same.

Apart from the concepts written in the official guide, we will add some other sections to teach the process of learning to the students:

  1. Different ways to set up a local sandbox to test something in js
  2. Exercises for really understanding the concepts (such as testing the edge cases)
  • One example is the article that I have written on variable declarations (var, let and const)
  • it explores the internal workings of javascript and builds a more in-depth understanding of the concept
  1. Special modules for explaining the best practices (and their importance)
  • We will also mention these in the main lecture, but having byte-sized videos/sections about just the best practices related to a concept would benefit skimmers a lot.

SCOPE

We don’t need to cover all the topics in the official guide in our first course.
We can release the course in parts so that we can focus on establishing the fundamental understanding of each concept that we go over.

But at the end of the course, the student would be confident enough to use the documentation on his/her own.
The student would also have gained enough skills to quickly pick up and library.

OUTLINE

  • Introduction to Javascript
    - What is JS and why should I learn it?
    - What all can I build using JS?
    - client-side scripting & SPAs (frameworks like ReactJS, VueJS, AngularJS etc.)
    - backend servers using NodeJS (frameworks like NextJS)
    - serverless API end-points using Cloud Functions, Azure functions, AWS Lambdas etc. (Please suggest any open-source alternatives to list here)
    - Chrome extensions
    - Web-apps for desktop and mobile
    - iOS and Android applications using Cordova powered tools (React Native, Ionic etc.)

  • Getting started
    - Different ways to set up a sandbox (script tag in HTML file (with or without an external .js file), node, browser console)
    - Establishing the background project: what we will be building throughout the course
    - A demo
    - A walkthrough and overview of the concepts that we will use
    - Project setup (comments and documentation)

  • Variables
    - declaration (scope, mutability & redeclaration, hoisting, best practices)
    - data types
    - expressions and assignment (eg. how it is different for primitive and non-primitive data types)
    - comparison operators
    - loops and iteration

  • Errors in JS
    - Error types (what they are and when are they thrown)
    - Error handling

  • Functions and Classes
    - Constructor vs Declaration vs Expression
    - Function scope and best practices
    - Class definition, attributes and methods
    - Subclasses
    - Species, Mixins etc. (optional)

  • DOM manipulation and using Templates
    - Accessing and manipulating DOM elements
    - Browser properties and methods
    - Interaction and navigation (buttons, links and other listeners)

  • Working with data
    - Making basic fetch calls to APIs
    - localStorage, sessionStorage and cookies

  • Modularity & Readability
    - Type checking and Objects.freeze as enum
    - Variable and function naming conventions

  • Conclusion
    - No standard Compiler/Interpreter.
    - Limitations, alternatives and libraries (TypeScript, npm/yarn)

4 Likes
2

Some comments:

  • DOM Manipulation and using templates - this is one of the key applications of JS.
  • Differentiation between JS that runs in the browser and one that runs in the server.
  • Maybe an introduction to front end frameworks?
  • Would be cool if you can structure this around a sample project using vanilla JS
4 Likes
3

Thank you, @Rushabh_Mehta for for your comments.

  • DOM Manipulation and using templates - this is one of the key applications of JS.

This is a wonderful suggestion. I will add it to the course outline. It will be essential for the ‘background project’ as well.

  • Differentiation between JS that runs in the browser and one that runs in the server.

Yes, thanks for pointing this out. I was planning to cover this topic in the lesson “What all can I build using JS?”. Although, originally, I hadn’t planned to go very deep into the implementation details of the different JS interpreters (there are some differences among the JS that runs in different browsers as well, but I was planning to exclude them from the scope of this course).
My motive with the first chapter was to just excite the learner about JS and then quickly get to the part of writing code. This is based on my hypothesis that theoretical lectures hold attention for shorter durations and that going through these details might lead to information overload.

For now, I will just add a theoretical concluding chapter, that superficially covers these topics. Let me know your thoughts about it.

  • Maybe an introduction to front end frameworks?

The official documentation lists client-side JavaScript frameworks in superficial detail. I have decided to exclude this from the scope of this course because I don’t want this course to be superficial.
Again, the lesson on “What all can I build using JS?” will mention some of these names, but without going into any detail.
As discussed in the conversation with @wisharya, we can cover these topics in future courses. I myself have only extensively worked on ReactJS. Hence, for me to able to give any original advice or guidance, I will myself have to learn the other frameworks. Which does not sound like the most productive activity while creating a JS fundamentals course.

  • Would be cool if you can structure this around a sample project using vanilla JS

Yes, I am already planning that. In fact, the title of the 2nd chapter is “Establishing the background project”.

4

“Fundamentals of <language>” courses have the disadvantage that it has to think whether it is for a person who already is used to programming in a different language, or for a person who has never been a programmer.

When you say people working with javascript without a good understanding of the fundamentals, it sounds to me like the audience is people who already know some programming, but just have poor javascript fundamentals.

If that’s the case, it might be useful in each chapter to look at common problems that people without strong fundamentals run into, and then point them to good, idiomatic patterns. In other words, this will have to be a very opinionated course.

If it’s the other case (for a person who’s never programmed before), it has to focus on building mental models in the participant such that they can start appreciating how to talk to computers.

2 Likes
5

Hey @Avikalp_Kumar_Gupta,

Any progress on this course so far?

6

Yes, I have been working on deciding the course outline and content.

I have decided to change the scope of the course a little bit to focus more on implementation based learning as opposed to clarity of the fundamentals, which might become more theoretical than I would like.

I will share the updated outline soon.
We might also have to change the title of the course. As pointed out by @asd, having a “Fundamentals of JavaScript” course comes with the problems of not identifying a specific target audience.
We can name the first course as “Getting started with JavaScript” or “JavaScript 101”.

1 Like