Building a Live T20 World Cup 2026 Schedule Page with HTML, CSS & JavaScript

As both a cricket enthusiast and a coding learner, I’ve always wanted to mix my passion for sports with web development. With the upcoming T20 World Cup 2026, I thought—why not build a real-time, responsive match schedule page for fans like me?

In this post, I’ll walk through how I created a simple but stylish schedule component using HTML, CSS, and a bit of JavaScript.

Tools & Tech Used

HTML & CSS (for structure and styling)
JavaScript (for date sorting & live updates)
Optional JSON data structure for match info

Step 1: Creating the Basic Structure (HTML)

T20 World Cup 2026 - Match Schedule

Step 2: Styling the Schedule (CSS)

.schedule {
background: #f9f9f9;
padding: 20px;
border-radius: 12px;
max-width: 600px;
margin: auto;
font-family: sans-serif;
}
.schedule h2 {
color: #006a4e;
text-align: center;
}
.schedule li {
padding: 10px;
border-bottom: 1px solid #ddd;
}

Step 3: Populating Matches Dynamically (JavaScript)

const matches = [
{ date: "2026-06-01", teams: "India vs Pakistan" },
{ date: "2026-06-03", teams: "Australia vs England" },
{ date: "2026-06-05", teams: "New Zealand vs South Africa" },
];

const list = document.getElementById("match-list");
matches.forEach(match => {
const li = document.createElement("li");
li.textContent = ${match.date} - ${match.teams};
list.appendChild(li);
});

Live Example

You can check out a live version of this on my site here: T20 world cup 2026
It includes more styling, updated fixtures, and dynamic updates as new info is released.