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

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.