The JavaScript Bootcamp: Build 20 Real World Projects

Focused View

Pianalytix .

30:59:26

170 View

1. Course Introduction

1. Course Introduction.mp4

02:03

2. Course Outline.mp4

01:54

2. Project-1 Create a Simple To Do List Application With JavaScript

1. A Brief Introduction - To Do List App.mp4

01:54

2. HTML Structure And Elements.mp4

05:05

3. Inserting List Items Into DOM.mp4

08:34

4. Scrambling List Items.mp4

07:21

5. Styling The App Using CSS.mp4

11:57

6. Drag And Drop Functionality.mp4

10:26

7. Checking Order.mp4

04:10

8.1 Sortable List Web App Code.zip

8. Download The Project Files.html

3. Project-2 Build An Analog Clock With JavaScript

1. A Brief Introduction to Application.mp4

01:30

2. A Look At Basic Math Involved In Analog Clock.mp4

05:22

3. Creating HTML and CSS.mp4

08:38

4. Adding the Hour, Minute and Second Hand.mp4

10:28

5. Writing JavaScript to Make the Clock Tick.mp4

08:16

6. Summarizing the Application.mp4

02:02

7.1 Build Analog Clock Code Files.zip

7. Download The Project Files.html

4. Project-3 Build a JavaScript Booklist Application From Scratch

1. A Brief Introduction..mp4

04:59

2. Folder Structure and Designing Heading of the Page.mp4

10:11

3. Adding Content to Page with HTML.mp4

09:33

4. Creating Book _ UI Class in JavaScript.mp4

10:38

5. Adding Event Listener to Display Books.mp4

11:58

6. Displaying User Input Values In Table.mp4

11:38

7. Adding Delete Function and Validation.mp4

10:18

8. Showing Failure Alerts.mp4

15:37

9. Showing Success Alerts.mp4

07:09

10. Dealing With Local Storage.mp4

17:57

11. Summarizing the Application.mp4

05:33

12.1 Booklist App- Project Code,Files.zip

12. Download The Project Files.html

5. Project-4 Build a JavaScript Booklist Application From Scratch

1. Introduction to Application.mp4

10:48

2. Folder Structure and Basic Layout.mp4

08:48

3. Adding Content to the Page with HTML Part 1.mp4

12:31

4. Building the HTML Part 2.mp4

07:18

5. Creating Object for Individual To-Dos.mp4

11:04

6. Creating function for storing and fetching data from Local Storage.mp4

10:34

7. Displaying List Items from Local Storag.mp4

07:25

8.1 Custom music player -Project Code Files.zip

8. Download The Project Files.html

6. Project-5 Create Custom Music Player In JavaScript

1. Introduction to Application.mp4

06:57

2. Folder Structure And Basic Layout.mp4

14:03

3. Creating Play, Pause, Next, Previous Icons with HTML.mp4

07:49

4. Designing the Applicatio using CSS.mp4

12:01

5. Fetching HTML Element using Query Selector.mp4

09:24

6. Adding Functions to Play, Pause, Next _ Previous Buttons.mp4

10:27

7. Adding Event Listeners to Buttons.mp4

11:55

8. Updating Music Current Time with Click On Progress Bar.mp4

13:57

9. Creating Playlist Section.mp4

10:23

10. Playing A Particular Music on Click.mp4

11:25

11. Summarizing the Application.mp4

09:57

12.1 Dictionary -Project Code,Files.zip

12. Download The Project Files.html

7. Project-6 Code a Dictionary App In JavaScript Using API

1. A Brief Introduction.mp4

06:45

2. Folder Structure _ Basic Layout.mp4

13:36

3. Designing the Application Part 1.mp4

13:33

4. Designing the Application Part 2.mp4

12:53

5. A look at the APIs.mp4

12:01

6. Generating Meaning of Word Using API.mp4

10:21

7. Displaying Word and Phonetics from API.mp4

10:01

8. Displaying Meanings and Synonyms.mp4

13:13

9. Handling Corner Cases in Application.mp4

12:10

10. Displaying Error Messages.mp4

14:11

11. Summarizing the Application.mp4

08:15

12.1 Simple To Do List Project Code Files.zip

12. Download The Project Files.html

8. Project-7 Code a Snake Game from Scratch in JavaScript

1. Introduction to Application.mp4

05:59

2. Folder Structure and HTML.mp4

10:26

3. Creating Board for the game using CSS.mp4

13:47

4. Displaying the Head and Food of Snake.mp4

10:33

5. Deriving Logic for Snake Food.mp4

16:16

6. Moving the Snake Around.mp4

10:27

7. Adding the Game Over Condition.mp4

10:32

8. Counting the Score.mp4

06:46

9. Storing High Score in Local Storage.mp4

09:51

10. Updating High Score.mp4

03:41

11. Summarizing the Application.mp4

09:15

12.1 Snake game -Project Code, Files.zip

12. Download The Project Files.html

9. Project-8 Building an Action Game in JavaScript

1. Introduction to Applcation.mp4

06:49

2. Folder Structure and HTML.mp4

10:35

3. Displaying the Dragon and Dino using CSS.mp4

13:05

4. Making Dinosaur Jump using JavaScript.mp4

10:31

5. Adding Animations to Obstacle.mp4

10:44

6. Determining Condition for Collision.mp4

06:20

7. Adding Right and Left Movement for Dino.mp4

06:04

8. Updating Score and Increasing Speed.mp4

08:38

9. Adding Game Over Sound and Message.mp4

09:48

10. Summarizing the Application.mp4

11:36

11.1 Action Game-Project Code,Files.zip

11. Download The Project Files.html

10. Project-9 Create a Quiz Web Application using JavaScript

1. Introduction to Application.mp4

08:59

2. Creating Home Page.mp4

10:59

3. Designing the Background.mp4

10:12

4. Designing the Buttons on Home Page.mp4

11:17

5. Creating the Quiz Page.mp4

08:48

6. Designing the Quiz Page.mp4

10:25

7. Creating Questions for Quiz in JavaScript.mp4

08:52

8. Getting New Questions.mp4

11:02

9. Checking Correct Answers.mp4

14:12

10. Creating End Page using HTML..mp4

08:50

11. Designing the End Page.mp4

06:16

12. Adding JavaScript to End Page.mp4

08:16

13. Displaying Leaderboard.mp4

08:43

14.1 Quiz web app -Project Code, Files.zip

14. Download The Project Files.html

11. Project-10 Create a Food Recipe App using Vanilla JavaScript

1. Introduction to Application.mp4

06:17

2. Folder Structure and Basic HTML Layout.mp4

09:32

3. Designing with CSS Part 1.mp4

11:31

4. Designing with CSS Part 2.mp4

15:49

5. A Look at the APIs.mp4

09:56

6. Function to Search Meal By ID.mp4

11:54

7. Adding Random Meal to Page.mp4

10:28

8. Adding, Removing and Fetching Favorite Meals from Local Storage.mp4

11:01

9. Adding Search Button Function.mp4

07:42

10. Adding Search Button Function.mp4

07:42

11. Displaying Favorite Meals.mp4

08:31

12. Debugging and Summarizing.mp4

09:14

13.1 Food Recipe -Project Code,Files.zip

13. Download The Project Files.html

12. Project-11 Build a Notes Taking Website Using Pure JavaScript

1. Introcution to Application.mp4

09:36

2. Folder Structure and Basic Layout.mp4

08:37

3. Building the HTML.mp4

04:17

4. Designing the Application Part 2.mp4

08:29

5. Designing the Application Part 2.mp4

05:38

6. Creating the Main and App.js File.mp4

12:41

7. Working on Handler Functions.mp4

09:43

8. Getting Started with Notes API.mp4

10:42

9.1 Notes taking Website -Project Code,Files.zip

9. Download The Project Files.html

13. Project-12 Build Github Profile Search Web App using JavaScript

1. Introduction to Application.mp4

10:11

2. A Look at Git and Github.mp4

05:29

3. Folder Structure and Linking Bootsrap.mp4

07:41

4. Creating the Form to Search Use.mp4

09:32

5. Creating Profile and Repository Page.mp4

09:36

6. Adding Footer to the Page.mp4

05:41

7. A Look at the APIs.mp4

09:56

8. Getting User Profiles from Github API.mp4

08:30

9. Getting Repositories from API.mp4

09:06

10. Rendering User Profile on Page.mp4

11:35

11. Displaying User Profile Snippet.mp4

05:59

12. Displaying Repos List.mp4

13:32

13. Adding Event Listeners to Search Button.mp4

11:15

14. Designing the Page Part 1.mp4

08:20

15. Designing the Page Part 2.mp4

08:50

16.1 Github Profile Search -Project Code,Files.zip

16. Download The Project Files.html

14. Project-13 Build a Strong Random Password Generator Web App using Ja

1. Intrdocution to Application.mp4

07:55

2. Folder Structure and Linking CSS File.mp4

07:03

3. Creating The HTML Part 1.mp4

08:17

4. Creating The HTML Part 2.mp4

04:52

5. Desgning the Application Part 1.mp4

09:06

6. Desgining the Application Part 2.mp4

10:58

7. Using DOM to store HTML Elements.mp4

05:52

8. Function to Copy Content to Clipboard.mp4

09:26

9. Function for Generating Password Part 1.mp4

07:09

10. Function for Generating Password Part 2.mp4

10:20

11. Function to Randomly Generate Character.mp4

09:00

12. Running and Debugging the Application.mp4

06:32

13.1 Password generator Project Files,Code.zip

13. Download The Project Files.html

15. Project-14 Build a Calculator Web Application in JavaScript

1. Introduction to Application..mp4

07:36

2. Folder Structure and Basic HTML Layout.mp4

06:39

3. Creating HTML Part 1.mp4

09:36

4. Designing the Application Part 1.mp4

06:31

5. Designing the Application Part 2.mp4

09:12

6. Adding Event Listener to All Numbers.mp4

10:01

7. Adding Event Listener to All Operations.mp4

08:36

8. Defining Math Operations.mp4

07:03

9. Listening to Key Down Events.mp4

08:54

10. Calling Click Events Using Key Down Events.mp4

09:34

11. Summarizing the Application.mp4

07:05

12.1 Calculator Web App Project Files,Code.zip

12. Download The Project Files.html

16. Project-15 Build Contacts App with HTML, CSS, JS and parcel

1. Project-Introduction.mp4

00:57

2. Prerequisites.mp4

00:52

3. Project-Setup.mp4

04:40

4. MVC-Architecture.mp4

02:04

5. Creating-First-ContactPerson.mp4

05:19

6. Saving-Contact-in-local-storage.mp4

06:11

7. Creating-Add-Contact-Form.mp4

06:58

8. Implementing-Add-Contact-View.mp4

10:56

9. Clearing-our-form.mp4

01:44

10. Creating-Modal.mp4

07:08

11. Working-more-on-modal.mp4

09:00

12. Creating-Contact-Lists-View.mp4

13:09

13. Fixing-Bugs.mp4

03:22

14. Deleting-Contacts.mp4

06:20

15. Applying-Delete-Events.mp4

06:39

16. Let-s-Design.mp4

08:38

17. More-Designing.mp4

06:47

18. Implementing-Search.mp4

13:49

19. Working-more-on-Search.mp4

11:30

20. Final-touch.mp4

08:50

21.1 ContactHub.zip

21. Download The Project Files.html

17. Project-16 Build Budget Manager App with HTML, CSS and JS

1. Project Introduction.mp4

00:54

2. Project Setup.mp4

03:50

3. let_s code.mp4

07:57

4. Making our first transaction.mp4

06:56

5. Saving Transactions in Local Storage.mp4

05:46

6. Creating Add transaction View.mp4

06:58

7. Creating Add Controller.mp4

07:52

8. Clearing Form.mp4

02:01

9. Designing Interface.mp4

05:03

10. Designing Form.mp4

06:10

11. Working on Total Balance.mp4

08:37

12. Rendering Income Expense.mp4

08:48

13. Updating Lists and Adding Timestamps.mp4

05:42

14. Styling and formatting time.mp4

03:48

15. Adding Colors in texts.mp4

05:23

16. Styling our BudgetBoss.mp4

09:29

17. Adding filter list box.mp4

06:38

18. Final Feature.mp4

19:09

19.1 Budget Manager.zip

19. Download The Project Files.html

18. Project-17 Build Weather Now app with HTML, CSS and JS

1. Project Introduction.mp4

00:33

2. Prerequisites.mp4

00:52

3. Openweathermap api setup.mp4

01:33

4. Project Setup with parceljs.mp4

04:46

5. Installing Bootstrap.mp4

05:08

6. Creating Weather Card.mp4

06:15

7. Project Architecture.mp4

03:57

8. Making mock state.mp4

03:59

9. Creating SearchView.mp4

06:29

10. Creating WeatherInfo View.mp4

17:34

11. Layouting Weather card.mp4

09:06

12. Fetching data from API.mp4

14:40

13. Showing Fetched data.mp4

11:26

14. Final Touch.mp4

04:26

15.1 Weather Now Project Code.zip

15. Download The Project Files.html

19. Project-18 Build Game with HTML, CSS and JS

1. Project Introduction.mp4

00:51

2. Setting up project.mp4

05:10

3. Creating Ball.mp4

04:26

4. Moving Our Ball.mp4

03:41

5. Bouncing ball.mp4

05:19

6. Drawing Paddle.mp4

03:26

7. Moving Our Paddle.mp4

04:12

8. Generating Bricks.mp4

05:44

9. Drawing All Bricks.mp4

07:58

10. Fixing Bugs.mp4

02:43

11. Collision Detection Explained.mp4

04:39

12. Breaking The Bricks.mp4

07:47

13. Bouncing The Paddle.mp4

05:55

14. Final Touch.mp4

06:30

15.1 Breakout Game Project code.zip

15. Download The Project Files.html

20. Project-19 Build Painting App with HTML Canvas and JavaScript

1. Project introduction.mp4

00:43

2. Setting up project.mp4

03:12

3. Creating Canvas.mp4

04:26

4. Basic Canvas Methods.mp4

04:21

5. Making drawing with mouse.mp4

05:50

6. Making drawing with mouse.mp4

03:00

7. Changing brush color.mp4

09:00

8. Clearing Canvas.mp4

02:53

9.1 Drawing App code.zip

9. Download The Project Files.html

21. Project-20 Build Number Facts App with HTML, CSS and JS

1. Project Introduction.mp4

00:50

2. project setup.mp4

02:58

3. Let's Code, Creating layout audio.mp4

09:25

4. Hitting API to get facts.mp4

09:25

5. Handling state Audio.mp4

11:33

6. Handling ok button and random button.mp4

07:42

7. Adding more CSS.mp4

06:09

8. Final touch of CSS.mp4

03:40

9.1 Number Facts Code .zip

9. Download The Project Files.html

Description

Use Modern HTML5, CSS3, VanillaJs, Boots, JavaScript To build Responsive And Mobile Friendly Web Development project

What You'll Learn?

Projects with pure JavaScript, HTML5, CSS3 with all code provided
Write clean, maintainable and performant Javascript code
Build beautiful and customizable, real world frontend applications
Avoid common pitfalls and mistakes other Javascript coders make
Learn UI/UX practices to build responsive and mobile first web applications
Perfect for beginners looking for things to build unique projects in a short timeframe
Go from a total beginner to a confident JavaScript developer
Build 20 beautiful and customizable, real world frontend applications

Who is this for?

Beginners in JavaScript

More details

Description
Before you start learning something new, itâ€™s important to understand exactly what it is and what it does. This is especially useful when it comes to mastering a new programming language.
In simple terms, JavaScript is a programming language used to make websites interactive. If you think about the basic makeup of a website, you have HTML, which describes and defines the basic content and structure of the website, then you have CSS, which tells the browser how this HTML content should be displayedâ€”determining things like color and font.
With just HTML and CSS, you have a website that looks good but doesnâ€™t actually do much. JavaScript brings the website to life by adding functionality. Itâ€™s is responsible for elements that the user can interact with, such as drop-down menus, modal windows, and contact forms. It is also used to create things like animations, video players, and interactive maps.
Nowadays, JavaScript is an all-purpose programming languageâ€”meaning it runs across the entire software stack. The most popular application of it is on the client side (aka frontend), but since Node.js came on the scene, many people run JavaScript on the server side (aka backend) as well.
When used on the client side, JavaScript code is read, interpreted, and executed in the userâ€™s web browser. When used on the server side, it is run on a remote computer. You can learn more about the difference between frontend and backend programming in our guide.
JavaScript isnâ€™t only used to create websites. It can also be used to build browser-based games and, with the help of certain frameworks, mobile apps for different operating systems. The creation of new libraries and frameworks is also making it possible to build backend programs with the language, such as web apps and server apps.
If youâ€™re interested in learning more, weâ€™ve covered more examples of what is JavaScript used for, including code in more depth elsewhere. But now that we know some of the array of uses of this twenty five year-old language, why learn JavaScript in 2022?
The world of web development is constantly moving. With so many new tools popping up all the time, it can be extremely difficult to know where you should focus your efforts. As an aspiring developer, youâ€™ll want to make sure that what youâ€™re learning is still relevant in todayâ€™s industry.
If youâ€™re having doubts about this language, donâ€™t. Itâ€™s important to note that since its creation in 1995 JavaScript is pretty much everywhere on the webâ€”and thatâ€™s not likely to change any time soon. According to the 2022 StackOverflow developer survey, itâ€™s the most commonly used programming language for the ten year in a row.
It is currently used by 94.5% of all websites and, despite originally being designed as a client-side language, JavaScript has now made its way to the server-side of websites (thanks to Node.js), mobile devices (thanks to React Native and Ionic) and desktop (courtesy of Electron). Package managers like npm make it even more powerful.
If you want to kick things off now and get a taste, in this video our resident web developer Abhishek gives you an introduction to JavaScript.
Who this course is for:
Beginners in JavaScript

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Pianalytix .

Instructor's Courses

Pianalytix Edutech Pvt Ltd uses cutting-edge AI technology & innovative product design to help users learn Machine Learning more efficiently and to implement Machine Learning in the real world. Pianalytix also leverages the power of cutting edge Artificial Intelligence to empower businesses to make massive profits by optimizing processes, maximizing efficiency and increasing profitability.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.