JavaScript Code Challenges: Creating Web Apps

Course details

In this course, trainer and developer Maaike van Putten presents individual JavaScript projects that you can complete in order, out of order, or by skipping to exactly what you want to practice. The difficulty and complexity increases with each chapter, starting with a basic pomodoro timer and ending with a full-stack job tracker and a web-based code editor. Discover how to implement drag-and-drop functionality in a Kanban board. Learn about local storage for data persistence and explore the power of REST APIs and JSON in server-client communication. Harness live code rendering and syntax highlighting to bring your web-based code editor to life, complete with customizable dark mode settings. This course helps you to advance your skills in building dynamic web applications. By showcasing real-world application development, you’ll gain the confidence and expertise required to build interactive, user-friendly web solutions.

Learning objectives
Complete a portfolio you can use to apply for entry level positions.
Create a diverse range of JS apps that will help you in your own projects.
Build experience with JavaScript.
Prepare for more advanced courses.

Concepts

0. Introduction

01 - Creating web apps with JavaScript

1. Pomodoro Timer

02 - Introduction - Pomodoro timer
03 - Planning the features
04 - Creating the UI
05 - Overview of the necessary JavaScript concepts
06 - Static timer
07 - Start, pause, reset
08 - Work break cycle
09 - Final touches
10 - Challenge - Tracking cycles
11 - Solution - Tracking cycles

2. Virtual Pet

12 - Introduction - Virtual pet
13 - Planning the features
14 - Creating the UI
15 - Quick overview of the necessary JavaScript concepts
16 - Taking care of the virtual pet
17 - Adding the game loop
18 - Final touches
19 - Challenge - Getting a health report
20 - Solution - Getting a health report

3. Kanban Board

21 - Introduction - Kanban board
22 - Planning the features
23 - Creating the UI
24 - Overview of the necessary JavaScript concepts
25 - Static task creation
26 - Drag-and-drop logic
27 - Saving the state
28 - Final touches
29 - Challenge - Deleting tasks
30 - Solution - Deleting tasks

4. Job Application Tracker (Front End and Back End)

31 - Introduction - Job application tracker
32 - Planning the features
33 - Overview of the necessary JavaScript concepts
34 - Creating the backend with Node.js and Express.js
35 - Test the backend
36 - Create the job list
37 - Create the form for adding jobs
38 - Final touches
39 - Challenge - Adding job favorites
40 - Solution - Adding job favorites

5. Web-Based Code Editor

41 - Introduction - Web-based code editor
42 - Planning the features
43 - Creating the UI
44 - Overview of the necessary JavaScript concepts
45 - Text area and live preview
46 - Adding syntax highlighting
47 - Dark and light mode
48 - Final touches
49 - Challenge - Multiple language support
50 - Solution - Multiple language support

Conclusion

51 - Next steps