--- title: "JavaScript for Kids: Where to Start, With Three Real Programs" description: "JavaScript for kids: what it is, the right age to start, how to open the browser Console, and three short programs, from a dice roll to a square you can steer." canonical: https://learn.modernagecoders.com/javascript-for-kids source: src/pages/javascript-for-kids.html --- > JavaScript for kids: what it is, the right age to start, how to open the browser Console, and three short programs, from a dice roll to a square you can steer. In short JavaScript is the programming language of web pages, and kids can start it in any browser with nothing to install. In our experience children are often ready around 10 to 12, after a little HTML and CSS; teens can start directly. Open the browser’s Console (Ctrl + Shift + I or F12 on Windows) and type a first line of code today. Modern Age Coders teaches this live online for US students, in a batch or one to one, and the first class is free. Learn it with a teacher ## Three courses that teach JavaScript properly Each is live, and each ends with something your child can open in a browser and share. [![Web Development for Kids course thumbnail](/images/html-css-kids.webp) JK / 01 Web development for kids Ages 9 to 12. HTML and CSS first, then JavaScript sparks. Open the syllabus →](/courses/kids-ai-web-development-course)[![JavaScript for Teens course thumbnail](/images/javascript-teens.webp) JK / 02 JavaScript for teens Ages 13 to 18. Interactive sites, canvas games, real APIs. Open the syllabus →](/courses/javascript-course-for-teens-beginners-interactive-web)[![HTML & CSS for Beginners course thumbnail](/images/html-css-beginners.webp) JK / 03 HTML and CSS for beginners Ages 10 and up. The two layers JavaScript sits on. Open the syllabus →](/courses/html-css-course-for-beginners-build-real-websites) What it is ## What JavaScript is, in a sentence a 10-year-old can repeat MDN, the web documentation run by Mozilla, calls JavaScript the third layer of the layer cake of standard web technologies. The other two layers are HTML and CSS. | Layer | What it does | A button, in each layer | | --- | --- | --- | | HTML | Structure and meaning: headings, paragraphs, images | The button exists and has a label | | CSS | Style rules: colors, fonts, layout | The button is rounded and blue | | JavaScript | Behavior: updating content, animation, reacting to the user | Clicking the button does something | ### Not Java MDN is blunt on this point: do not confuse JavaScript with the Java programming language. The two have very different syntax and uses. American students often meet Java later in AP Computer Science A, so it helps to know early that the names are a coincidence of history, not a family tie. MDN describes JavaScript as a lightweight interpreted (or just-in-time compiled) language. For a child, that means you write a line and the browser runs it immediately. ### Who keeps it up to date The core language is standardized by the ECMA TC39 committee under the name ECMAScript, and MDN says new editions are approved and published every year. ES6 and ES2015 are two names for the same edition. For learners, the yearly cycle matters less than the basics underneath it. Variables, events, functions and loops look the same in every recent edition, and those are what a child spends the first year on. Sources: MDN pages [What is JavaScript?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and the JavaScript technologies overview, read 17 October 2026. We are not connected with Mozilla or Ecma International. The right age ## When is a child ready for JavaScript? Parents searching for JavaScript for kids are often choosing between it, Scratch and Python. The answer depends on age and on what the child wants to make. This is the guide we use. | Age | Usual start | Where JavaScript fits | | --- | --- | --- | | 6 to 9 | Scratch or other block coding | Later; typing and punctuation slow young children down | | 10 to 12 | HTML and CSS, then JavaScript | A good fit for a child who wants their own website or browser game | | 13 to 15 | JavaScript or Python | Either works; JavaScript if the goal is the web or games in a browser | | 16 to 18 | JavaScript alongside a second language | The base for web apps, hackathons and portfolio projects | ### JavaScript or Python first? Python reads more like plain English and has fewer symbols, which is why many children start there. JavaScript has more brackets and braces, but its results are immediately visual: a page changes color, a square moves. Our rule of thumb: a child who keeps asking how a website or online game works should start with JavaScript; a child more curious about puzzles, data or AI should start with Python. Our post on [Python or JavaScript first](/blog/python-vs-javascript-which-to-learn-first) covers this in more depth. ### Books, PDFs and free tutorials Many families search for a JavaScript for kids book or a free PDF. Books suit a reader who likes working alone; the hard moment is the first bug a child cannot explain, because a book cannot answer back. Free documentation is excellent once a child can read it. MDN’s own beginner course assumes an understanding of HTML and the fundamentals of CSS, which is why we teach those two first. The hidden tool ## Open the Console: the place to type your first JavaScript Every desktop browser includes developer tools, and inside them is the JavaScript Console, which MDN calls an incredibly useful tool for debugging. It runs lines of code against the open page and reports errors. | Computer | Keys | Then | | --- | --- | --- | | Windows | Ctrl + Shift + I, or F12 | Choose the Console tab | | Mac | Cmd + Option + I | Choose the Console tab | | Any | Right-click the page, choose Inspect | Then the Console tab | 1. **Open a blank tab** so that no website’s own code gets in the way. 2. **Open the Console** with the keys above and click inside it. 3. **Type 2 + 2** and press Enter. The answer appears underneath. That is JavaScript running. 4. **Paste the first program below** and press Enter. Run it a few times to see the dice change. 5. **Make a mistake on purpose.** Leave off a closing quote and read the red error. Learning to read that message calmly is the most useful skill in the first month. On a school-managed Chromebook, some tools may be restricted by the district. If the Console will not open, a home computer works the same way, and the HTML programs below also run in a free online editor. Real code ## Three JavaScript programs, from one line to a moving square These are the first three programs in our beginner plan. We wrote them using only features documented on MDN. The first runs in the Console; save the other two as .html files and open them in a browser. ***Program 1 · a greeting and a dice roll**javascript* ``` // Paste these lines into the browser Console (ours) let name = "Sam"; console.log("Hi " + name + "!"); let roll = Math.floor(Math.random() * 6) + 1; // 1 to 6 console.log("You rolled a " + roll); ``` MDN says Math.random returns a number greater than or equal to 0 and less than 1. Multiplying by 6 and rounding down with Math.floor gives 0 to 5; adding 1 gives 1 to 6. ***Program 2 · a button that counts**html* ```

Claps: 0

``` querySelector finds the button and the paragraph; addEventListener sets up a function that runs on every click; textContent replaces the paragraph’s text. If querySelector finds nothing, it returns null, the usual cause of a beginner’s first big red error. ***Program 3 · steer a square**html* ``` ``` keydown fires when a key is pressed and keyup when it is released; event.key tells you which key, such as ArrowRight. The frame function moves, clears, draws and then asks for the next frame. ### What each program adds Program 1 is variables and arithmetic. Program 2 adds events: code that waits for the user. Program 3 adds a loop that never stops, which is how every browser game works. Children who build these three in order understand the shape of an interactive program before they ever meet a framework. Frameworks then make sense instead of feeling like magic. ### One thing Math.random is not for MDN warns that Math.random does not provide cryptographically secure random numbers and should not be used for anything related to security. For a dice game that is fine. We mention it in class on purpose. It is a child’s first glimpse that the same tool can be safe in one job and wrong in another, a lesson that matters later in cybersecurity and in life. The game loop ## Why the square moves faster on some screens Program 3 contains a real bug that professional game programmers know well. Finding it is a good test of whether a student understands the loop. | Screen refresh rate | Frames per second | Pixels per second at 3 per frame | Time to cross 280 pixels | | --- | --- | --- | --- | | 60 Hz, the most common | 60 | 3 x 60 = 180 | 280 / 180 = about 1.6 seconds | | 120 Hz | 120 | 3 x 120 = 360 | about 0.8 seconds | | 144 Hz | 144 | 3 x 144 = 432 | about 0.65 seconds | ### The cause MDN explains that requestAnimationFrame calls the frame function at a rate that generally matches the display refresh rate. It names 60 Hz as the most common and says 75, 120 and 144 Hz are also widely used. Our program moves 3 pixels per frame, not per second, so a faster screen means a faster square. On a 120 Hz screen it moves twice as fast as on a 60 Hz one. ### The fix, in the next lesson The fix is to measure time instead of counting frames: move by speed multiplied by the time since the last frame. MDN documents a timestamp passed to the callback, which makes that measurement easy. We let students discover the bug before we explain it. A teen who watches their own game misbehave on a friend’s laptop sees for themselves why time matters in animation. A first term ## Twelve weeks from first line to first browser game Our plan for a 10 to 13 year old who already knows a little HTML. Teenagers in our JavaScript course cover it faster and go further. | Weeks | What gets built | The idea | | --- | --- | --- | | 1 to 2 | Console experiments, a dice and a coin | Values, variables, Math | | 3 to 4 | A clap counter, then a color switcher | Events and changing the page | | 5 to 6 | A quiz with a score | Conditions, arrays, functions | | 7 to 8 | A drawing app on a canvas | Coordinates and shapes | | 9 to 10 | The steerable square, then walls and a goal | The game loop and collisions | | 11 to 12 | A finished mini game, shared as a link | Fixing the frame-rate bug, testing on other devices | ### Ages 9 to 12 Our kids web course: HTML and CSS for the first months, then JavaScript once a child can build a page by hand. ### Ages 13 to 15 Straight into JavaScript in our teen course, with HTML and CSS taught alongside rather than before. ### Ages 16 to 18 The same course at a faster pace, aiming at a portfolio project, a hackathon entry or the Congressional App Challenge. For project ideas after the first term, see [HTML, CSS and JavaScript project ideas](/blog/html-css-javascript-project-ideas); high school students can read our guide to [hackathons for high school students](/hackathons-for-high-school-students) or the [Congressional App Challenge guide](/congressional-app-challenge-guide). From pages to programs ## Four stages of a young JavaScript programmer The stages our lessons move through, and what moves a learner on. | Stage | What it looks like | | --- | --- | | 1. Page builder | Writes HTML and CSS; copies small scripts without changing them | | 2. Tinkerer | Changes numbers and text in a script to see what happens | | 3. Programmer | Writes events and loops from an idea, like the three programs above | | 4. Debugger | Uses the Console to find a bug and explains why it happened | ### For parents Ask your child to send you the link to something they made. Sharing is half the motivation with JavaScript. Be wary of tutorials that start with a framework. A child who cannot yet write a click handler by hand is not ready for one. ### For kids Keep the Console open while you code. Red messages are clues, not failures. Change one number at a time and predict what will happen before you run it. The catalog ## Nine courses for kids who want to build for the web Taught live, with a teacher who knows your child’s projects, in a group or one to one. I ### First web skills Ages 8 to 12 JK / WEB / 01 #### Web development for kids Pages by hand, then scripts. [Open the syllabus](/courses/kids-ai-web-development-course) JK / WEB / 02 #### HTML and CSS Structure and style. [Open the syllabus](/courses/html-css-course-for-beginners-build-real-websites) JK / WEB / 03 #### Scratch coding Logic before syntax. [Open the syllabus](/courses/scratch-programming-complete-course)II ### Teen developers Ages 13 to 18 JK / TEN / 01 #### JavaScript for teens Interactive sites and games. [Open the syllabus](/courses/javascript-course-for-teens-beginners-interactive-web) JK / TEN / 02 #### Full-stack for teens Front end and back end. [Open the syllabus](/courses/full-stack-web-development-teens-masterclass) JK / TEN / 03 #### Python for teens The second language. [Open the syllabus](/courses/python-complete-masterclass-teens)III ### Projects and events Teens JK / PRJ / 01 #### Hackathon preparation Build fast, in a team. [Open the syllabus](/courses/hackathon-prep-for-teens-coding-ai-build-innovate-win-course) JK / PRJ / 02 #### Vibe coding for teens AI help, understood. [Open the syllabus](/courses/vibe-coding-for-teens-python-web-ai-projects-course) JK / PRJ / 03 #### App development for teens From web to phone. [Open the syllabus](/courses/complete-app-development-masterclass-for-teens) Scheduling ## JavaScript classes on your family’s timetable Weekdays or weekends, flexible: choose your batch, or for a very personalised plan choose 1-on-1 at your convenience, weekend mornings or weekdays. Weekdays After school in Eastern, Central, Mountain or Pacific time. Weekends Weekend mornings, if weekdays are full. 1-on-1 Your child’s own plan, at hours you pick. ### A browser and nothing else No installs, even on a Chromebook. ### Code written, not pasted Students type and explain every line. ### Console on screen Errors read together, then fixed. ### A steady teacher The same person through the term. ### Projects to share Each month ends with a link to send. ### Two formats A batch of fifteen to twenty, or private. Student work ## Web projects our students have built Sites and games from learners who started with programs like these. The [student labs](/student-labs) show more. ![NutriLife AI nutrition coach project screenshot](/images/projects/nutrilife.webp) AI and ML #### NutriLife An AI nutrition coach that reads what you eat and works you toward a target. by Bhavya · [Open it](https://nutrilife-bhavya.lovable.app) ![Misti AI chatbot for maths and coding screenshot](/images/projects/misti.webp) AI and ML #### Misti A chatbot that answers mathematics and programming questions, built and deployed by a student. by Harshit · [Open it](https://misti.modernagecoders.com) ![GuardianX AI internet safety assistant screenshot](/images/projects/guardianx.webp) AI and ML #### GuardianX An assistant that helps a young person recognise unsafe situations online. by Vivaan · [Open it](https://guardianx-cybersaver.lovable.app) ![SkyCast weather forecast application screenshot](/images/projects/skycast.webp) Web app #### SkyCast A weather forecasting site with live conditions for any location. by Krish Fees ## Fees JavaScript and every browser are free. The teaching is charged monthly in US dollars; nothing is signed for a whole school year, and you may stop after any month. Free first class USD 0 no card required - A free first lesson - Bring a page they made - No card required Book it Group batch USD 100 a month, billed in US dollars - Fifteen to twenty learners - A teacher who stays - Choose a batch time - Month by month Start here One to one USD 150 a month, billed in US dollars - Just your child and a teacher - Hours that suit you - Their own project plan Enquire What families say ## Rated 4.9 across 547 Google reviews Parent reviews from Google, unedited. ★★★★★ "The one step solution for my son. Modern Age Coders make learning coding so simple that kids love it. The teachers explain complex concepts clearly with practical exercises and interactive content." Ria Mukherjee Parent ★★★★★ "Modern Age Coders has been a game-changer for me. I struggled to grasp IT concepts and coding before joining, but their classes transformed everything. I can now confidently write complex programs with ease." Samriddha Mondal Student ★★★★★ "One of the most wonderful education centres out there. Education is not limited to school syllabus but focuses on skill development." Vansh Agarwal Student ★★★★★ "My child Dhairya is really enjoying the Modern Age Coders classes. This is his first online class and he eagerly looks forward to it. I can already see his improvement, and the teachers are very cooperative." Sonam Oswal Parent of Dhairya ★★★★★ "Modern Age Coders have wonderful teachers who teach in a clear, easy and practical way. The teacher boosts students' confidence and inspires them to learn without hesitation." Sonu Goyal Parent ★★★★★ "I highly recommend this computer coding class! The teachers are incredibly knowledgeable and passionate about coding." Ritu Kedia Parent Questions families ask ## JavaScript for kids: questions ### Can kids learn JavaScript? Yes. In our experience children are often ready around 10 to 12, especially after a little HTML and CSS, and teenagers can start directly. Younger children usually do better with Scratch first. ### What age should a child start JavaScript? In our experience, around 10 to 12 for a child who reads and types comfortably. From 13, JavaScript works well as a first language, particularly for a teen interested in websites or browser games. ### Is JavaScript the same as Java? No. MDN says plainly that JavaScript should not be confused with the Java programming language; the two have very different syntax and uses. American students often meet Java later in AP Computer Science A. ### Does my child need to install anything to learn JavaScript? No. Every modern browser runs JavaScript. A child can type code into the browser Console, or save a simple .html file and open it in the browser. ### How do you open the JavaScript Console? On Windows press Ctrl + Shift + I or F12; on a Mac press Cmd + Option + I. Then choose the Console tab. You can also right-click the page and choose Inspect. ### Should my child learn Python or JavaScript first? JavaScript if they are drawn to websites and browser games, Python if they are drawn to puzzles, data or AI. Both are good first typed languages, and many of our students learn both. ### Can kids make games with JavaScript? Yes. With the canvas element and requestAnimationFrame, a child can build browser games that run on any computer and can be shared as a link. The third program on this page is the start of one. ### Is JavaScript for kids free to learn? The language, the browser and MDN's documentation are free. Families pay only if they want a teacher; our first lesson is free too. ### Is HTML and CSS needed before JavaScript? It helps. MDN's beginner JavaScript course assumes an understanding of HTML and the fundamentals of CSS, because JavaScript mostly works by changing a web page those two describe. ### What times are classes for US families? Weekdays or weekends, flexible. Choose your batch, or for a very personalised plan choose 1-on-1 at your convenience, weekend mornings or weekdays. ### How much are JavaScript classes? The first lesson is free. After that you pay for one month of teaching at a time, and the fees section of this page shows the monthly amount in US dollars. See also ## Related pages More for US families with a budding web developer. ### [Python or JavaScript first?](/blog/python-vs-javascript-which-to-learn-first) A longer comparison. ### [JavaScript basics](/blog/javascript-basics) Our blog primer for beginners. ### [Coding classes in the USA](/coding-classes-in-united-states) The index of our US pages. ### [Coding for 11 year olds](/coding-for-11-year-olds) What fits at this age. ### [Hackathons for high schoolers](/hackathons-for-high-school-students) Where teen web projects get tested. ### [How to debug code](/how-to-debug-code) Habits for reading errors. ### [App Inventor for kids](/app-inventor-for-kids) MIT App Inventor for kids: sign-in options, phone setup and a first app in real blocks. ### [Coding classes for elementary students](/coding-classes-for-elementary-students) Coding for elementary students, grade by grade, with a first program and an at-home activity. ### [Coding classes for middle school students](/coding-classes-for-middle-school-students) Coding for middle schoolers: grade 8 expectations, a real Python program, and how to choose a language. Start here ## Book a free first lesson Tell us whether your child has made a web page before. The teacher opens a blank page with them and has something moving on screen before the lesson ends. You can read [how we teach](/how-we-teach) before booking, and the full JavaScript syllabus is on the [courses](/courses) page. [WhatsApp us](https://wa.me/919123366161?text=Hello%20Modern%20Age%20Coders%2C%20my%20child%20in%20the%20US%20would%20like%20to%20learn%20JavaScript.%20Could%20we%20book%20a%20free%20first%20lesson%3F) · [+91 91233 66161](tel:+919123366161) · [connect@modernagecoders.com](mailto:connect@modernagecoders.com) Every class is live online with teachers who work from India, which is why families in any US state can join. WhatsApp is the quickest way to ask us anything. ### Want a class sooner? Book a priority demo A priority demo is a full class of about 45 to 60 minutes. After the class the mentor sends a written skill report and a personal learning roadmap on WhatsApp. If you enrol, the demo fee is adjusted against your first month's fee. Share your demo Order ID with us on WhatsApp and we take it off. [Book a priority demo](/book-demo) ## Keep exploring Modern Age Coders ### Related courses and guides - [After the micro:bit: The Next Step to Python, UK](/after-microbit-next-step-python-uk) - [JavaScript Classes Online in Australia](/javascript-classes-online-australia) - [After Scratch: Moving to Python, for Australian Kids](/after-scratch-next-step-python-australia) - [Online Java Classes](/online-java-classes) - [AI and Python Academy, Amsterdam](/ai-and-python-academy-amsterdam) - [OCA Java SE 8 Certification (1Z0-808): Full Exam Guide](/oca-java-certification-prep) - [MakeCode Arcade Help: Jump, Gravity, Levels and Saving](/makecode-arcade-help-for-students) - [Online Coding and Python Classes in Edgbaston, Birmingham](/online-coding-and-python-classes-in-edgbaston-birmingham) - [Online Coding and Python Classes in Casey, Melbourne](/online-coding-and-python-classes-in-casey-melbourne) - [Fetch API - Getting Data from the Internet Practice | JavaScript](/resources/javascript/fetch-api-and-working-with-apis/practice) ### Learn more - [Coding for Class 7: Python, JavaScript](/coding-for-class-7) - [React Course for Teens: JavaScript to Real React Apps](/courses/react-for-teens-complete-masterclass) - [TypeScript Course: Typed JavaScript, React and Node](/courses/complete-typescript-programming-masterclass-college) - [Frontend Development for Teens: CSS Craft to React UI](/courses/frontend-development-masterclass-for-teens) ### Free resources - [JavaScript Tutorial: Build Interactive Websites](/resources/javascript) - [Variables and Data Types](/resources/javascript/variables-and-data-types) - [Closures, Scope, and Hoisting](/resources/javascript/closures-scope-and-hoisting) - [DOM Events and Event Listeners](/resources/javascript/dom-events-and-listeners) ### From the blog - [What Is an Algorithm? Simple Examples for Kids and Beginners](/blog/what-is-an-algorithm) - [What JavaScript to Learn Before React (with Examples)](/blog/javascript-to-learn-before-react) - [30+ Best Java Programs for Class 8 Students](/blog/30-best-java-programs-for-class-8-students) ### Start here - [Try a free trial class with a Modern Age Coders mentor](/free-trial) - [About Modern Age Coders, teaching since 2020](/about) Free class[Priority demo](/book-demo)[Call us](tel:+919123366161) --- *Canonical: https://learn.modernagecoders.com/javascript-for-kids*