For Loop with Array Data: A Complete HTML, CSS & JavaScript Tutorial

🧠 Introduction

Arrays and loops are the backbone of dynamic web development. Whether you’re building a dashboard, rendering user data, or generating content on the fly, understanding how to use a for loop with arrays is essential.

In this tutorial, we’ll walk through a practical example using HTML, CSS, and JavaScript to display paired data from two arrays — names and fruits — using a for loop. This is beginner-friendly but also includes deeper insights for intermediate coders.

🧩 What You’ll Learn

• How to structure array data in JavaScript
• How to use a for loop to iterate through arrays
• How to dynamically inject content into HTML
• How to style output with CSS
• How to pair two arrays using index logic

🧱 HTML Setup

Here’s the basic HTML structure:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<div class="work-container">
  <pre style="white-space: pre-line;">
Array1 = ['john', 'James', 'Smith', 'Kevin', 'Tom', 'Akshey', 'Anil', 'Pawan', 'Sunil', 'Sonu']

Array2 = ['Apple', 'Banana', 'Mango', 'Coconut', 'Guava', 'Orange', 'Pineapple', 'Apricots', 'Almond', 'Avocado']
<hr>
  </pre>
  <div id="text"></div>
</div>

🎨 CSS Styling

Here’s the CSS used to style the container and output:

body {
  font-family: 'Poppins', sans-serif;
}

.work-container {
  max-width: 100%;
  width: 400px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #00000017;
}

#text {
  line-height: 30px;
}

pre {
  margin: 0;
}

hr {
  margin: 20px 0 0 0;
}

💡 CSS Concepts Used

• Font Styling: Applies a clean, modern font.
• Box Shadow: Adds depth to the container.
• Line Height: Improves readability of dynamic text.
• Responsive Width: Ensures the container adapts to screen size.

🧠 JavaScript Logic

Here’s the core logic that powers the dynamic output:

let nameArray = ['John', 'James', 'Smith', 'Kevin', 'Tom', 'Akshey', 'Anil', 'Pawan', 'Sunil', 'Sonu'];
let fruitArray = ['Apple', 'Banana', 'Mango', 'Coconut', 'Guava', 'Orange', 'Pineapple', 'Apricots', 'Almond', 'Avocado'];
let text = '';

for (let i = 0; i < nameArray.length; i++) {
  text += (i + 1) + '. <b>' + nameArray[i] + '</b> loves to eat <b>' + fruitArray[i] + '</b><br>';
}

document.getElementById("text").innerHTML = text;

Here’s a full-length blog post for your Coding category, focused on using a for loop with array data in HTML, CSS, and JavaScript — plus a horizontal image to match the theme.

🔍 JavaScript Breakdown

• let nameArray & fruitArray: Two arrays storing names and fruits.
• for loop: Iterates through both arrays using the same index.
• text +=: Concatenates each line of output.
• document.getElementById("text").innerHTML = text;: Injects the final string into the HTML.

🧪 Why This Works

The for loop uses the index i to access corresponding elements in both arrays. Since both arrays are the same length, this ensures each name is paired with the correct fruit.

🔗 Live Demo

You can view the live working version here:
👉 Live Code Snippet

🏁 Final Thoughts

Using a for loop with arrays is one of the most fundamental skills in programming. It’s the gateway to dynamic content, data manipulation, and building interactive web experiences.

Whether you’re rendering user profiles, generating product lists, or pairing data like names and fruits — this technique is versatile and powerful.