HTML & CSS - lesson 3 | HackIndia Skills

HTML & CSS - lesson 3 | HackIndia Skills | HackIndia

Example

Navbar example

This keeps the HTML semantic. The nav means navigation. Flexbox only handles the visual layout.

The links stay in DOM order, so keyboard users move through them in the same order they see them.

<header class="site-header">
  <a class="brand" href="/">Campus Bazaar</a>

  <nav aria-label="Main navigation">
    <ul class="nav-list">
      <li><a href="#features">Features</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<style>
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
</style>

Example

Cards that wrap

Flex items can grow and shrink to use available space. This makes a simple card row adapt before you add media queries in a later lesson.

Here, each card tries to be around 16rem wide, can grow to fill space, and can shrink when needed.

<section class="card-row" aria-label="Project features">
  <article class="card">
    <h2>UPI payments</h2>
    <p>Record payment status for each order.</p>
  </article>
  <article class="card">
    <h2>Hostel delivery</h2>
    <p>Show pickup points inside campus.</p>
  </article>
  <article class="card">
    <h2>Seller dashboard</h2>
    <p>List items and track requests.</p>
  </article>
</section>

<style>
  .card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .card {
    flex: 1 1 16rem;
    padding: 1rem;
    border: 1px solid #d0d0d0;
    border-radius: 0.75rem;
  }
</style>

Lay out with Flexbox

One main idea

Axes matter

Navbar example

Build a flex row

Use gap first

Do not reorder content

Cards that wrap

Do this now

Quick check