Javascript for Kids · Lesson

Drawing Patterns with Loops

Print fun shapes and patterns.

Lesson 4 of 413 steps

Drawing Patterns with Loops is a free Javascript for Kids lesson on CoddyKit. This is lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Javascript for Kids learning path, and your progress syncs across the web and the CoddyKit app. The Javascript for Kids course includes 4 lessons in total.

Drawing with Loops 🎨

Hi, pattern painter! 🌟 Loops can DRAW pictures with stars and shapes!

Let us make cool patterns together. ⭐

for (let i = 0; i < 3; i++) {
  console.log("*")
}

A Row of Stars ⭐

Let us print a line of stars going down!

Each loop adds one star. 🌟

for (let i = 0; i < 5; i++) {
  console.log("*")
}

Stars in a Line ➖

We can build a line by ADDING stars to a box!

Each loop adds one more * to the line. 🪄

let line = ""
for (let i = 0; i < 5; i++) {
  line = line + "*"
}
console.log(line)

Building a Word 🧱

We add stars one by one to make the line longer!

Watch the line grow each turn. 📈

let line = ""
for (let i = 0; i < 4; i++) {
  line = line + "*"
  console.log(line)
}

A Growing Triangle 🔺

If we print the line as it grows, we make a triangle!

One star, two stars, three stars... 🔺

let line = ""
for (let i = 0; i < 5; i++) {
  line = line + "*"
  console.log(line)
}

Hearts Instead of Stars 💖

We can use ANY symbol! Let us make a triangle of hearts.

So sweet. 💕

let line = ""
for (let i = 0; i < 4; i++) {
  line = line + "💖"
  console.log(line)
}

A Box of Stars 🟦

Let us print 3 rows that each have 3 stars!

That makes a little square. ⬛

for (let i = 0; i < 3; i++) {
  console.log("***")
}

Counting Patterns 🔢

We can make a number pattern too!

Each row shows the loop number. 🪜

for (let i = 1; i <= 5; i++) {
  console.log("Row " + i)
}

A Ladder Pattern 🪜

Add a space and a symbol each time to make a ladder!

Climbing up! 🧗

let line = ""
for (let i = 0; i < 4; i++) {
  line = line + "= "
  console.log(line)
}

Rainbow Dots 🌈

Let us make a colorful row of dots!

Change the number to make it longer. 🔴🟠🟡

let dots = ""
for (let i = 0; i < 6; i++) {
  dots = dots + "🔴"
}
console.log(dots)

Your Own Pattern 🧒

Change the symbol and the number to draw YOUR own pattern!

Be creative! 🎨

let line = ""
for (let i = 0; i < 5; i++) {
  line = line + "⭐"
  console.log(line)
}

Quick Check ✅

Pattern question! You are amazing! 🎨

Answer it in the interactive lesson

Pattern Painter! 🏆

Wonderful! 🎉 Today you learned:

Loops can draw patterns
Add symbols to a box to make lines grow
Print the line each loop to make shapes like triangles

You finished Loop-de-Loop! Pattern pro! ⭐

for (let i = 0; i < 1; i++) {
  console.log("I can draw with loops! 🎨")
}

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 35
Lessons: 140

Start learning free View the full course

Frequently Asked Questions

Is the “Drawing Patterns with Loops” lesson free?

Yes — the full text of “Drawing Patterns with Loops” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Javascript for Kids course, upgrade to CoddyKit PRO. The Javascript for Kids course includes 4 lessons in total.

What will I learn in “Drawing Patterns with Loops”?

Print fun shapes and patterns. You practise Javascript for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Javascript for Kids?

No prior experience is required. Javascript for Kids on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

How long does the “Drawing Patterns with Loops” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Javascript for Kids lesson?

Yes. Every Javascript for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Javascript for Kids