Become a Front End Web Developer - JavaScript for Beginners

Best JavaScript course for beginners with step by step instructions. Learn basics, ES6, DOM and AJAX with mini project.

4.45 (292 reviews)
Udemy
platform
English
language
Web Development
category
Become a Front End Web Developer - JavaScript for Beginners
25,861
students
15.5 hours
content
Feb 2022
last update
$49.99
regular price

What you will learn

Fine grained steps and instructions to learn JavaScript

Learn statements and code execution flow

Learn to implement mathematical calculations using Literals and Arithmetic Operators

Learn to use Variables

Learn code reusability using Functions

Learn to implement decision making using Conditional Statements

Learn to repeat statements using Looping constructs

Learn to implement multiple values using Array

Learn object oriented programming using Object and Class

Learn ES6 features - Module, let, const, Arrow Function and Template String Literals

Learn to work with Numbers, String, Array and Dates

Learn to manipulate HTML and CSS using Document Object Model (DOM)

Learn to implement getting data from network using JSON, XMLHttpRequest and fetch

Learn basics of HTTP protocol and HTTP method types

Learn to implement a beginner level project Tic-Tac-Toe

Description

What learners say about this course?

"Excellent explanation.I understood well. It's definitely helpful for everyone. Thank you so much sir"

"Overall, a great course so far! I've learned a lot about the front end concepts, and this course seems to be beginner-friendly, as it's my first time exploring it and I don't have much troubles understanding the material. Thank you for sharing your knowledge!"

Beginner friendly course

If you are from a non-IT profession and you want to shift to application development, then this is the course for you.

  • The topics are clearly structured.

  • Appropriate instructions and opportunity provided to the learner to code along with the instructor.

  • Guided implementation of case study and project.

About JavaScript

According to StackOverflow Developer Survey, JavaScript is the Most Popular Technology during 2020. Most popular websites use JavaScript. As of 2021, around 97.4% of websites use JavaScript.

Using JavaScript you can develop web applications, mobile applications, desktop applications and server side programming.

It is easier to get started and learn JavaScript.

What is in this course?

The following are the major areas covered in this course:

  1. Programming Fundamentals

    • Statements, Code Execution Flow, Literals, Arithmetic Operators, Variables, Function, Conditional Statements, Loops, String, Array, Object, Class, Module, Arrow Function, Variable Scoping, Numbers and Dates

  2. Web Page manipulation using DOM (Document Object Model)

    • Learn manipulating HTML elements

    • Learn to handle DOM events

    • Implement 2 Case Studies and an Exercise

  3. Getting data from server (Using XMLHttpRequest and fetch)

    • Learn about getting data from server

    • Understand about REST API and JSON

    • Implement making REST API call using XMLHttpRequest and fetch

    • Implement case study that searches countries

    • Implement an exercise to search street names in France

    • Understand basics of HTTP protocol and HTTP method types

The above topics helps you to become a Front End Developer.

This course does not cover the desktop application development, mobile application development and server side programming.

During this learning journey, you are provided with:

  • 36 Exercises

  • 3 Case Studies

  • 1 Project (Tic-Tac-Toe game)

Content

Introduction

Introduction
What you will learn?
Learning Environment
Setting up your course
Install Chrome
Download Visual Studio Code
Install Visual Studio Code Editor - Windows
Install Visual Studio Code Editor - Mac
Quick Launch Visual Studio Code
Install 'Live Server' Extension for Visual Studio Code
GitHub Code Reference

An introduction to JavaScript

Significance and Origin of JavaScript

Statements and Code Execution Flow

Display Hello World in console
Create Folder
Open 'javascript' folder in Visual Studio Code
Create HTML file
Key in the code
Launch HTML using Live Server
Place Visual Studio Code and Chrome browser adjacently
Placement of Script tag
JavaScript is Case Sensitive
Code Execution Flow

Literals and Arithmetic Operators

Introduction
Temperature Conversion Calculation
Create HTML file
Difference between a String Literal and Numeric Literal
Understanding Arithmetic Addition and String Concatenation
Code to display Celsius
Calculation code for Fahrenheit
Understanding Operator Precedence
Fix Fahrenheit calculation issue
Summary
EXERCISE #1 - Area of Rectangle
EXERCISE #2 - Percentage of Boys and Girls
EXERCISE #3 - Find left over Apples

Variables

Limitations of Fahrenheit conversion code
Implementing Variables
Defining multiple variables
String variable and Variable Naming Convention
Multiple variable definitions in a single line
EXERCISE #1 - Area of Rectangle
EXERCISE #2 - Percentage of Boys and Girls

Function

Significance of Function
Define Function
Call Function
Function with Parameter
Call Function from another Web Page
Steps to implement External Script
Function definition in Script File
Move Function to Script file
Refer Script File from HTML
Additional information about External JavaScript File
Return Statement in a Function
Code Execution Flow of a Function
About Functions and Function Naming Conventions
EXERCISE - Area of Rectangle

Conditional Statements

About Conditional Statements
Problem Statement to learn Conditional Statements
Implement 'if' statement
Explain 'if' statement
Implement 'if' statement for raining check
Implement Logical NOT operator
Explanation for Logical NOT operator
Implement 'else' block
How 'else' block works?
Implement Equal (==) operator
Implement Strict Equal (===) operator
Comparison Operators
Logical Operators
About Pipe Character
Problem Statement - Airlines Infant Policy
Implement Infant Passenger age check
Implement Adult Passenger age check
Airlines Policy for Child Passenger
Implement Child Passenger age check
Implement Airlines Policy using if .. else if
Benefit of if .. else if
Implement Ternary Operator
How Ternary Operator works?
Explanation for switch .. case statement
Summary of Conditional Statements
EXERCISE #1 - Find positive, negative and zero using 'if' statement
EXERCISE #2 - Find positive, negative and zero using 'if .. else if'
EXERCISE #3 - Find if a number is Odd or Even
EXERCISE #4 - Find Cash Back using Ternary Operator

Loops

Importance of Looping constructs
Displaying Numbers
Displaying Numbers using 'while'
How 'while' loop works?
Displaying Numbers using 'do .. while'
Displaying Numbers using 'for'
TV Schedule dates display
TV schedule dates display solution
TV schedule dates display - Working Code Explanation
How increment and decrement operators work?
Assignment Operators
EXERCISE #1 - Display odd numbers using 'while'
EXERCISE #2 - Display odd numbers using 'for'
EXERCISE #3 - Print line

Array

Significance of Arrays
Define array and display
Read array item values
Modify and add array item values
Calculate student height average using array
Read array items using 'for' loop
Calculate average using 'for' loop on array
Find array length
Iterate array using for .. of
EXERCISE #1 - Print days of week
EXERCISE #2 - Print days of week with serial number
EXERCISE #3 - Print days in a line
How to find Median?
EXERCISE #4 - Solve Median for odd number of items
EXERCISE #5 - Solve Median for both odd and even number of items

Object

Importance of Objects
Limitations of Variables and Arrays
Define object for one passenger
Additional passenger details
Define additional passenger details in object
Define gender object
Define passenger array
Define all passenger objects into an array
Summary about objects
Explain e-commerce products for Exercise
EXERCISE #1 - Define category objects
EXERCISE #2 - Define vendor objects
EXERCISE #3 - Define product objects

Class

Additional feature for passenger object
Display full name for a passenger object
Function to display full name of a passenger object
Define function within object
Limitation of object
Define class
Define constructor
Create object from a class
Code execution flow for object creation from class
Difference between class and object
Create gender objects
Define passenger class and create objects
Define function within passenger class
Create multiple passenger objects based on class
Benefits of using class
EXERCISE - Create e-commerce product objects using class

Module

Introduction
Limitations of externalizing class definition
Externalizing Gender and Passenger class definition
Complexity explained using Airlines operations
Implement module
EXERCISE - Convert e-commerce classes to use Module

Variable Scopes

Understanding Variable Scopes
Understanding Global Scope and Functional Scope
Understanding Block Scope using 'let' and 'const'
'let' vs 'var'

Arrow Function

Introduction
Function assigned to a variable
Arrow function with curly braces
Arrow function without curly braces
Arrow function with parameter
EXERCISE - Area of Rectangle

Working with Numbers

Representing large numbers
Standard Positional Numeral System
Convert Decimal number to Integer
Finding not a number
Miscellaneous details about numbers
EXERCISE #1 - Earth Mass
EXERCISE #2 - Find ladder length

Working with String

Single and Double Quote characters within string
Other backslash options
String is an object
String is immutable
Reading a character from string
Change case
Find string in another string
Built-in functions to extract string
Understanding 'substr' function
Understanding 'substring' and 'slice' functions
EXERCISE #1 - Display characters of a string line by line
EXERCISE #2 - Count the present of character 'e'
EXERCISE #3 - Is website secure?
EXERCISE #4 - Find positions of a character
EXERCISE #5 - Extract domain name from website address
EXERCISE #6 - Print words of a sentence

Working with Arrays

Introduction to array functions
How pop() function works?
How indexOf() and includes() functions work?
How forEach() function works?
How find() function works?
How filter() function works?
How map() function works?
How join() function works?
Implement reduce() function
How reduce() function works?
Sorting array of text
Sorting array of numbers
How custom compare for sorting works?
Explain how sorting and comparison works
Implement compare function to compare numbers
Sorting objects

Working with Dates

Date object creation
Getting data from Date object
Conversion of Date object to other formats
Locale specific date conversion
Customized date print function
Date object creation using string and specific date field values
Date creation using timestamp
Setting specific date field values
Conversion between date and string
EXERCISE - From and To Date validation

Document Object Model (DOM)

What is 'Document' in 'Document Object Model'?
What is 'Object Model' in DOM?
About DOM
'window' object
Using 'window' object
'window' object reference is optional
Get HTML Element using id
Access and modify text content of HTML Element
Access and modify HTML content of HTML Element
Access and modify attribute value of an HTML Element
Access and modify value of Input HTML Element
Access and modify style definition of HTML Element
Access and modify class definition of HTML Element
Getting HTML elements using class name
Miscellaneous functions to get HTML elements

DOM Events

What are DOM events?
Implement mouse click event
Link event with a funciton
Implement event using Event Listener
Event when typing in Input Text field

DOM Case Study #1 - Airlines Infant Policy

Airlines Infant Policy Web Page
Define HTML
Get HTML Elements
Include click event
Include category computation logic
Display Category in Web Page
Demonstration of displaying Category as we type 'age'
Implement Category display as we type
Issue Demonstration - Category not cleared after clearing age
Fix the Category non-clearance issue
Importance of validating data entered by user
Include HTML tag for displaying validation error message
Get the validation error message HTML element
Hide the validation error message
Implement validation

DOM Case Study #2 - Search Student

Demonstrate Search Student Web Page
Define HTML
Hide display of student name list
Get HTML elements
Implement Event Listener
Search Student Solution Explained
Looping through each student name
Implement filtering of student names
Implement case insensitive filtering of student names
Implement click event to select a student name
Display selected name in the search input text field

DOM - Exercise and Conclusion

EXERCISE - Website Navigation
DOM Projects and Conclusion

Network and calling REST API

Getting data from Server
Demonstration of Interactive Web Page
Understanding REST API and JSON
Countries REST API
GitHub REST API
Finding REST API
Understanding XMLHttpRequest
Sending request to REST API
Implement synchronous call to get REST API data
Comparing Synchronous and Asynchronous
Implementing Ready State Change listener
Ready State explained
Getting response data asynchronously
AJAX - Timelines
REST API call using 'fetch'
Explain 'fetch'

Country Search Case Study

About Country Search Case Study
Get HTML source code
HTML content explained
Clear country display and error message
Include search 'keyup' event
Countries REST API call explained
Check minimum two characters entered for Search
Create dynamic endpoint based on search key
Make the Countries REST API call
Convert JSON response to JavaScript object
Examine the properties of response data
Display responded country names in console
Display country names in web page
Display country names with styles
Display all country details
Display languages for each country
Implement using Template String Literals
Clear countries with single character search key
Examine when error is responded
Display message when no countries are found
Create new source file to implement using 'fetch'
Make REST API call using 'fetch'
Include code to display data fetched
Modify code to use properties from object return by fetch
EXERCISE - Search Streets in France

XMLHttpRequest or fetch

XMLHttpRequest vs fetch
Understanding call back hell
Advantages of using 'fetch'
Browser compatibility of 'fetch'

Hyper Text Transfer Protocol (HTTP)

Introduction
Postal delivery process
HTTP Request and Response message
Content of HTTP Request
Content of HTTP Response
Viewing HTTP Headers in Browser
HTTP Method Types
HTTP POST Request
PUT and DELETE request
XMLHttpRequest and 'fetch' for any HTTP method type

Project - Tic-Tac-Toe

About Tic-Tac-Toe
Download HTML
HTML Walkthrough
Getting Started
Handle Box Click
Code Snippet for Box Selection
Issue when selecting already selected Box
Solving selection issue
Identifying next steps after box selection
Logic to find Winner
Solution to find Winner
More details about finding winner
Code Snippet for finding Winner
Selection issue after game is over
Solving selection issue after game is over
Handle Reset button
Handle Game Draw

Conclusion

Course Conclusion

Reviews

Jihad
August 9, 2023
I can't believe all this stuff in one course, it's amazing, it's like learning and gaining experience at the same time.
Teja
June 29, 2023
I am happy that such courses are available for me to enrich my skills...Its user friendly platform. Its an understandable language to listen what instructions are given by the professor. Helpful course... Thank for providing..
Carlos
January 24, 2023
This is a verry good course not only for begginers but even for intermediate JS developers. It helps you not only with the code but understanding the core concepts of the Internet and specific of the JavaScript.
Mohamed
March 20, 2022
This course helped me to learn JavaScript in an easy and practical. Thank you sir. Keep up the good work :)
Kamesh
February 4, 2022
very easly to learn to beginner we give tips basic step by step. All are easily understand and simple to use we give tips
Balogun
January 10, 2022
The facilitator takes you on a journey of understanding the core principles of a concept. The video lectures were easy to understand and the way at which the facilitator instruct me to do the exercises really helped me a great deal to understand what is expected of me and how to do the exercises. I really love this course!
Robert
September 1, 2021
The explanation was clear and understandable, but the software used (Google Chrome & Visual Studio Code) is different than the ones I use for development and learning (Opera Browser & Notepad++)
Aditya
August 27, 2021
The course is very nice and beginner's friendly. Please make a course on React JS and also coa u suggest what Javascript we can apply on your Strat Hawk website.
Blanc
June 29, 2021
Overall, a great course so far! I've learned a lot about the front end concepts, and this course seems to be beginner-friendly, as it's my first time exploring it and I don't have much troubles understanding the material. Thank you for sharing your knowledge!
Nandini
June 27, 2021
Content is organized in a easily understandable format. Author explains in detail on all aspects which really gives a seamless learning experience.

Coupons

DateDiscountStatus
6/28/2021100% OFF
expired
7/31/2021100% OFF
expired
9/4/2021100% OFF
expired

Charts

Price

Become a Front End Web Developer - JavaScript for Beginners - Price chart

Rating

Become a Front End Web Developer - JavaScript for Beginners - Ratings chart

Enrollment distribution

Become a Front End Web Developer - JavaScript for Beginners - Distribution chart

Related Topics

3706014
udemy ID
12/15/2020
course created date
6/21/2021
course indexed date
ANUBHAV JAIN
course submited by