1. Introduction FREE CHAPTER

• What is JavaScript and where can you use it?

2. Editor

• Downloading and installing editor
• Creating the project / structure of project

3. EXTRA: Useful Shortcuts

• Useful shortcuts that will save you tons of time

4. Basics

• Properly embedding JS scripts on your website reducing website loading speed
• Basics: How is your script executed? Whitespaces/semicolons etc.
• Comments
• Variables
• const variables - why and when should you use 'const' keyword?

5. Operators

• Arithmetic operators
• Relational operators
• Logical operators

6. Conditions

• Conditional Statements
• Conditional operator ?:
• Switch

7. Functions

• Functions basics
• Scope of Variables within Functions and Outside of Functions
• let vs var - what is hoisting?
• Function Expressions | Anonymous function

8. Objects

• What are and how to create objects?
• Using an Object Constructor Function (class)
• Adding Properties to Objects using Prototype

9. Arrays

• Arrays
• Useful Array Methods

10. Loops

• What is loop? while and do while loop
• loop for
• instruction break and continue
• loop for/in - used for processing objects
• EXERCISE: Argument Object in function (unlimited number of arguments)

11. DOM (Document Object Model)

• What is DOM / how to obtain content of your website
• querySelector - fast and easy accessing of elements on the website
• Changing dynamically styles of elements using JS
• Adding and removing elements from document
• EXERCISE: Loop inside another Loop - printing out multiplication table

12. Events

• Basics of Events
• 'this' - accessing the element that invoked the event function
• event - VERY IMPORTANT LESSON DO NOT SKIP IT
• Adding and removing event listener
• Event object as an automatically passed argument to function
• Propagating (multiplication of events)
• Preventing browser default action for example blocking context menu
• EXERCISE: Event - 'jump to the top of website' button
• Mouse events - dragging the image
• setTimeout and setInterval - Timing Events
• EXERCISE: upgrading the code from the last lesson to object-oriented way

13. Validating Forms using Events

• How to validate forms? Validating text type input using form-related events
• Stopping form from submitting when any data in a form is not correct
• checkbox
• radio input on terms and condition example
• select (combo box)

14. String

• Manipulating a string using String's methods
• Breaking string in many lines for readability and special characters

15. RegExp

• Regular expressions
• Regexp match vs exec function
• EXERCISE: RegExp on practical example - testing password in input

16. Date

• Time manipulation with Date object
• Exercise: A Clock on your website

17. Cookies

• What are cookies?
• Function for creating cookies
• Function for removing cookies
• Function for finding value of cookie by keyname
• Properly interpreting special characters - EncodeURIComponent method

18. Dialog Window

• Confirm and prompt box

19. Math

• Rounding numbers and the most useful Math methods
• Randomness
• EXERCISE: Random quotes

20. Location

• How to get and change location (URL) of your user?

21. Images

• Loading Images only when needed - save your bandwidth and improve user experience

22. Exercises

• Slideshow
• Slideshow animated in JS using CSS property transition
• Animation using setInterval that is supported in every web browser
• Image gallery with thumbnails
• Tooltip - how to create a hint box?

23. Closures

• What are closures on a practical example?

24. Advanced - Optional Topics

• Bitwise operators

25. EXTRA CONTENT 1: Debugging

• Firebug
• Debugging with console commands
• Great online tools for testing and sharing your code
• strict mode

26. EXTRA CONTENT 2: Best Practices

• Code performance
• Keeping one .js file
• Compressing JS files
• 7 most common mistakes you should avoid
• Changing IDE coloristics - keep your eyes healthy

27. NEW JS Features - NEWEST STUFF

• Nullish Coalescing Operator - ??
• Arrow functions - mapping and filtering arrays
• export vs export default in JS - how to organize code into modules?

28. EXTRA CONTENT: React Basics

• What is a component?
• React fundamentals - the most important lecture for learning React

29. EXTRA CONTENT: Node.js & Vite - React Template

• What is Node.js and npm?
• Installing Vite and React structure
• Single file app to multiple files app - analyzing structure of React project
• How to create a component and connect it to App.jsx

30. EXTRA CONTENT: React Props

• What are props and how to use them?

31. Game in React: AutoClicker Mining Game - PART 1

• Intro: What are we gonna create?
• Ex. Create GoldMiner Main comp
• Gold Miner Power Upgrade
• Updater Functions in React Hooks
• [EXERCISE] Auto Clicker GUI and hooks
• useEffect on practical example: AutoClicker
• Conditionally Disabling a Button in React Using the 'disabled' Attribute

32. Game in React | External Packages: lucide, framer, lodash - PART 2

• Installing lucide-react - let's apply icons to our game
• How to apply CSS to components - className
• Installing Framer Motion in React - let's bring animation to our project!
• Let's add simple animation using Framer Motion to our app

33. Game in React | Refactoring Code | PART 3

• ...animationProps - let's use object destructuring to improve animation work
• lodash.merge package - how to merge props on a practical example
• Creating functional components - let's refactor our code
• util folder with animations.jsx settings for entire app
• AnimatePresence - how to make 'exit' animation
• CSS modules - let's apply scope to our CSS

34. Game in React | Context Provider | Local Storage | PART 4

• Create ThemeToggleButton
• Conditional text - Dark to Light, Light to Dark
• [EXERCISE] Button from external package - change theme with SVG animation
• Separate buttons and see what's happening with 'shared' state
• How to create Context Provider? - Let's create ThemeProvider
• use-state-local-storage - how to implement SAVE system in our game in 5 min?

35. Deployment

• How to build your React app into a static page?

36. Electron in React & Vite

• What is Electron and how to make it run our React app?
• How to build Electron EXE from our React app

37. PWA (Progressive Web Apps)

• What is PWA?
• Transform your HTML/CSS/JS app into a PWA
• NPX - executing package to generate required icons

38. PWA & React - PWAInstallButton - Catching Events in React

• Showcase of a problem - creating PWAInstallButton component (1)
• Controlling visibility of component in React from return statement (2)
• Catching and preventing event (3)
• How to resolve Promise from prompted user to install PWA app? (4)

39. Express - Backend for React

• How to set up Express? How to set up the backend of your app?
• nodemon - how to automatically monitor changes on the server
• Fetching data from a React component from Express
• "Loading" message while fetching data
• React Spinner - let's 'spin' the loading message
• [EXERCISE] React Toastify - notifying user like a pro

40. React - Displaying Lists & Forms in React

• Map - displaying items from lists
• key - how to generate unique keys using uuid
• filter - filtering and removing elements from a list
• New task item - accessing forms using DOM - uncontrolled forms
• useRef - accessing/referencing DOM
• - controlled inputs in React
• - how to create forms in React?
• [EXERCISE] useRef - practical example - refocus
• sort() - how to sort a list?
• [EXERCISE] How to create a toggle asc/desc sorting button

41. Refactoring Code - Splitting Big Components

• Why do we refactor the code? How to do it? A trick to do it faster
• [EXERCISE] - Refactor Task Item Component
• REFACTOR: TaskForm