JavaScript from Beginner to Expert by Udemy
Become a JavaScript expert in 30 days, even if you are a JS beginner. Become a front-end developer of websites in JS
Course Highlights
- You will be able to create tooltips, slideshows, galleries with thumbnails and many more
- You will understand events, variables, objects, arrays, functions, loops, conditional statements, DOM, RegExp, Cookies and use that info in your scripts.
- You will know how to pre-validate all kind of forms and give users information if something is wrong without reloading the website
- You will know how to debug and keep your code performing well
- Quizzes and exercises
- Support from the author
- Organised material taking you from the Beginner to Expert level in Javascript
- let/var/const/hoisting
Skills you will learn!
Overview
How Does This Course Make You Expert?
- It will teach you how to debug and keep your code performing well.
- It will provide organised material that will take you from the Beginner to the Expert level in JavaScript.
- You will learn data types of JavaScript, JavaScript operators, working with DOM (Data Object Model), etc.
- It will teach you how to create slideshows, tooltips, galleries with thumbnails, etc.
- You will understand objects, functions, variables, arrays, events, loops, DOM, and cookies and use that information in your scripts.
- It will teach you how to pre-validate all forms and inform users if something needs fixing without reloading the website.
What Are The Merits of This Course?
To improve the user experience on your website, you can learn JavaScript, which will result in more visitors and sales. It gives your website additional functions that can be executed on the user’s computer without reconnecting to the server.
This is the most organised course that will teach you JavaScript perfectly and make you an expert. You will also understand the jQuery framework better by understanding JavaScript syntax well. You must learn this course to become a front-end developer. You can update the content without reloading the webpage with JavaScript.
Curriculum
2 Topics
Welcome to my JavaScript course
What is Javascript and where can you use it?
2 Topics
Downloading and installing editor
Creating the project / structure of project
2 Topics
Useful shortcuts that will save you tons of time
Useful shortcuts ready to print!
7 Topics
Properly embedding JS scripts on your website reducing website loading speed
Basics: How is your script executed? Whitespaces/semicolons etc.
Comments
Variables
EXERCISE: Calculating Gross Prices with VAT
const variables - why and when should you use 'const' keyword?
Practise your basic knowledge (Updated April 24')
5 Topics
Arithmetic operators
Create a variable that will hold sum of two other variables
Relational operators
Logical operators
Practise your knowledge about the operators (Updated Feb 24')
4 Topics
Conditional Statements
Conditional operator ?:
Switch
Practise your knowledge about the conditional statements (updated Sep 23')
7 Topics
Functions basics
Scope of Variables within Functions and Outside of Functions
Scope of Variables - fast text summary
let vs var - what is hoisting?
let vs var - fast text summary
Function Expressions | Anonymous function
Practise your knowledge about the functions (Updated May 24')
5 Topics
What are and how to create objects?
If your script is not working watch in Event section about onload event
Using an Object Constructor Function (class)
Adding Properties to Objects using Prototype
Practise your knowledge about the objects (Updated Jul 24')
3 Topics
Arrays
Useful Array Methods
Practise your knowledge about the Arrays
6 Topics
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)
Loops quiz (Updated Feb 24')
6 Topics
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
Practise your knowledge about DOM
13 Topics
Basics of Events
'this' - accessing the element that invoked the event function
Why do we use 'this' keyword?
onload 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: onscroll 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
Practise your knowledge about Events
6 Topics
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)
Practise your knowledge about validating forms
2 Topics
Manipulating a string using String's methods
Breaking string in many lines for readability and special characters
4 Topics
RegExp Object reference
Regular expressions
Regexp match vs exec function
EXERCISE: RegExp on practical example - testing password in input
2 Topics
Time manipulation with Date object
Exercise: A Clock on your website
5 Topics
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
1 Topic
Confirm and prompt box
3 Topics
Rounding numbers and the most useful Math methods
Randomness
EXERCISE: Random quotes
1 Topic
How to get and change location (URL) of your user?
1 Topic
Loading Images only when needed - save your bandwith and improve user experience
5 Topics
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?
2 Topics
What are closures on practical example?
Discussion on stackoverflow about closures
1 Topic
Bitwise operators
4 Topics
Firebug
Debugging with console commands
Great online tools for testing and sharing your code
strict mode
5 Topics
Code performance
Keeping one .js file
Compressing JS files
7 most common mistakes you should avoid
Changing IDE coloristics - keep your eyes healthy
5 Topics
Nullish Coalescing Operator - ??
arrow functions - mapping and filtering arrays
export vs export default in JS - how to organize code into modules?
Template literals
Promise & async/await
5 Topics
What is React?
What is component?
React fundamentals - the most important lecture for learning React
[NOTES] React fundamentals - most important definitions
[EXERCISE] Simple Counter in React
5 Topics
What is Nodejs and npm?
Installing Vite and React structure
Single file app to multiple files app - analyzing structure of React project
How to create component and connect it to App.jsx
[NOTES] Description of folders/files created by Vite React template
2 Topics
What are props and how to use them?
[NOTES] Destructing Obj in JS for React purpose
7 Topics
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"
4 Topics
Installing lucide-react - lets apply icons to our game
How to apply CSS to component - className
Installing Frame Motion in React - let's bring animation to our project!
Let's add simple animation using Frame Motion to our app
6 Topics
...animationProps - let's use object destructurization to improve animation work
lodash.merge package - how to merge props on practical example
Creating functional component - let's refactor our code
util folder with animations.jsx settings for entire app
AnimatePresence - how to make 'exit' animation
CSS modules - lets apply scope to our CSS
6 Topics
Create ThemeToggleButon
Conditional text - Dark to Light Light to Dark
[EXERCISE] Button from external package - change theme with svg animation
Seperate 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?
1 Topic
How to build your React app into static page?
2 Topics
What is electron and how to make it run our React app?
How to build Electron exe from our React app
3 Topics
What is PWA?
Tranform your HTML/CSS/JS app into PWA
NPX - executing package to generate required icons
4 Topics
Showcase of a problem - creating PWAInstallButton component - (1)
Controling 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)
7 Topics
How to Setup Express? How to setup backend of your app?
nodemon - how to automatically monitor changes on server
Fetching data from React Component from Express
[NOTES] fetching data
"Loading" message while fetching data
React Spinner - let's 'spin' loading message
EXERCISE: React Toastify - notifying user like a pro
3 Topics
react-use Hooks
React TypeScript Cheatsheet
Useful browser plugin
2 Topics
Some ideas of where you can use JS
What after this course?
1 Topic
Bonus: Links to my other courses
JavaScript from Beginner to Expert
Related JavaScript Courses
.webp)
Frequently Asked Questions
This course will never expire, as you’ll get lifetime access to this course.
Yes, you will get a participation certificate after completion of this course.
This course is for people new to JavaScript, who want to increase their existing JavaScript knowledge, who wish to make academy projects in JavaScript, etc.
It takes around six to twelve weeks to learn this course in JavaScript.
By learning JavaScript, you will find a job easily, as JavaScript is the most demanded language by employers.
Thank You!
Your review has been submitted successfully.