JavaScript Beginner Bootcamp (2024) by Udemy
JavaScript for Beginners: Projects based learning, whiteboard animations, coding in the browser and quizzes.
Course Highlights
- Learn basics of JavaScript
- Create Interactive Webpage and deploy to the web
- Build projects as you learn concepts to get a taste of building applications on a small scale
- Become interview ready with whiteboard algorithm challenges
- Build a Portfolio Page with HTML & CSS
- Visually understand the JavaScript Language
- Look under the hood to understand how JavaScript works
Skills you will learn!
Overview
What You Will Learn from the course?
- Learn the JavaScript basics
- Create an interactive webpage and also deploy the web.
- Learn how JavaScript works.
- Help you become ready for an interview with the challenges of the whiteboard algorithm.
- Understand JavaScript visually
More About Course
It is not the only JavaScript course that you can take, but it should be your first! If you want to understand the basics of JavaScript in detail, then this is the course you should opt for. You can start from scratch and understand the most popular programming language in the world.
View whiteboard videos optimized for mobile viewing to see JavaScript in action. This is a course that you can participate in no matter where you are. Carry your learning of JavaScript with you! Whiteboard films allow you to see the inner workings of JavaScript.
JavaScript is available for practice on your web browser! Utilize the developer tools Google Chrome offers to apply the JavaScript you learned in our whiteboard classes with additional examples and tasks. This is our playground for JavaScript.
There will be numerous quizzes covering the syntax of JavaScript that we have just studied. This course is designed to move slowly so that you can repeat these concepts & syntax until they become second nature.
You can also find several mini-projects that allow you to apply the JavaScript you are learning to build something you can use. We focus on small to medium-sized projects appropriate for students learning JavaScript at the basic to intermediate level.
What is the Requirement of the course?
- Google Chrome Browser
- There is no need for any prior experience in coding
Who Can Join This Course?
- JavaScript newbies
- Someone even with no previous experience
- Coders who want a visual or hands-on environment playground to reinforce what they have learned.
- Someone interested in building a portfolio page with CSS and HTML.
- Someone who wants to learn by viewing whiteboard videos optimized for tablets and smartphones.
- Someone who is interested in leaning to build the first JS app.
Curriculum
1 Topic
Course Overview
15 Topics
Variables
Navigating to new lines in the Chrome Console
Variables Lab
Variables Quiz
Variables Cheat Sheet
Strings
Strings Quiz
Strings Lab
Strings Cheat Sheet
Operators
Operators Quiz
Operators Lab
Increment & Decrement Operators
Increment and Decrement Operators Quiz
Operators Cheat Sheet
4 Topics
Mini Project: Kelvin to Fahrenheit
Mini Project: Kelvin to Fahrenheit - Video Review
Mini Project: Cat Years
Mini Project: Cat Years - Video Walkthrough
10 Topics
Objects
Objects Quiz
Objects Lab
Objects Cheat Sheet
Objects - Dot & Bracket Notation
Object Dot and Bracket Notation Quiz
Objects Dot & Bracket Notation Lab
Object Constructor Functions
Object Constructor Functions lab
The Secret Life of JavaScript Primitives
9 Topics
Arrays
Arrays lab
Arrays Quiz
Array Methods Part 1
Array Methods Part 1 lab
Array Methods Quiz
Array Methods Part 2
Array Methods Par 2 lab
Arrays Review
2 Topics
Mini Project: Random Insult Generator
Mini Project: Random Insult Generator - Video Review
6 Topics
Functions
Functions lab
Functions Deep Dive - Expressions Anonymous functions & IIFEs
Functions Deep Dive lab
Function Scope
Function Scope lab
6 Topics
Mini App: Bear Human Gun Game
Mini App: Bear Human Gun Game - Video Walkthrough
Bear Human Gun Step by Step Walkthrough
Mini App: Calorie Calculator
Mini App: Calorie Calculator - Video Walkthrough
Calorie Calculator Step by Step Walkthrough
6 Topics
Loops - Conditional Statements & Operators
Loops Part 1 lab
Switch Statements
Switch Statements Lab
Loops Part 2 - For Loops While Loops & Do/While
Loops Part 2 lab
2 Topics
Magic Eight Ball
Magic Eight Ball - Video Walkthrough
2 Topics
Regular Expressions Intro
Regular Expressions Resource
4 Topics
This & Bind
This & Bind Lab
This & Call
This & Call Lab
8 Topics
Functional Programming Part 1 - Intro and Filter
Functional Programming Part 1 lab
Functional Programming Part 2 - Map
Functional Programming Part 2 - Map
Functional Programming Part 2 lab
Functional Programming Part 3 - Reduce
Functional Programming Part 3 lab
Array Methods - Further Reading
6 Topics
Identify Unique String
Identify Longest Word in a String
Permutation of Two Strings
Sum of Range
Remove Elements From Head
Palindrome
11 Topics
Let Statements
Let Statements Lab
Const Declaration
Template Literals
Template Literals Lab
Arrow Functions
Arrow Functions Lab
Spread Operator
Spread Operator Lab
forEach Method
forEach Method Lab
36 Topics
Environment Setup
Name Swap - Built in Functions
Name Swap - Built in Functions - Final Code
Name Swap - Indices
Name Swap - Indices - Final Code
Remove Odd Number from Array with Modulus Operator and For Loops
Remove Odd Number from Array with Modulus Operator and For Loops - Final Code
Remove Odd Numbers from Array with Filter Method
Remove Odd Numbers from Array with Filter Method - Final Code
Repeat a String with for loop
Repeat a String with for loop - Final Code
Repeat a String with while loop
Repeat a String with while loop - Final Code
Find the Longest String with replace method and regular expressions
Find the Longest String - Final Code
Find the Longest String with replace method and regular expressions with For Of
Find the Longest String Part II - Final Code
Alphabetize String with sort() method
Alphabetize String - Final Code
Alphabetize String with sort() method and spread syntax
Alphabetize String Part II - Final Code
Watch and Code - Section
Reverse a String
Filter Strings in an Array
Find Largest Number in an Array - Codepen
Find Largest Number in an Array
Reverse a String with built in functions
Reverse a String with built in functions - Final Code
Reverse a String with spread syntax
Reverse a String with spread syntax - Final Code
Reverse a String with for loop
Reverse a String with for loop - Final Code
Reverse a String with for of loop
Repeat a String with for of loop - Final Code
Is Palindrome?
Palindrome - Final Code
3 Topics
Introduction to the DOM
DOM tree nodes
More About Nodes
18 Topics
Release Schedule for Todo List App
Todo List Project Overview
Lesson Two - document.querySelector() and document.getElementById() methods
Lesson Two - Quiz
Lesson 3 - Changing the DOM with document.textContent property
Lesson Three Quiz
Lesson 4 - More DOM methods and properties
Lesson 4 - Quiz
Lesson 5 - User interaction and event listeners
Lesson 6 - Working with Forms
Setting Up Dev Environment
Todo App without Local Storage
Lesson 8 - Local Storage
Todo App with Local Storage
lesson 10 - CSS
lesson 11 - Hosting
lesson 12 - Sharing Your Code
Release Schedule for Todo List App
10 Topics
Matching Intro
Matching Part 1
Matching Part 2
Matching Part 3
Matching Part 4
Matching Part 5
Matching Part 6
Matching Part 7
Matching Part 8
Matching Part 9
5 Topics
Quote Machine HTML & CSS
Quote Machine HTML & CSS - Video Walkthrough
Quote Machine - JavaScript
Quote Machine - JavaScript - Video Walkthrough
Deploy to Netlify
9 Topics
Project Prerequisites
Dog Therapy Preview
Dog Therapy Preview - Video Walkthrough
JSON Data and AJAX Requests
JSON Data and AJAX Requests - Video Walkthrough
How to Make an AJAX Request with the fetch() Method
How to Make an AJAX Request with the fetch() method - Video Walkthrough
Build and Style our Page with HTML & CSS
Dog Therapy - JavaScript
1 Topic
Front End Website Overview
10 Topics
Text Editor
HTML Intro
HTML Elements and Tags
HTML Comments and Structure
HTML Header
HTML Hero
HTML Services
HTML About
HTML Testimonials
HTML Footer
8 Topics
CSS Intro
Full Course Code
CSS Header
CSS Footer
CSS Hero
CSS Services
CSS About & Testimonials
CSS - Internal Navigation
15 Topics
CSS Animations
CSS Animations - Video Walkthrough
CSS Animations Challenge
CSS Animations Challenge Video Walkthrough
CSS Transitions
CSS Transitions - Video Walkthrough
CSS Transitions Challenge: transition-function-timing
CSS Transitions Challenge - Video Walkthrough
Debugging
Debugging - Video Walkthrough - Part 1
Debugging - Video Walkthrough - Part 2
Debugging - Video Walkthrough - Part 3
Keeping Time with Moment.js
Keeping Time with Moment.js - Video Walkthrough - Basics
Keeping Time with Moment.js - Video Walkthrough - Christmas Countdown
4 Topics
New Instructor - John Smilga
Svelt Info
Section Requirements
Text Editor Setup
48 Topics
Intro
Starter Application
Folder Structure
Setup Files
Add Global CSS & Font Awesome
Component Overview
Navbar Component Intro
Navbar Component
Title Component
Props Basics
CSS
Each Block
Expenses Data
Expenses Component
Else and Passing Props
Expense Component
If Block
Events
Component Communication
Props Drilling
SetContext and GetContext
createEventDispatcher
Clear Expenses Button
Reactivity
Form Setup
Two Way Binding
Empty Values Functionality
Form Submission
Add New Expense
setModifiedExpense
Pass Edit Values into Form
editExpense
Toggle Form
Lifecycle Functions
Setup Local Storage API
afterUpdate
slot basics
Complete Modal
Transition Basics
Transition Parameters
Transition - in: and out:
Modal Transitions
Simple Expense Transition
Key Expression in Each Block and Animate
HTTP Request using onMount
HTTP Request using #Await Blocks
Deploy on Netlify - Drag and Drop
Deploy on Netlify - Continuous Deployment
92 Topics
Instructor Introduction
Project Demonstration
Intro
Intro
Setup Files
Bootstrap Svelte Application
Folder Structure and Resources
Setup Project Pages
Svelte Router Setup
Url Parameters
Hero Component
Local Data Structure
Svelte Store Benefits/Basics
Products Store Setup
Flatten Products
Store Unsubscribe
Store Unsubscribe Shorthand
Products Component Complete
Single Product Complete
Loading Component
Featured Products
Derived Stores
Single Product Page
svelte:head element
Small Navbar
Cart Button
Big Navbar
Links
Toggle Navbars
Basic Sidebar
Global Store Basics
Global Store Method
Setup Close Sidebar Function
Sidebar Transitions
Cart Basics
Cart Structure
Cart Store Initial Setup
Cart Items
Single Cart Item
Cart List Transitions
Cart Total
Remove Item
Increase Amount
Decrease Amount
Decrease Amount Refactor - OPTIONAL
Add To Cart
LocalStorage Setup
User Store Setup
Login/Logout Links
Checklist
Strapi Info
Bootstrap Strapi App
Products Content Type
Add Products
API Access
getProducts
Products Store
Image Problem Fix
Login Page - Variables
Login Page - HTML
Login Page - Basic Functionality
Login - General Overview
registerUser Function
loginUser Function
User Store Update
setupUser Function
navigate
Alert Basics
Configure Alert
Alert with Form Sumbissions
Close Alert Programmatically
Double Check Login Functionality
Checkout Page Overview
Checkout Page Basics
Restrict Access
Empty Cart
Checkout Form - Basic Setup
Setup Stripe Account
Stripe Elements - HTML
Stripe Elements - Javascript
Stripe Token
Empty Cart Error
Submit Order Function
Complete Submit Order
Complete App
Free Claudinary Account
Connect Claudinary with Strapi
Free Heroku Account
Install Heroku CLI
Deploy Strapi on Heroku
Setup Backend
Deploy Svelte APP on Netlify
45 Topics
Getting Started From Scratch with React
React Code
Challenge - Using JSX
Code Refactor
Rendering One Element
Rendering Multiple Elements
Babel and React
Creating Functional Stateless Components
Stateless Functional Components Practice
Creating Class Components
Creating Class Components Practice
Styling Stateless Functional Components
Styling within Components
Styling Class Components
Building Your First Complex Component
Setting Up a Project
Building Our Components
Styling Our Components Part I
Styling Our Components Part II
Props Part I - Stateless Functional Components
Props Part II - Class Components
Props Part III - Color Spectrum Refactor
CodePen Challenges
CodePen Challenge I
Challenge 2
Challenge 3
Challenge 4
Challenge 5
Capstone Project - Image Links
Props Project
Iterating Through Lists
Iterating Through Lists Refactor
Filter and Map method on an Array
Rendering Two Filtered and Transformed Lists to the DOM
CodePen Challenge I
CodePen Challenge II
Color Spectrum Refactor
FriendLy App Refactor with Map method
FriendLy - Filter and Map two Lists to the DOM
Useless Note Take - Introduction to React Events
React Events Part II
Guess My Age - Intro to State
Meal Voter
React Forms
Ajax Requests and the Fetch API
1 Topic
Whitespace - New
JavaScript Beginner Bootcamp (2024)
Related JavaScript Courses
Frequently Asked Questions
Yes, you can create interactive web pages.
Yes, anyone who wants to learn the course can do so without any prior experience in coding.
You can learn about the basics of JavaScript, create interactive web pages, build portfolios with CSS and HTML, and how this even works.
All you need is a Google Chrome Browser to join the course.
Yes, it is essential as it offers basic knowledge about coding, and one should know about it.
Thank You!
Your review has been submitted successfully.