Arrays: A List of Values with Indexes

The previous lesson gave your page a theme toggle. This lesson mirrors your skills as an array in JavaScript: create the list, read its length, and read the first item by index. The HTML skill cards stay as they are for now.

The concept

Here is your page with the theme toggle already in place. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <p class="tagline"></p>
      <button type="button" class="change-tagline btn">Change tagline</button>
      <button type="button" class="theme-toggle btn">Toggle theme</button>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row">
          <li class="skill-card">HTML</li>
          <li class="skill-card">CSS</li>
          <li class="skill-card">JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
    <script>
      const pageOwner = "Your Name";
      const skillCount = 3;
      console.log(pageOwner);
      console.log(skillCount);
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      function showAltTagline() {
        setTagline("Learning in public");
      }
      setTagline("Building things for the web");
      const changeButton = document.querySelector(".change-tagline");
      changeButton.addEventListener("click", showAltTagline);
      let theme = "light";
      function toggleTheme() {
        if (theme === "dark") {
          document.body.classList.remove("theme-dark");
          theme = "light";
        } else {
          document.body.classList.add("theme-dark");
          theme = "dark";
        }
      }
      const themeButton = document.querySelector(".theme-toggle");
      themeButton.addEventListener("click", toggleTheme);
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

The buttons still work. The skills on the page are still only HTML list items. You are about to store the same three names as data in the script.

Run this and watch the CONSOLE:

A LIST IN THE CONSOLE · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The CONSOLE shows the whole list, then 3, then HTML. Square brackets hold an ordered list of values. That list is an array.

Each position has an index. Numbering starts at 0. The first item is skills[0].

skills.length is how many items are in the array. Three skills means length is 3. Your earlier skillCount guessed that count by hand. length counts for you.

Read each index on purpose:

INDEX ZERO IS THE FIRST ITEM · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The CONSOLE shows HTML, then CSS, then JavaScript. Same order as the array literal.

The syntax

const skills = ["HTML", "CSS", "JavaScript"];
 
console.log(skills.length);
console.log(skills[0]);

["a", "b", "c"] creates an array.

array[index] reads one item. Indexes start at 0.

array.length is the count of items.

This lesson stops at create, index, and length. Walking every item with a loop comes next.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Skills array</title>
  </head>
  <body>
    <p class="note">Open the console.</p>
    <script>
      const skills = ["HTML", "CSS", "JavaScript"];
      console.log(skills.length);
      console.log(skills[0]);
    </script>
  </body>
</html>

One array. Two logs. The page markup does not need a new hook for this step.

Common mistakes

You expect the first item at index 1. You write skills[1] hoping for HTML. The CONSOLE shows CSS. Indexes start at 0. The first item is skills[0].

You read past the end of the array. Run this:

PAST THE END IS UNDEFINED · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The CONSOLE shows undefined. There is no item at index 3 when length is 3. Valid indexes run from 0 through length - 1. This is not a red syntax error. The script keeps going. Treat undefined here as a signal you asked for a slot that does not exist.

You confuse length with the last index. skills.length is 3. The last item is skills[2], which is length - 1. Logging skills[skills.length] reads one past the end and yields undefined.

Try it yourself

Mirror your skills as an array and read from it in the CONSOLE. Confirm each step there.

Run the starting code below. Confirm the change-tagline and theme-toggle buttons still work. Confirm the CONSOLE still shows your earlier values.
In the script, below the theme wiring, add const skills = ["HTML", "CSS", "JavaScript"]; (or your own three skill names). Add console.log(skills.length); and console.log(skills[0]);. Run it. Confirm the CONSOLE shows 3 (or your count) and the first skill string. Notice that skills.length matches the hand-typed skillCount you already log: length counts the array for you.
Add console.log(skills); to see the whole list in one line. Run it. Confirm the array appears in the CONSOLE.
Break it on purpose: log skills[3] (or any index past the end). Run it. Confirm the CONSOLE shows undefined. Put a valid index back, such as skills[0], and confirm the first skill returns.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Your skills now exist as data. The next lesson walks that array and builds the skill cards from it.