171
Lectures
23
Hours

The course is not done yet. New lectures are added daily. The expected number of lectures is 150+

What is Javascript?

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.


What are you going to work on?

In this course, we will cover six big topic groups. Every section contains a lot of assignments and code exercises.

The final project is a web application to display products for users to buy. For the entire course length, you will work on one application. We will start simple with console application and finish with React JS, an excellent styled application.

You will see how your application evolves, what techniques are required, and how everything connects in the end. You will get a complete understanding of the programming process.


1. JS Basics

In this part, you will learn the basics in the Javascript programming language, but you will also get programmatic thinking that can help you start with any programming language.

The focus of this section is to think like the programmers and not repeat code without understanding.

Some of the topics from this section are:

  • computing history, variables, primitive types, functions, parameters, 

  • objects, arrays, conditionals, logical operators, classes, inheritance, prototypes

  • debugging, scope, call stack

2. HTML Basics

This part of the course covers the core part of HTML. You will learn and understand how to structurize HTML documents. 

This part covers:

  • dom (document object model), document object,

  • elements + functions

3. CSS Basics

To make the website look professional, you need to apply "style." In this section, you will learn how to use stylings effectively.

You will now learn how to use the two most used stylings: flex and grid.

4. HTML + JS

The central part of modern frameworks like Angular, Vue, or React is to create seamless interaction of JS with HTML without you even noticing.

This part will teach you how things work behind the scene. You will use javascript to render HTML elements dynamically.

The main topics of this section are:

  • HTML nodes, dynamic elements

  • "mini" JS framework, modularity, 

  • ES and Common modules

5. Web server  + Webpack

In this part, we will first cover communication on the internet from the perspective of client->server. You will learn how your computer requests the remote server to display any website on the internet.

Then we will create our custom Web Server, which will serve our HTML project, which we created in the sections before.

Later in the section, we will dive into Webpack. Webpack is a  bundler, and we will use it to bundle our javascript code together. You will learn how to write a javascript, which was impossible to write before.

  • client->sever, servers

  • Node JS, Webpack, 

6. React JS

The final part of this course will cover React JS library. You will learn to use React JS to create web applications with ease. You will create a final version of your web app. In the end, everything will connect, and you will understand how React JS works.

  • React JS

  • Hooks, State

  • Reactivity

It will be a long journey, but you will become developers in the end.

Requirements

  • No requirements! Learn everything in the course.

Course curriculum

  • 1

    Introduction

  • 2

    Computing Introduction

  • 3

    JS Primer

    • Create Project

    • First line of code

    • JS file

    • Primitive Types part 1

    • Primitive Types part 2

    • let

    • Semicolon

    • Functions

    • Assignment 1

    • Assignment 1 Solution
  • 4

    Functions & Objects

    • Function params

    • Return and Debugging

    • Simple product

    • Objects

    • Access object property

    • Display product

    • Function to create product

    • Default parameters

    • Assignment 2

    • Assignment 2 Solution
  • 5

    Arrays & Logical Operators

    • Arrays

    • Array indexing

    • Conditional drilling

    • If statement

    • Logical operators

    • Assignment 3

    • Assignment 3 Solution
  • 6

    For Loops

    • For Loops

    • More Loops

    • Display Product Info
  • 7

    More about Objects

    • Object functions - methods

    • This + Display info

    • Constructor function

    • Prototype

    • Value vs Reference
  • 8

    Class and Inheritance

    • Class

    • Inheritance

    • Class prototype
  • 9

    Debugging

    • Call stack, scope, debugging

    • Stack overflow

    • Assignment 4

    • Assignment 4 Solution

    • Template Strings

    • Super

    • Super function call

    • Pass values to super

    • Assignment 5

    • Assignment 5 Solution
  • 10

    HTML

    • DOM and Html

    • Dom Tree

    • Assignment DOM

    • Assignment DOM Solution

    • More about html
  • 11

    CSS

    • Css

    • Css Classes

    • More Styles

    • Css in separate file

    • Paddings Margins

    • Page Css

    • Padding Margin for each side

    • More Elements

    • Div and Inline Div

    • Absolute position

    • Additional position
  • 12

    Flex

    • Flex Start

    • More Flex

    • Justify Content

    • More justify content

    • Flex 1

    • Flex 2

    • Align self

    • Cleanup

    • Assignment 6

    • Assignment 6 Done

    • Cleanup after assignment
  • 13

    HTML + JS

    • Click on Element

    • Callback functions

    • More callback functions

    • Arrow Functions

    • Get elements by class

    • Add product row

    • Create product row

    • Create product element

    • Append more elements

    • Create Text Node

    • Add all fields
  • 14

    Product Values

    • Use ForEach

    • Create more products

    • Two items per row

    • Provide product value

    • Product Grid

    • Create element wrapper
  • 15

    Custom Looping Functions

    • Modularity

    • Modularity part 2

    • Custom forEach start

    • Iterate items in custom loop

    • For each done

    • Custom Map function

    • Assignment Reactivity

    • Assignment done
  • 16

    Async, Promise

    • Provide raw data

    • Move Data

    • Blocking of HTML

    • Set timeout and interval

    • Retrieve data with callback

    • Promises

    • Await

    • Mini assignment

    • Catch Error in Promise

    • Function chaining

    • Try Catch
  • 17

    Data Fetching

    • JSON Data

    • Fetch data

    • Is on stock assignment

    • Assignment is on stock complete
  • 18

    Function Like Components

    • Function like components

    • Product Item Function

    • Product Item Props

    • Ternary operator provide class

    • Remove Product Instance

    • Fetch Products Separation

    • Reactivity Dom Improvement

    • Product Page

    • Hide functions

    • Framework + Modularity
  • 19

    Node JS

    • Server and node init

    • Common JS

    • Import export

    • Npm package

    • Create simple server

    • Return page from server

    • How to communicate on internet

    • Webpack configuration

    • Webpack dev server

    • Folder structure explanations

    • Express server

    • Default Export
  • 20

    React JS

    • React JS

    • Passing Props

    • Compile JSX

    • More JSX

    • JSX Maps

    • Children

    • Refactor App
  • 21

    Create React App

    • Create react app

    • Moving code to new app

    • Counter app

    • Counter increment button

    • Use State

    • Assignment State

    • Counter View

    • Use Effect

    • Dependency array
  • 22

    React and Product App

    • Back to App Assignment

    • Bulma Css

    • Assignment Cards

    • Styling improvements

    • Navbar

    • Columns Improvements
  • 23

    Filter Products

    • Input

    • Search value

    • Filter Items

    • Filtering done
  • 24

    Github and Deployment

    • Github

    • More github

    • Prod server

    • Course Done

Instructor(s)

Software Engineer

Filip Jerga

Hey, I'm Filip Jerga! I've been deep in the software engineering world for over 10 years, building all sorts of cool stuff—from software for ultrasound devices with C++ to modern apps with React and Angular. I even grabbed a Master's in AI along the way. What really drives me now isn't just coding; it's making complex programming simple and fun for you. I've poured all my real-world experience and a passion for teaching into these courses. My goal is to help you think like a pro, tackle tough problems, and build practical skills you'll truly use to create amazing things.