Skip to content

Add prev/next topic navigation at bottom of each topic page #8

Description

@sridhar-3009

Feature request

At the bottom of each topic page, add a prev/next navigation bar so users can move through the course sequentially without going back to the home page.

Design

[ < 05 Transactions ]        [ 07 Query Processing > ]

Two buttons, left-aligned previous and right-aligned next. Use the existing .btn-outline and .btn-primary button styles. Omit "previous" on topic 01, omit "next" on topic 12.

Files to edit (all 12 topic pages)

  • topics/01-intro.html — next only
  • topics/02-relational-model.html through topics/11-distributed-databases.html — both
  • topics/12-interview-guide.html — prev only

Add nav markup just before </div> (closing .container):

<div class="topic-nav">
  <a href="05-transactions.html" class="btn-outline">&larr; 05 Transactions</a>
  <a href="07-query-processing.html" class="btn-primary">07 Query Processing &rarr;</a>
</div>

Add CSS to style.css:

.topic-nav { display:flex; justify-content:space-between; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }

Difficulty: Beginner — pure HTML/CSS, no JavaScript needed

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions