Building an Interactive Job Dashboard: A Deep Dive into HTML and CSS

Building an Interactive Job Dashboard Image

In today's digital era, job portals and dashboards have become an integral part of the recruitment process. They provide a convenient and efficient way for both job seekers and employers to connect and explore opportunities. In this blog post, we will explore the code of a job dashboard built using HTML and CSS. We'll take a closer look at the structure, layout, and interactive elements of the dashboard, and discuss how HTML and CSS work together to create an engaging user experience. With the help of this example you can also create marketing dashboard.

Understanding the Code Structure:

The code begins with the standard HTML structure, including the <html>, <head>, and <body> tags. Within the <head> tag, we define the title of the dashboard and import necessary CSS stylesheets and font files.

Navigating the Navigation Menu:

The dashboard features a navigation menu located on the left side. It is created using an unordered list <ul> with individual menu items represented by list items <li>. Each list item contains an anchor <a> tag with an icon and a descriptive text. The icons are imported from the Font Awesome CDN using the <i> tag. This menu provides quick access to various sections of the dashboard, such as Dashboard, Analytics, Jobs Board, Documents, Settings, Help, and Logout. create a salesforce dashboard with navigation menu

Designing the Main Section:

The main section of the dashboard occupies the majority of the screen space and is divided into two parts: the main top and the main body. The main top serves as a header and displays a catchy phrase to engage the user. You can create dashboard in smartsheet and then covert into HTML and CSS

Video Tutorial

To get started, watch and practice along with the tutorial below. With a bit of effort and dedication, you'll be able to create an online dashboard that can help take your business to the next level.

Implementing Search Functionality:

The search bar is a crucial component of any job dashboard, enabling users to find specific job listings. In this code, the search bar consists of an input field and two select dropdowns. The input field allows users to enter search queries, while the dropdowns provide options to select job categories and apply filters. The CSS styles applied to the search bar give it a clean and professional appearance. Search functionality can be used in custom reports dashboard

Enhancing User Interaction with Tags:

Tags are used to categorize and filter job listings. In this dashboard, the tags bar displays selected tags and allows users to remove them individually. Each tag is represented by a div element with an icon and descriptive text. The icons are again sourced from Font Awesome. This interactive feature enhances user experience and flexibility in refining their job search criteria.

Showcasing Job Listings:

The heart of the job dashboard lies in the display of job listings. The job cards are designed using CSS to provide a clean and appealing layout. Each job card contains relevant information such as the company logo, job title, company name with a job level designation, salary range, and posting date. The use of icons in the job details section adds visual appeal and helps users quickly identify and comprehend job listings. You can create dashboard in datadog

Source code

If you like this dashboard design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other is CSS after creating these files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Job Dashboard | By Code Info</title>
  <link rel="stylesheet" href="style.css" />
  <!-- Font Awesome Cdn Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
  <div class="container">
    <nav>
      <div class="navbar">
        <div class="logo">
          <img src="/pic/logo.jpg" alt="">
          <h1>jobs</h1>
        </div>
        <ul>
          <li><a href="#">
            <i class="fas fa-user"></i>
            <span class="nav-item">Dashboard</span>
          </a>
          </li>
          <li><a href="#">
            <i class="fas fa-chart-bar"></i>
            <span class="nav-item">Analytics</span>
          </a>
          </li>
          <li><a href="#">
            <i class="fas fa-tasks"></i>
            <span class="nav-item">Jobs Board</span>
          </a>
          </li>
          <li><a href="#">
            <i class="fab fa-dochub"></i>
            <span class="nav-item">Documnents</span>
          </a>
          </li>
          <li><a href="#">
            <i class="fas fa-cog"></i>
            <span class="nav-item">Setting</span>
          </a>
          </li>
          <li><a href="#">
            <i class="fas fa-question-circle"></i>
            <span class="nav-item">Help</span>
          </a>
          </li>
          <li><a href="#" class="logout">
            <i class="fas fa-sign-out-alt"></i>
            <span class="nav-item">Logout</span>
          </a>
          </li>
        </ul>
      </div>
    </nav>

    <section class="main">
      <div class="main-top">
        <p>Explore the universe!</p>
      </div>
      <div class="main-body">
        <h1>Recent Jobs</h1>
      
      <div class="search_bar">
        <input type="search" placeholder="Search job here...">
        <select name="" id="">
          <option>Category</option>
          <option>Web Design</option>
          <option>App Design</option>
          <option>App Development</option>
        </select>
        <select class="filter">
          <option>Filter</option>
        </select>
      </div>

      <div class="tags_bar">
        <div class="tag">
          <i class="fas fa-times"></i>
          <span>Programming</span>
        </div>
        <div class="tag">
          <i class="fas fa-times"></i>
          <span>Design</span>
        </div>
        <div class="tag">
          <i class="fas fa-times"></i>
          <span>PHP</span>
        </div>
        <div class="tag">
          <i class="fas fa-times"></i>
          <span>JavaScript</span>
        </div>
      </div>

      <div class="row">
        <p>There are more than <span>400</span> Jobs</p>
        <a href="#">See all</a>
      </div>

      <div class="job_card">
        <div class="job_details">
          <div class="img">
            <i class="fab fa-google-drive"></i>
          </div>
          <div class="text">
            <h2>UX Designer</h2>
            <span>Google Drive - Junior Post</span>
          </div>
        </div>
        <div class="job_salary">
          <h4>$6.7 - $12.5k /yr</h4>
          <span>1 days ago</span>
        </div>
      </div>
      
      <div class="job_card">
        <div class="job_details">
          <div class="img">
            <i class="fab fa-google"></i>
          </div>
          <div class="text">
            <h2>JavaScript Developer</h2>
            <span>Google - Senior Post</span>
          </div>
        </div>
        <div class="job_salary">
          <h4>$8.7 - $13.2k /yr</h4>
          <span>2 days ago</span>
        </div>
      </div>

      <div class="job_card">
        <div class="job_details">
          <div class="img">
            <i class="fab fa-facebook"></i>
          </div>
          <div class="text">
            <h2>Product Developer</h2>
            <span>Facbook - Manager Post</span>
          </div>
        </div>
        <div class="job_salary">
          <h4>$11 - $18.5k /yr</h4>
          <span>2 days ago</span>
        </div>
      </div>

      <div class="job_card">
        <div class="job_details">
          <div class="img">
            <i class="fab fa-git-alt"></i>
          </div>
          <div class="text">
            <h2>Programmer</h2>
            <span>Github - Juni Post</span>
          </div>
        </div>
        <div class="job_salary">
          <h4>$6 - $11.5k /yr</h4>
          <span>3 days ago</span>
        </div>
      </div>

      <div class="job_card">
        <div class="job_details">
          <div class="img">
            <i class="fab fa-youtube"></i>
          </div>
          <div class="text">
            <h2>React.js Expert</h2>
            <span>Youtube - VIP</span>
          </div>
        </div>
        <div class="job_salary">
          <h4>$12.5 - $25.5k /yr</h4>
          <span>4 days ago</span>
        </div>
      </div>
    </div>
    </section>
  </div>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

/* import google fonts */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); *{ margin: 0; padding: 0; outline: none; border: none; text-decoration: none; list-style: none; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ background: rgb(233, 233, 233); } .container{ display: flex; width: 1200px; margin: auto; } nav{ position: sticky; top: 0; left: 0; bottom: 0; width: 280px; height: 110vh; background: #fff; } .navbar{ width: 80%; margin: 0 auto; } .logo{ margin: 2rem 0 1rem 0; padding-bottom: 3rem; display: flex; align-items: center; } .logo img{ width: 50px; height: 50px; border-radius: 50%; } .logo h1{ margin-left: 1rem; text-transform: uppercase; } ul{ margin: 0 auto; } li{ padding-bottom: 2rem; } li a{ font-size: 16px; color: rgb(85, 83, 83); } .nav-item{ } nav i{ width: 50px; font-size: 18px; text-align: center; } .logout{ position: absolute; bottom: 20px; } /* Main Section */ .main{ width: 100%; } .main-top{ width: 100%; background: #fff; padding: 10px; text-align: center; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color: rgb(43, 43, 43); } .main-body{ padding: 10px 10px 10px 20px; } h1{ margin: 20px 10px; } .search_bar{ display: flex; padding: 10px; justify-content: space-between; } .search_bar input{ width: 50%; padding: 10px; border: 1px solid rgb(190, 190, 190); } .search_bar input:focus{ border: 1px solid blueviolet; } .search_bar select{ border: 1px solid rgb(190, 190, 190); padding: 10px; margin-left: 2rem; } .search_bar .filter{ width: 300px; } .tags_bar{ width: 55%; display: flex; padding: 10px; justify-content: space-between; } .tag{ background: #fff; padding: 10px 15px; border-radius: 20px; display: flex; align-items: center; font-size: 13px; cursor: pointer; } .tag i{ margin-right: 0.7rem; } .row{ display: flex; padding: 10px; margin-top: 1.3rem; justify-content: space-between; } .row p{ color: rgb(54, 54, 54); font-size: 15px; } .row p span{ color: blueviolet; } .job_card{ width: 100%; padding: 15px; cursor: pointer; display: flex; border-radius: 10px; background: #fff; margin-bottom: 15px; justify-content: space-between; border: 2px solid rgb(190, 190, 190); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); } .job_details{ display: flex; } .job_details .img{ display: flex; justify-content: center; align-items: center; } .job_details .img i{ width: 70px; font-size: 3rem; margin-left: 1rem; padding: 10px; color: rgb(82, 22, 138); background: rgb(216, 205, 226); } .job_details .text{ margin-left: 2.3rem; } .job_details .text span{ color: rgb(116, 112, 112); } .job_salary{ text-align: right; color: rgb(54, 54, 54); } .job_card:active{ border: 2px solid blueviolet; transition: 0.4s; }

Conclusion:

In this blog post, we explored the code behind a job dashboard built using HTML and CSS. We dissected its structure, layout, and interactive elements to understand how HTML tags and CSS styles work together to create an engaging and user-friendly experience. This job dashboard showcases the importance of thoughtful design and functionality in providing an efficient platform for job seekers and employers to connect.

By leveraging HTML and CSS, developers can create visually appealing and interactive job dashboards that enhance the job search process. Moreover, this code can serve as a starting point for customization and expansion, allowing developers to incorporate additional features, such as user authentication, job application forms, and advanced search options. You can easily create an online dashboard by using online tools.

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.