Job Portal — MarkupVerse Project

Job Portal — MarkupVerse Project: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.

8 min read Updated 8/22/2026

On this page

HTML Tutorial · Lesson 98 of 100

Job Portal

Basics ✓ → Forms & semantics ✓ → APIs & performance ✓ → Projects

Projects · 4 — MarkupVerse builds · ~10 min · HTML — Real-World Projects

What is this?

A job portal skeleton lists openings with filters, job cards, and apply actions.

Why should you care?

MarkupVerse portfolio project 98 — tech hiring board.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MarkupVerse Careers — Open Roles</title>
</head>
<body class="mv-portfolio mv-portfolio--jobs">
  <header><h1>Work at MarkupVerse</h1></header>
  <main>
    <search aria-label="Filter jobs">
      <label>Keyword <input type="search" name="q" placeholder="Engineer"></label>
      <label>Location
        <select name="loc">
          <option value="">Anywhere</option>
          <option value="remote">Remote</option>
          <option value="blr">Bengaluru</option>
        </select>
      </label>
      <button type="submit">Search</button>
    </search>
    <ul class="job-list">
      <li>
        <article>
          <h2><a href="/jobs/senior-fe">Senior Frontend Engineer</a></h2>
          <p>Remote · HTML, accessibility, design systems</p>
          <a href="/jobs/senior-fe/apply">Apply</a>
        </article>
      </li>
    </ul>
  </main>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MarkupVerse Careers — Open Roles</title>
</head>
<body class="mv-portfolio mv-portfolio--jobs">
  <header><h1>Work at MarkupVerse</h1></header>
  <main>
    <search aria-label="Filter jobs">
      <label>Keyword <input type="search" name="q" placeholder="Engineer"></label>
      <label>Location
        <select name="loc">
          <option value="">Anywhere</option>
          <option value="remote">Remote</option>
          <option value="blr">Bengaluru</option>
        </select>
      </label>
      <button type="submit">Search</button>
    </search>
    <ul class="job-list">
      <li>
        <article>
          <h2><a href="/jobs/senior-fe">Senior Frontend Engineer</a></h2>
          <p>Remote · HTML, accessibility, design systems</p>
          <a href="/jobs/senior-fe/apply">Apply</a>
        </article>
      </li>
    </ul>
  </main>
</body>
</html>

Result