0Pricing
Javascript for Kids · Lesson

Rows and Columns

Make a grid.

Rows and Columns is a free Javascript for Kids lesson on CoddyKit — lesson 2 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Make a Grid! 🟦🟦

A grid is like a checkerboard or a window with little squares! It has rows (across) and columns (down). ⬜⬜⬜

Nested loops are PERFECT for drawing grids!

Building a Row 📏

To build ONE row of stars, we can join stars together using + in a string.

Let us build a row text step by step!

let row = ''
for (let col = 1; col <= 4; col++) {
  row = row + '*'
}
console.log(row)

What Happened? 🔍

We started with an EMPTY word ''. Each loop added one *. So it grew: *, **, ***, ****!

Then we printed the finished row. Neat! ✨

let row = ''
for (let col = 1; col <= 3; col++) {
  row = row + '*'
  console.log(row)
}

Many Rows 📚

Now wrap that in an OUTER loop to make many rows! Outer = rows, inner = columns.

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '*'
  }
  console.log(row)
}

A 4 by 4 Square 🟦

Let us make a perfect square! 4 rows, 4 columns of stars.

for (let r = 1; r <= 4; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '*'
  }
  console.log(row)
}

Use Emojis! 🎨

Why use boring stars? Let us build a grid of hearts! 💖

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 3; c++) {
    row = row + '💖'
  }
  console.log(row)
}

A Wide Rectangle ▭

Rows and columns do not have to match! Let us make a wide rectangle: 2 rows, 6 columns.

for (let r = 1; r <= 2; r++) {
  let row = ''
  for (let c = 1; c <= 6; c++) {
    row = row + '🟩'
  }
  console.log(row)
}

Number Grid 🔢

Instead of stars, let us fill the grid with the column number!

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + c
  }
  console.log(row)
}

Tall Grid 🏢

Let us make a tall tower! 6 rows, 2 columns of blocks. 🧱

for (let r = 1; r <= 6; r++) {
  let row = ''
  for (let c = 1; c <= 2; c++) {
    row = row + '🧱'
  }
  console.log(row)
}

Add Spaces 🔲

Put a space between symbols to spread them out! Use '* ' with a space.

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '* '
  }
  console.log(row)
}

Your Turn to Build 🌟

Change the hearts to stars 🌟 or change the size! Edit and run to make YOUR grid.

for (let r = 1; r <= 4; r++) {
  let row = ''
  for (let c = 1; c <= 5; c++) {
    row = row + '🌟'
  }
  console.log(row)
}

Quick Check ✅

Grid brain check! 🧠

Rows and Columns Recap 🎉

Beautiful grids! 🟦 You learned to build them.

  • Outer loop = rows
  • Inner loop = columns
  • Build a row text with row = row + symbol, then print it

Next: growing star triangles! 🔺

Frequently asked questions

Is the “Rows and Columns” lesson free?

Yes — the full text of “Rows and Columns” is free to read here on the web, and the Javascript for Kids course includes 4 lessons in total. 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.

What will I learn in “Rows and Columns”?

Make a grid. 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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Rows and Columns” 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

  1. A Loop Inside a Loop
  2. Rows and Columns
  3. Star Triangles
  4. A Times Table
← Back to Javascript for Kids