First Move (11~18) - Code, Learn, Build
🧭 Career CompassDashboardProgress
Loading...
First Move (11~18) - Code, Learn, Build

Structured, level-based technology learning paths from foundational exploration to industry mastery.

Learning Domains

  • Python Programming (Active)
  • Computer Science Core
  • Web Development
  • AI & Machine Learning

Platform Architecture

  • Level-Based Progression
  • Decoupled Content Schema
  • Modular Code Execution Engine
  • Curated Official Resources

© 2026 First Move (11~18) • CODE • LEARN • BUILD. Built with Next.js App Router.

Readability & Accessibility First

🏠Home/📚Courses/⚡JavaScript & Modern ES6+
Web Development⭐ Intermediate🎓 Industry Certificate Ready

JavaScript & Modern ES6+

Master modern ECMAScript standards, asynchronous promises, DOM architecture, and browser execution engines.

Modules
3
Lessons
6
Duration
~40h
Practice
8 items
Modern JavaScript Engine and Asynchronous Code
⚡
JavaScript & Modern ES6+
Interactive Workbenches • Real Code Verification
First Move (11~18) Certified
💡Competency Blueprint

Skills You'll Build

Develop a complete tripartite engineering profile combining deep technical execution, rigorous analytical problem solving, and professional industry collaboration.

⚙️

Technical Skills

Foundational syntax, runtime mechanisms, and domain architectures.

✓Event Loop & Microtask Queue
✓Promises & Async/Await
✓Closures & Scope Chains
✓Prototypal Inheritance & ES Classes
✓DOM Traversal & Event Delegation
✓Fetch API & Streams
🧠

Problem Solving & Optimization

Algorithmic reasoning, performance profiling, and defensive error mitigation.

✓Memory Leak Detection & Heap Profiling
✓Asynchronous Race Condition Prevention
✓Debounce & Throttle Timing Patterns
✓Deep Object Cloning & Immutability
🤝

Professional & Collaborative Engineering

Version control workflows, code review literacy, and industry documentation.

✓ESLint & Prettier Conventions
✓Modular Code Architecture (ESM)
✓Cross-Browser Feature Detection
✓Unit Testing with Vitest/Jest
🛠️Engineering Toolchain

Tools & Technologies You'll Work With

Master the exact production technologies, runtimes, development frameworks, and deployment platforms demanded by modern engineering teams.

🟨
CORE

Modern JavaScript (ES2024)

Primary Language

Async/await, destructuring, modules, closures, and generator functions.

🟢
PLATFORM

Node.js & npm

Backend Runtime

Asynchronous event-driven server runtime and global package manager.

🔍
TOOL

Chrome DevTools & Profiler

Debugging

Call stack tracing, memory heap snapshotting, and event breakpoint debugging.

⚡
TOOL

Vite & Webpack

Build System

Modern module bundler, tree-shaking optimizer, and fast dev server.

🏢Real-World Impact

Where You'll Use This

The engineering skills developed in JavaScript & Modern ES6+ power critical digital infrastructure across diverse high-impact sectors worldwide.

⚡

Interactive Web Applications

Build dynamic browser apps, manage DOM event flows, and animate responsive user workflows.

Representative Systems:
Interactive PortalsRich Web UIsSaaS Frontends
🟢

Node.js Backend Systems

Engineer non-blocking asynchronous event-driven microservices, WebSocket channels, and REST APIs.

Representative Systems:
Real-Time ChatStreaming APIsMicroservices
🌐

Browser Engineering & Workers

Leverage WebSockets, Web Workers, IndexedDB, Service Workers, and Canvas 2D graphics.

Representative Systems:
Offline-First AppsAudio/Video ToolsIn-Browser Games
🚀

Full-Stack JavaScript Services

Unify frontend and backend architectures using standard JavaScript/TypeScript ecosystems.

Representative Systems:
Full-Stack SaaSE-Commerce BackendsAPI Gateways
🧭Signature Career Journey

The Course-to-Career Connection

Experience how every lesson, coding exercise, and tool in this course connects directly to high-impact engineering job roles. Hover or tap any stage to inspect connections.

Step 1: Course
📚

Modern JavaScript (ES6+)

Foundational curriculum & interactive coding challenges

Modern JavaScript (ES6+)
Step 2: Skills Built
💡

Engineering Skills

Applied technical competencies & problem solving

ES6+ SyntaxClosures & ScopesAsynchronous Event Loop+2 more...
Step 3: Tools Used
🛠️

Tools & Technologies

Industry-standard frameworks, IDEs & runtimes

JavaScript ES2024Node.jsChrome DevTools+2 more...
Step 4: Application
🏢

Where It's Used

Mission-critical enterprise & cloud infrastructures

Interactive WebNode.js BackendsBrowser Engineering+1 more...
Step 5: Careers
💼

Career Opportunities

High-demand software engineering job titles

JavaScript DeveloperFrontend EngineerFull Stack Developer+1 more...
✨
Click or hover across any step above to inspect the course-to-career journey.
Connecting foundational instruction ➔ technical competencies ➔ production tools ➔ industry jobs.
Explore All Job Roles ↓
💼Career Opportunities

Industry Roles You Can Prepare For

Explore the real-world software engineering positions directly powered by JavaScript & Modern ES6+ expertise. Review day-to-day responsibilities and core hiring prerequisites.

Entry-Level● Very High Demand

JavaScript Developer

Build modern client applications, write clean asynchronous code, and implement engaging user interactions.

Target Hiring Skills:
JavaScriptHTML/CSSGitREST APIs
Mid-Level● Very High Demand

Frontend Software Engineer

Architect large-scale web applications, manage complex state lifecycles, and champion web standards.

Target Hiring Skills:
JavaScriptTypeScriptReactWeb Performance
Mid-Level● Very High Demand

Full Stack JavaScript Developer

Build complete applications using Node.js backends and modern frontend frameworks.

Target Hiring Skills:
Node.jsExpressPostgreSQLReact
🚀Portfolio Portfolio Showcase

Real Projects You Can Build

Prove your mastery through production-ready software artifacts. Every project in JavaScript & Modern ES6+ is designed to solve real-world problems and stand out on your engineering resume.

IntermediatePortfolio Grade

Interactive Real-Time Collaborative Canvas

Build a multi-user drawing whiteboard where multiple clients can sketch, change tools, and synchronize paths in real time.

Skills Demonstrated:
HTML5 CanvasWebSocketsEvent DelegationState Serialization
Tools Utilized:
JavaScript ES6+HTML5 CanvasNode.js
Deliverable: Interactive multi-client drawing room web application.
AdvancedPortfolio Grade

Lightweight In-Memory Event-Driven Message Broker

Construct a pub/sub message broker library supporting priority topics, subscriber wildcard patterns, and guaranteed event ordering.

Skills Demonstrated:
Event Loop MechanicsClosuresSet/Map IndexingAsync Queueing
Tools Utilized:
JavaScriptNode.jsVitest
Deliverable: Zero-dependency event bus package with automated test suite.
🗺️Structured Progression

Visual Learning Roadmap

A carefully sequenced 6-stage engineering curriculum designed to build your knowledge incrementally from core fundamentals to interview-ready production mastery.

Roadmap Progress0%
Stage 1⏱️ ~6 hrs

Foundation

Variables, Types, Functions, and Objects

Core Topics & Competencies:
let/constArrow FunctionsDestructuringSpread Operator
Milestone: Dynamic Expense Calculator
Stage 2⏱️ ~8 hrs

DOM & Events

Event Delegation, Bubbling, and LocalStorage

Core Topics & Competencies:
Event ListenersDOM MutationslocalStorage APIForms
Milestone: Interactive Drag-and-Drop Task Board
Stage 3⏱️ ~10 hrs

Asynchronous Core

Event Loop, Promises, and Fetch API

Core Topics & Competencies:
Call StackMicrotasksPromisesasync/await
Milestone: Live Weather & Forecast Explorer
Stage 4⏱️ ~12 hrs

Advanced Paradigms

Closures, Prototypes, and Functional Patterns

Core Topics & Competencies:
ClosuresCurryingPrototypesClasses
Milestone: Custom Event-Driven Pub/Sub Library
Stage 5⏱️ ~14 hrs

Node.js & Server APIs

HTTP Modules, Express Basics, and File System

Core Topics & Competencies:
Node.js Event EmitterStreamsExpress RESTJSON APIs
Milestone: Lightweight Real-Time Chat Server
Stage 6⏱️ ~10 hrs

Career Readiness

Memory Profiling, Bundling, and Interview Drills

Core Topics & Competencies:
Memory LeaksVite BundlingPolyfillsPolyfill Building
Milestone: Production Portfolio Web Application
🎓

Certificate of Completion

Complete this learning path to earn your First Move (11~18) certificate.

🎓

Course Certification

Certificate of Completion
IN PROGRESS
LESSON COMPLETION0 / 6
PORTFOLIO PROJECTS0 / 2
FINAL ASSESSMENTPassed
MASTERY SCORE0%
Missing Requirements for Certification:
  • Complete all 6 lessons (0/6 completed)
  • Complete all 2 portfolio projects (0/2 completed)
  • Score at least 80% on final assessment (current best: 0%)
  • Achieve overall course mastery of at least 80% (current: 0%)
Structured Learning Journey

Course Curriculum & Level Progression

Guided 3-tier progression taking learners from fundamental concepts to core practical engineering and production mastery.

🌱

LEVEL 1 — FOUNDATIONS

Learn absolute fundamentals, core syntax, environment setup, and fundamental logic blocks.

Module 1

Level 1: JavaScript & ES6+ Foundations

2 Lessons

Master dynamic scope declarations (let vs const vs var), primitive & reference data types, template literals, arrow functions, and destructuring.

1
Dynamic Typing, Scope & ES6+ Syntax⚡ Coding Exercise
Understand block scope rules, let/const hoistings, template literals, arrow functions, object destructuring, and spread operators. (30 mins)
Start Lesson →
2
First-Class Functions, Closures & Lexical Scope⚡ Coding Exercise
Master first-class function assignments, higher-order functions, lexical scope environments, and private state encapsulation using Closures. (35 mins)
Start Lesson →
🛠️

LEVEL 2 — CORE PRACTICE

Solve realistic problems, master data structures, error handling, design patterns, and mini-projects.

Module 1

Level 2: DOM Manipulation, Events & Async Promises

2 Lessons

Interact with document DOM nodes dynamically, attach event listeners with event delegation, and handle asynchronous operations with Promises & async/await.

1
DOM Architecture, Traversal & Event Delegation⚡ Coding Exercise
Query DOM nodes with querySelector, create dynamic elements, attach event listeners, and optimize performance using event delegation. (35 mins)
Start Lesson →
2
Asynchronous Promises & async/await Syntax⚡ Coding Exercise
Master asynchronous execution, Promise states (Pending, Fulfilled, Rejected), try/catch error boundaries, and modern async/await. (40 mins)
Start Lesson →
🚀

LEVEL 3 — ADVANCED & PRODUCTION MASTERY

Apply knowledge to real software architecture, security, optimization, scale, and portfolio capstones.

Module 1

Level 3: ES Modules, Performance & Modern Architecture

2 Lessons

Organize applications using native ES Modules (import/export), optimize DOM performance with debouncing/throttling, and handle memory leaks.

1
ES Modules (import / export) & Code Organization⚡ Coding Exercise
Structure modular frontend code bases using named exports, default exports, dynamic imports, and module scoping. (35 mins)
Start Lesson →
2
JS Performance Engineering: Debounce, Throttle & Memory⚡ Coding Exercise
Optimize high-frequency scroll/resize event handlers with debouncing & throttling, avoid memory leaks, and profile Garbage Collection. (40 mins)
Start Lesson →

🏆 Hands-On Portfolio Projects

INTERMEDIATE PROJECT⏱️ ~5h

Interactive DOM Task Management Dashboard

Build a dynamic web dashboard featuring drag-and-drop task items, dynamic state filtering, and LocalStorage persistence.

Open Project Blueprint & Starter Code →
ADVANCED PROJECT⏱️ ~6h

Async API Data Analytics Dashboard

Fetch, parse, and render real-time weather analytics using Fetch API, Promises, and Canvas UI.

Open Project Blueprint & Starter Code →