WordPress.org vs WordPress.com - Hands-On Comparison

Understanding WordPress.org vs WordPress.com

📖 Scenario: You want to create a website and are deciding between using WordPress.org or WordPress.com. Understanding the differences will help you choose the best option for your needs.

🎯 Goal: Build a simple comparison chart in HTML that clearly shows the main differences between WordPress.org and WordPress.com.

📋 What You'll Learn

Create an HTML structure with a table comparing WordPress.org and WordPress.com

Add a configuration variable to hold the features list

Use a loop to generate table rows dynamically from the features list

Add final HTML elements to complete the accessible and responsive table

💡 Why This Matters

🌍 Real World

Comparing hosting options or software features clearly helps users make informed decisions when choosing platforms.

💼 Career

Web developers often build dynamic, accessible tables to present data clearly on websites.

1

Create the HTML table skeleton

Create an HTML table element with a thead containing two headers: WordPress.org and WordPress.com. Also add an empty tbody where the comparison rows will go.

Wordpress

  
    
      WordPress.org
      WordPress.com
    
  
  
    
  

Need a hint?

Start by writing the table with headers for both WordPress.org and WordPress.com. Leave the body empty for now.

2

Add a JavaScript array with feature comparisons

Create a JavaScript variable called features that is an array of objects. Each object should have two properties: org and com. Add these exact entries:
1. { org: 'Self-hosted', com: 'Hosted by WordPress' }
2. { org: 'Full control', com: 'Limited control' }
3. { org: 'Free software', com: 'Free and paid plans' }

Wordpress

  
    
      WordPress.org
      WordPress.com
    
  
  
  


// Your code here

Need a hint?

Define a constant array named features with objects holding the exact comparison text for WordPress.org and WordPress.com.

3

Use JavaScript to fill the table body with feature rows

Write JavaScript code that selects the tbody element and uses a forEach loop over the features array. For each feature, create a table row tr with two cells td: one for org and one for com. Append each row to the tbody.

Wordpress

  
    
      WordPress.org
      WordPress.com
    
  
  
  


const features = [
  { org: 'Self-hosted', com: 'Hosted by WordPress' },
  { org: 'Full control', com: 'Limited control' },
  { org: 'Free software', com: 'Free and paid plans' }
];

// Your code here

Need a hint?

Select the table body and loop through the features array. For each feature, create a row with two cells and add it to the table.

4

Add accessibility and responsive design

Add a caption element inside the table with the text Comparison of WordPress.org and WordPress.com. Also add a scope="col" attribute to both th elements for accessibility.

Wordpress

  
    
      WordPress.org
      WordPress.com
    
  
  
  


const features = [
  { org: 'Self-hosted', com: 'Hosted by WordPress' },
  { org: 'Full control', com: 'Limited control' },
  { org: 'Free software', com: 'Free and paid plans' }
];

const tbody = document.querySelector('tbody');
features.forEach(feature => {
  const row = document.createElement('tr');
  const orgCell = document.createElement('td');
  orgCell.textContent = feature.org;
  const comCell = document.createElement('td');
  comCell.textContent = feature.com;
  row.appendChild(orgCell);
  row.appendChild(comCell);
  tbody.appendChild(row);
});

// Your code here

Need a hint?

Add a caption inside the table for screen readers and add scope="col" to the header cells for better accessibility.