Building a Simple News Website: Enhance your Front-end Development Skills using HTML, CSS, and Bootstrap

news-site/
├── index.html
├── styles.css
├── app.js
├── news.json
└── images/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>City Times: local news</title>
  <meta name="description" content="Local news, politics, technology and sport.">
  <link rel="stylesheet" href="styles.css">
  <script src="app.js" defer></script>
</head>
<body>
  <a class="skip" href="#main">Skip to content</a>
  <header class="site-header">
    <a class="brand" href="/">City Times</a>
    <nav aria-label="Categories">
      <ul>
        <li><a href="#" aria-current="page">Home</a></li>
        <li><a href="#politics">Politics</a></li>
        <li><a href="#technology">Technology</a></li>
        <li><a href="#sport">Sport</a></li>
      </ul>
    </nav>
    <label class="search">
      <span class="visually-hidden">Search stories</span>
      <input id="search" type="search" placeholder="Search stories">
    </label>
  </header>

  <main id="main" class="layout">
    <section aria-labelledby="latest">
      <h1 id="latest">Latest news</h1>
      <div id="stories" class="grid"></div>
      <p id="empty" hidden>No stories match your search.</p>
    </section>
    <aside aria-labelledby="trending">
      <h2 id="trending">Trending</h2>
      <ol id="trending-list"></ol>
    </aside>
  </main>

  <footer class="site-footer">
    <p>© 2026 City Times</p>
  </footer>

  <template id="story-card">
    <article class="card">
      <img alt="" loading="lazy" width="640" height="360">
      <div class="card-body">
        <p class="tag"></p>
        <h2><a></a></h2>
        <p class="summary"></p>
        <time></time>
      </div>
    </article>
  </template>
</body>
</html>

:root {
  --bg: #ffffff; --text: #1a1a1a; --muted: #5c5c5c; --accent: #b00020; --card: #f6f6f6;
  font-family: system-ui, sans-serif; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: #eeeeee; --muted: #aaaaaa; --accent: #ff6b6b; --card: #1e1e1e; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
img { max-width: 100%; height: auto; display: block; }

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; background: var(--bg); border-bottom: 3px solid var(--accent);
}
.site-header ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.site-header a { color: inherit; text-decoration: none; }
[aria-current="page"] { font-weight: 700; color: var(--accent); }

.layout { display: grid; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 1rem; }
@media (min-width: 900px) { .layout { grid-template-columns: 3fr 1fr; } }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--card); border-radius: 8px; overflow: hidden; }
.card-body { padding: 1rem; }
.card h2 { font-size: 1.15rem; margin: 0.25rem 0; }
.tag, time { color: var(--muted); font-size: 0.85rem; }

a:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: 0.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

[
  {
    "title": "New metro line opens next month",
    "summary": "The 12 km line links the airport with the city centre.",
    "category": "Politics",
    "url": "stories/metro-line.html",
    "image": "images/metro.webp",
    "date": "2026-09-20",
    "trending": true
  }
]

// app.js
const grid = document.getElementById('stories');
const template = document.getElementById('story-card');
const empty = document.getElementById('empty');
let stories = [];

function render(list) {
  grid.replaceChildren();
  for (const s of list) {
    const card = template.content.cloneNode(true);
    card.querySelector('img').src = s.image;
    card.querySelector('.tag').textContent = s.category;
    const link = card.querySelector('h2 a');
    link.textContent = s.title;
    link.href = s.url;
    card.querySelector('.summary').textContent = s.summary;
    const time = card.querySelector('time');
    time.dateTime = s.date;
    time.textContent = new Date(s.date).toLocaleDateString('en-IN', { dateStyle: 'medium' });
    grid.append(card);
  }
  empty.hidden = list.length > 0;
}

async function init() {
  try {
    const res = await fetch('news.json');
    if (!res.ok) throw new Error(res.statusText);
    stories = await res.json();
  } catch {
    grid.textContent = 'Stories could not be loaded. Please refresh the page.';
    return;
  }
  render(stories);
  const trending = document.getElementById('trending-list');
  for (const s of stories.filter((s) => s.trending).slice(0, 5)) {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = s.url;
    a.textContent = s.title;
    li.append(a);
    trending.append(li);
  }
}

document.getElementById('search').addEventListener('input', (e) => {
  const q = e.target.value.trim().toLowerCase();
  render(stories.filter((s) => (s.title + ' ' + s.summary).toLowerCase().includes(q)));
});

init();