Javascript Tutorial and Projects Course by Udemy
Learn Javascript by Building 30+ Interesting Projects
Course Highlights
- students will know what is Javascript
- students will know how to add Javascript to their projects
- students will know the basics of working with Javascript
- students will build projects using Javascript
Skills you will learn!
Overview
More about the course
This JavaScript course stands out as an exceptionally interactive learning experience. With over 140 coding challenges, you'll develop crucial muscle memory for JavaScript, ensuring a solid grasp of the language.
So say goodbye to "tutorial hell" and prepare to increase your JavaScript powers drastically.
Starting projects from the start is another unique feature of this course. Instead of dull theoretical classes, you'll build things and solve problems.
After finishing, you will feel confident in your JavaScript skills and be ready to step into React or Vue or continue your JavaScript career.
How Does It Enhance Your Skills?
This course goes beyond the typical lesson, so get ready for a life-changing educational experience. Working on a number of meticulously designed real-world projects will help you learn the ropes of JavaScript and get a feel for how to put what you've learned into practice.
You will be able to master the ins and outs of contemporary web development and be prepared to take on the problems of real-world apps thanks to this practical method, which helps you form a stronger bond with the content.
Curriculum
5 Topics
Intro
Goals
Structure
Video Blur Fix
Course Review
8 Topics
Intro
Install Google Chrome
Install VS-CODE
VS-CODE Overview
Install Live-Preview
Install Prettier
Emmet
My Setup
41 Topics
Basics Intro
Basic Project
Inline Javascript
Internal Javascript
External Javascript
Cleanup Workspace
Helper Methods
Statements and Comments
Variables
Assign Variable Value Later
Variable Naming Rules
const let var
Challenges Intro
Variables Challange
Prettier Settings
Quotation Marks
String Concatenation
String Concat Challenge
Numbers Basics
Numbers - Additional Features
Numbers Challenge
Implicit Type Conversion
Data Types
Arrays
Array Challenge
Functions - Declare Invoke
Functions - Parameters Arguments
Functions - Return
Function Expressions
Function Challenge
Objects
Object Challenge
Conditional Statements - Basics
Conditional Statements Continued
Equality
Logical Operators
Switch Statement
Conditionals Challenge
while Loops
do while loops
for loop
33 Topics
Connecting The Dots
String Properties and Methods
Template Literals
Strings Challenge
Array Properties and Methods
Exercise - Full Name
Exercise - Calculate Total
Value vs Reference
Null and Undefined
Truthy and Falsy
Ternary Operator
Global Scope
Local Scope
Variable Lookup
Callback Functions Higher Order Functions
Array Iterators
forEach
map
filter
find
reduce
Array Challenge - Intro
Array Challenge - Setup Data
Array Challenge - Multiple Files
Array Challenge - Map
Array Challenge - Filter
Array Challenge - Filter Alternative Syntax
Array Challenge - Find
Array Challenge - Reduce #1
Square Bracket Notation
Array Challenge - Reduce #2
Math Object
Date Object
40 Topics
DOM - Intro
DOM - General Concepts
Window and Document Overview
Get Element By ID
Get Elements By Tag Name
Get Element By Class Name
Query Selector and Query Selector ALL
Navigate the DOM - Children
Navigate the DOM - parentElement
Navigate the DOM - nextSibling previousSibling
Navigate the DOM - nextElementSibling previousElementSibling
textContent nodeValue
getAttribute() setAttribute()
classList and className
createElement - createTextNode - appendChild
insertBefore
replaceChild
prepend innerText
remove removeChild
innerHTML and textContent
Change CSS with style property
Events Overview
Click Event
Function Reference
Mouse Events
Key Events
Event Object
CurrentTarget vs Target
Event Propagation - Bubbling- Capturing
Event Propagation Example
Forms
Local Storage
Local Storage With Multiple Values
setTimeout
setInterval
Events - "DOMContentLoaded"
Events - "load"
Events - "scroll"
Width Height GetBoundingClientRect
Events - "resize"
75 Topics
Intro
Starter Project
Setup
Color Flipper - Simple HTML
Color Flipper - Simple Javascript
Color Flipper - Hex
Counter HTML
Counter JS
Reviews HTML
Reviews JS
Navbar HTML
Navbar General Concepts
Navbar JS
Sidebar HTML
Sidebar Manual Setup
Sidebar JS
Modal HTML
Modal Challange
Modal JS
Questions HTML
Questions General Concept
Questions JS - Traversing the DOM
Questions JS - Using Selectors Inside the Element
Menu HTML
Display Items When Page Loads
Refactor
Filter Buttons HTML
Filter Buttons JS
Dynamic Filter Buttons
Unique Categories
Dynamic Filter Buttons Complete
Video Intro
Video HTML
Video Overlay Setup
Video JS
Video Preloader
Scroll Intro
Scroll HTML
Scroll - Setup Date
Scroll - Toggle Simple Setup
Scroll - Toggle Dynamic
Scroll - Fixed Navbar
Smooth Scroll Setup
Smooth Scroll Complete
Tabs HTML
Tabs JS
Countdown HTML
Set Date
Calculate Remaining Time
Time From Now
Lorem Ipsum HTML
Lorem Ipsum JS
GroceryBud - Intro
GroceryBud - HTML
GroceryBud - Select Elements
GroceryBud - addItem Setup
GroceryBud - truthy shortcut
GroceryBud - display alert
GroceryBud - addItem
GroceryBud - setBackToDefault
GroceryBud - clear items
GroceryBud - select edit and delete buttons
GroceryBud - delete item
GroceryBud - edit item
GroceryBud - localStorage info
GroceryBud - addToLocalStorage
GroceryBud - removeFromLocalStorage
GroceryBud - editLocalStorage
GroceryBud - load items from localStorage
Slider Intro
Slider HTML
Slider General Concepts
Slider JS Setup
Slider JS - Slides Approach
Slider JS - Button Approach
3 Topics
Netlify Intro
Drag and Drop Option
Continuous Deployment
15 Topics
Intro
Object Basics
Nested Objects Bracket Notation
'this' - Keyword Basics
"this" - Keyword Advanced
Factory Functions
Constructor Functions
Constructor Property
Prototype Property
Property Lookup
ES6 Class Syntax
Call
Apply Arguments
Bind
Button Example
17 Topics
Intro
Setup
Counter - HTML
Counter Setup
Counter - Select Elements
Counter - Functions
Counter - Complete
Counter - Class Refactor
Gallery Intro
Gallery - HTML
Gallery - Select Elements
Gallery - Open Modal Setup
Gallery - Open Modal Complete
Gallery - Close Modal
Gallery - Prev and Next
Gallery - Select Images
Gallery - Class Refactor
6 Topics
Intro
IIFE
Hoisting
Closure
Closure - Basic Example
Closure - Complete Example
34 Topics
ES6 Module Intro
VAR LET CONST
Function Scope and Block Scope
Template Strings
Template Strings - HTML
Tagged Template Literals
Arrow Functions - Basics
Arrow Functions - Objects and "this"
Arrow Functions - Select Elements and "this"
Default Parameters and Hoisting Gotchas
Array Destructuring
Swap Variables
Object Destructuring
Destructuring Function Parameters
New String Methods
"for of" - Loop
Spread Operator - Basics
Spread Operator - Objects
Spread Operator - DOM Elements
Spread Operator - Functions Arguments
Rest Operator
Array.of
Array.from - Strings and Arguments Object
Array.from - DOM Elements(NodeList)
find findIndexeverysome
"for in" - Loop
Object.keys()
Object.values()
Object.entries()
new Set() - General Overview
new Set() - Use Case
String includes()
Array includes()
Important Info
23 Topics
Projects - Intro
Numbers - Intro
Numbers - Setup
Readme
Numbers - HTML Structure
Numbers - Select Elements
Numbers - Initial Variables
Numbers - Complete
Dark Mode - Intro
Dark Mode - Setup
Dark Mode - HTML Structure
Dark Mode - Toggle CSS
Dark Mode - Import Data
Dark Mode - Render Items
Dark Mode - Moment.js
Filters - Intro
Filters - HTML Structure
Filters - Display Products
Filters - Text Filter
Filters - Let and Original Array
Filters - Empty Array
Filters - Display Buttons
Filters - Buttons Filter
5 Topics
Intro
Setup
Named Export
Default Export
Get Element
11 Topics
Intro
Synchronous
Recipe Example
Asynchronous
Callback Hell
Callback Hell - DOM Example
Promises
Important Unsplash API update !!!!
Reject Example
Promises - DOM Example
Async/Await
11 Topics
Intro
AJAX HTTP API
Simple Text
Add Button
JSON
Fetch
Fetch - Errors "gotcha"
Fetch - Big Picture
Fetch with Function
Fetch - with async/await
Try / Catch
43 Topics
AJAX Projects - Intro
Dad Jokes - Intro
Dad Jokes - HTML Structure
API Fundamentals
Dad Jokes - Docs
Dad Jokes - Select Elements
Dad Jokes - Fetch Random Joke
Dad Jokes - Loading
Dad Jokes - Try / Catch
Dad Jokes - Throw New Error
Products - Intro
Products - HTML Structure
Products -Possible AJAX States
Products - API Docs
Products - Fetch Products
Products - Loading and Error
Products - Start Function
Products - Display Products
Products - Query Params
Products - Single Product HTML
Products - Initial Logic
Products - Fetch Product
Products - Display Single Product
Products - Display Colors
Random User - Intro
Random User - HTML
Random User - API
Random User - Select Elements
Random User - Fetch User
Random User - Display User
Cocktails - Intro
Cocktails - Setup
Cocktails - HTML
Cocktails - API
Cocktails - Present Drinks
Cocktails - Fetch Drinks
Cocktails - Display Drinks
Cocktails - Search Form
Cocktails - Loading
Cocktails - Set Drink
Cocktails - Single Drink HTML
Cocktails - Single Drink
Cocktails - Display Single Drink
1 Topic
More Projects - Intro
8 Topics
Intro
Starter Project
HTML Setup
Display People
Apply CSS
Next Slide
Next Slide - End of Array
Prev Slide
8 Topics
Intro
Starter Project
HTML
Sidebar Toggle
Sidebar Complete
Submenu Setup
Submenu Links
Submenu - Hide and Column Layout
8 Topics
Intro
Starter Project
Setup
Fetch Followers
Display Followers
Paginate - Create Pages
Display Buttons
Button Functionality
6 Topics
Intro
HTML Structure
API Docs
Initial Setup
Fetch Pages
Render Results
47 Topics
Intro
About
Starter Project
Setup
Starter Overview
Navbar Hero - HTML
Sidebar HTML
Sidebar Toggle
Cart HTML
Cart Toggle
About Page
Important Info !!!
API Overview
Featured Products - HTML
Fetch Products
Setup Store
Exports - Alternative Syntax
LocalStorage
Featured Products
Display Products
Format Price
AddToCart Setup
Product HTML
Display All Products
Page Loading
Filters HTML
Search Filter
Companies Filter
Price Filter
Single Product - Overview
Single Product - HTML
Single Product - Initial JS
Single Product - Fetch Product
Single Product - Fetch Error
Single Product - Complete
setupCart - Initial Setup
addToCart - Setup
addToCartDOM
addToCart - Totals
setupCart - init
Cart - Update Items
Cart - Remove Item
Cart - Increase Amount
Cart - Decrease Amount
Products Page Fix
Bug Fix 2
Finished Project
1 Topic
Bonus
Javascript Tutorial and Projects Course
Related JavaScript Courses
Frequently Asked Questions
JavaScript is maybe the most versatile programming language because it works in the browser and on the server. All web developers must know JavaScript, and employers value it.
You don't have to get or download JavaScript.
It is advisable to adhere to the suggested order of courses, as each subsequent course is designed to build upon the knowledge and skills acquired in the preceding one.
No, regrettably, university credit is not offered for the successful completion of this Specialization.
It is best to follow the recommended sequence of courses because each one builds on the information and abilities learned in the previous one.
Thank You!
Your review has been submitted successfully.