HTML & CSS - lesson 4 | HackIndia Skills

HTML & CSS - lesson 4 | HackIndia Skills | HackIndia

Example

Page shell

This is a clean starter layout for a HackIndia project page. It uses semantic HTML and named grid areas, so the CSS is easy to read.

Do not use tables, floats, or absolute positioning for normal page layout. Older tutorials may show that, but Grid and Flexbox are the current everyday tools.

<body>
  <div class="page">
    <header class="site-header">
      <h1>Campus Budget Splitter</h1>
      <nav aria-label="Main navigation">
        <a href="#features">Features</a>
        <a href="#demo">Demo</a>
      </nav>
    </header>

    <main class="content" id="main">
      <section id="features">
        <h2>Split hostel and trip expenses</h2>
        <p>Track shared costs and settle using UPI.</p>
      </section>
    </main>

    <aside class="sidebar">
      <h2>Project details</h2>
      <p>Built for a college hackathon.</p>
    </aside>

    <footer class="site-footer">
      <p>Public repo linked in the README.</p>
    </footer>
  </div>
</body>

<style>
  .page {
    /* dvh, not vh: on a phone the browser bar makes 100vh taller than
       the screen, so the page scrolls when it should not */
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "header header"
      "content sidebar"
      "footer footer";
    gap: 1rem;
    padding: 1rem;
  }

  .site-header { grid-area: header; }
  .content { grid-area: content; }
  .sidebar { grid-area: sidebar; }
  .site-footer { grid-area: footer; }

  .site-header,
  .content,
  .sidebar,
  .site-footer {
    padding: 1rem;
    border: 1px solid #d0d7de;
    border-radius: 0.75rem;
  }
</style>

Example

Nested card grid

If your main section contains cards, make main or a card wrapper its own grid. This is separate from the page grid.

This works well for project features, team members, pricing cards, or event sessions.

.feature-list {
  display: grid;
  /* As many columns as fit, each at least 16rem wide: three on a
     laptop, one on a phone, and no media query needed */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid #d0d7de;
  border-radius: 0.75rem;
}

Build pages with Grid

Grid is for areas

Grid versus Flexbox

Only direct children

Page shell

Build the grid

Keep order logical

Nested card grid

Do this now

Quick check