Build Your Own Job Portal Landing Page: HTML, CSS, JavaScript Tutorial

Faraz

By Faraz -

Learn how to create a job portal landing page using HTML, CSS, and JavaScript. Source code included for easy implementation.

Join us on Telegram
create a job portal landing page using html, css, and javascript.webp
Read AlsoImplementing Product Filtering with HTML, TailwindCSS, and JavaScript.jpgImplementing Product Filtering with HTML, TailwindCSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

A job portal landing page serves as the gateway for job seekers and recruiters to interact with your platform. Let's dive into the process of creating one from scratch using HTML, CSS, and JavaScript.

Source Code

Step 1 (HTML Code):

Begin by creating the basic structure of your landing page using HTML. Define the necessary elements such as headers, navigation menus, search bars, and job listing sections.

Let's break down the HTML code step by step:

1. Document Type Declaration: <!doctype html> declares the document type and version of HTML being used.

2. HTML Document Structure:

  • <html>: Defines the root element of the HTML document.
  • <head>: Contains meta-information about the document, such as title, links to stylesheets, and scripts.
  • <body>: Contains the content of the document visible to users.

3. Meta Tags: Provide metadata about the HTML document, such as character encoding and viewport settings.

4. Bootstrap CSS: Links to Bootstrap CSS files for styling the webpage. Bootstrap is a popular CSS framework for building responsive and mobile-first websites.

5. Font Awesome CSS: Links to Font Awesome CSS for using icons throughout the webpage.

6. Custom CSS: Links to a custom stylesheet (styles.css) for additional styling specific to this website.

7. Header Section (<header>):

  • Contains a navigation bar (<nav>) with menu items (<ul>), logo, and dropdown menu for user profile.
  • Utilizes Bootstrap classes for styling and responsiveness.

8. Banner Section:

  • Contains a banner with a title and description.
  • Styled with custom CSS.

9. Search Box:

  • Contains input fields for searching for jobs based on skills, location, and experience.
  • Styled with Bootstrap classes.

10. Top Recruiters Section:

  • Displays images of top recruiters.
  • Each image is wrapped in an <img> tag.

11. Category-wise Search Section:

  • Divided into categories like "Jobs by Skills," "Jobs By Location," and "Jobs Types."
  • Each category contains a list of links with corresponding counts.

12. Recent Jobs Section:

  • Displays recent job updates, each containing job details like title, company, experience, salary, location, skills, and description.
  • Includes "Apply" button for each job.
  • Pagination links at the bottom.

13. Site Stats Section:

  • Displays statistics related to the job site, such as the number of job seekers, recruiters, active jobs, and companies.

14. Footer Section (<footer>):

  • Contains links to various sections of the website (About Us, Contact Us, etc.).
  • Social media icons for sharing/connecting.
  • Copyright information.

15. Scripts:

  • Includes jQuery, Popper.js, and Bootstrap JavaScript files for interactivity and functionality.
  • Links to a custom JavaScript file (script.js) for additional scripting.
Read AlsoDevelop a Flight Booking App Using HTML, CSS, and JavaScript.webpDevelop a Flight Booking App Using HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Apply CSS to enhance the visual appeal of your landing page. Use stylesheets to customize the layout, fonts, colors, and spacing to align with your brand identity and create a polished look.

Let's break it down section by section:

1. Universal Reset:

  • The * selector applies styles to all elements on the page.
  • It sets margin and padding to 0 for all elements and makes sure that padding and border are included in the element's total width and height (box-sizing: border-box).

2. Styling for Body and HTML:

  • Sets the height of the HTML and body elements to 100%.

3. Styling for Header:

  • Applies a background image to the header, ensures it doesn't repeat, fixes it in place, and makes it cover the entire header.

4. Main Menu Styling:

  • Styles the main menu items, including their spacing, font size, and color.
  • Adds an underline effect on hover or when an item is active.

5. Media Queries for Responsive Design:

  • Adjust styles for smaller screens, such as collapsing the menu into a toggle button and changing menu item widths.
  • Modifies the appearance of the dropdown menu.

6. Styling for Banner Section:

  • Sets a background image for the banner with text overlaid.

7. Styling for Search Bar:

  • Styles the search bar, including its position, size, and appearance.

8. Styling for Top Recruiters Section:

  • Defines the appearance of recruiter details and images.

9. Styling for Recent Jobs Section:

  • Styles job listings, including their layout, font, and background.

10. Styling for Pagination Links:

  • Defines the appearance of pagination links.

11. Styling for Site Statistics Section:

  • Defines the appearance of statistic boxes.

12. Styling for Footer:

  • Sets the background color and styles for the footer.
* {
  margin: 0;
  padding: 0;   
  box-sizing: border-box;
      
}

body,
html {
  height: 100%;
}

header {
  /* background: #2d2d7f !important; */
  background-image: url("https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

/* main-header start */

[data-target="#mainMenu"] {
  position: relative;
  z-index: 999;
}

#mainMenu li > a {
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  font-weight: 400;
  /* position relative to its previous postion */
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.main-header.fixed-nav #mainMenu li > a {
  color: #fff;
  text-decoration: none;
}

#mainMenu li:not(:last-of-type) {
  margin-right: 30px;
}

#mainMenu li > a::before {
  position: absolute;
  content: "";
  width: calc(100% - 1px);
  height: 1px;
  background: #fff;
  bottom: -6px;
  left: 0;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  z-index: -1;
  -webkit-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}

#mainMenu li > a:hover::before,
#mainMenu li > a.active::before {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}

.main-header.fixed-nav #mainMenu li > a::before {
  background: #000;
}

.main-header {
  position: relative;
  left: 0;
  z-index: 99;
  width: 100%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.main-header.fixed-nav {
  top: 0;
  background: #fff;
  -webkit-box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.09);
  box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.09);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

/* main-header end */

@media (max-width: 991px) {
  /*header starts*/

  .collapse.in {
    display: block !important;
    padding: 0;
    clear: both;
  }
  .navbar-toggler {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 25px;
    right: 0;
    border: none;
    border-radius: 0;
    outline: none !important;
  }
  .main-header .navbar {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  .main-header .navbar-nav {
    margin-top: 70px;
  }
  .main-header .navbar-nav li .nav-link {
    text-align: center;
    padding: 20px 15px;
    border-radius: 0px;
  }
  /**/
  .main-header .navbar-toggler .icon-bar {
    background-color: #fff;
    margin: 0 auto 6px;
    border-radius: 0;
    width: 30px;
    height: 3px;
    position: absolute;
    right: 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .main-header .navbar .navbar-toggler .icon-bar:first-child {
    margin-top: 3px;
  }
  .main-header .navbar-toggler .icon-bar-1 {
    width: 10px;
    top: 0px;
  }
  .main-header .navbar-toggler .icon-bar-2 {
    width: 16px;
    top: 12px;
  }
  .main-header .navbar-toggler .icon-bar-3 {
    width: 20px;
    top: 21px;
  }
  .main-header .current .icon-bar {
    margin-bottom: 5px;
    border-radius: 0;
    display: block;
  }
  .main-header .current .icon-bar-1 {
    width: 18px;
  }
  .main-header .current .icon-bar-2 {
    width: 30px;
  }
  .main-header .current .icon-bar-3 {
    width: 10px;
  }
  .main-header .navbar-toggler:hover .icon-bar {
    background-color: #fff;
  }
  .main-header .navbar-toggler:focus .icon-bar {
    background-color: #fff;
  }
  /*header ends*/
  #mainMenu li {
    width: 120px;
    text-align: left;
    margin-left: 30%;
    margin-bottom: 10px;
  }

  .banner {
    padding-top: 150px;
  }
  .dropdown-toggle{
    padding-right: 55px;
  }
  .dropdown-content{
    margin-left: 47%;
  }
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  /* background-color: #f1f1f1; */
  min-width: fit-content;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

/* section starts */

.banner {
  height: 80vh;
  background-image: url("https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  background-position: center;
  background-size: cover;
  color: #fff;
}

.banner h1 {
  font-size: 50px;
  font-weight: 600;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.banner p {
  padding-top: 15px;
  line-height: 150%;
  font-size: larger;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
@media (max-width: 321px){
.banner p{
  display: none;
}
.search-job {
  margin-top:-20px;
}
}
/* search bar */

.search-job {
  padding: 30px 0;
  margin: -50px 6% 50px;
  background-image: linear-gradient(to right, #b3b3b3, #57606f);
}
@media (max-width: 514px){
.search-job {
  margin-top:-15px;
}
}
.search-job .form-control {
  max-width: 250px;
  display: inline-flex;
  margin: 10px 5px;
  height: 50px;
  border-radius: 25px;
  box-shadow: none !important;
  border: none !important;
  padding-left: 30px;
}

.search-job .btn-primary {
  width: 150px;
  border-radius: 25px;
  box-shadow: none !important;
  border: none;
  height: 50px;
  margin: 5px;
  padding: 5px 20px;
  display: table-cell;
  vertical-align: middle;
}

.search-job .btn-primary:hover {
  border: 1px solid yellow;
}

/* top recuruiters */

#recruiters {
  padding-top: 50px;
  padding-bottom: 100px;
}

#recruiters h3 {
  text-align: center;
  padding-bottom: 40px;
}

h3::before {
  content: "";
  background-image: linear-gradient(to right, #6db9ef, #7ce08a);
  width: 50px;
  height: 30px;
  position: absolute;
  z-index: -10;
  margin-top: -15px;
  border-top-left-radius: 70px;
  border-bottom-right-radius: 90px;
}

#recruiters img {
  max-width: 100px;
  margin: 10px 20px;
}

.col-md-3 {
  display: inline-block;
  margin-left: -4px;
}

.col-md-3 img {
  width: 100%;
  height: auto;
}

body .carousel-indicators li {
  background-color: red;
}

body .carousel-control-prev-icon,
body .carousel-control-next-icon {
  background-color: red;
}

body .no-padding {
  padding-left: 0;
  padding-right: 0;
}

/* category wise jobs */

.category ul li {
  list-style: none;
}

.category {
  padding: 30px;
  border-radius: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 40px 0 rgba(110, 130, 208, 0.18);
}

.jobcategory {
  width: 20%;
}

.categories {
  display: inline-flex;
  justify-content: space-evenly;
}

h5 {
  border-bottom: 1px solid black;
}

@media only screen and (max-width: 1000px) {
  .categories {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .jobcategory {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* recent jobs */

#jobs {
  background: #f8f8fa;
  padding: 50px 0;
}

.company-details {
  box-shadow: 0 2px 70px 0 rgba(110, 130, 208, 0.18);
  border-radius: 5px;
  margin-bottom: 20px;
}

.job-update {
  background: white;
  padding: 10px 20px;
  border-radius: 5px;
}

.job-update h4 strong {
  font-size: 30px;
  font-family: "Oswald", sans-serif;
}

.job-update .fa {
  margin-top: 5px;
  margin-right: 10px;
  color: #77d1b1;
}

.price {
  color: #018f62;
}

.location {
  color: red;
}

/* .description {
  display: none;
}
.company-details :hover .description {
  display: block;
}
 */


.description {
    overflow: hidden; 
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
.company-details :hover .description{
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}


.bookmark{
  color: #000 !important;
  float: right;
  display: inline-flex;
  font-size: 20px;
  cursor: pointer;
}

.bookmark p{
  margin-left: 5px;
    font-size: 20px;
    cursor: pointer;

}
.fa-heart-o:before {
    content: "\f08a";
    margin-right: 8px;
      font-size: 20px;
      cursor: pointer;
      
    color: rgb(33, 33, 226) !important;

}
.fa-heart-o:before .bookmark{
  color: rgb(33, 33, 226) !important;
}
.fa-heart:before {
    content: "\f004";
    margin-right: 8px;
      font-size: 20px;
      cursor: pointer;
      color: rgb(33, 33, 226) !important;
}




.job-update small {
  background: #efefef;
  padding: 1px 5px;
  margin: 0 5px;
}

.job-update small:hover {
  cursor: pointer;
  background: #23c0e9;
  z-index: 2;
  transition: all 200ms ease-in;
  transform: scale(1.1);
  color: white;
}

.job-update p {
  margin-bottom: 0 !important;
}

.job-update a {
  text-decoration: none !important;
  color: #b6bed2;
  float: right;
}

.job-update a:hover {
  text-decoration: none !important;
  color: rgb(0, 95, 238);
  float: right;
}

.apply-btn {
  height: 40px;
  background-image: linear-gradient(to right, #6db9ef, #111136);
  padding: 5px;
  border-bottom-left-radius: 5px;
}

.apply-btn .btn-primary {
  padding: 0 30px;
  float: right;
  box-shadow: none !important;
  background: transparent;
  border: 1px solid #fff;
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: #f36969;
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
  border-radius: 10px;
}

.pagelink li {
  height: 25px;
  list-style: none;
  width: 25px;
  display: inline-block;
  cursor: pointer;
}

.pagelink li:hover,
.activa {
  color: #fff;
  background-image: linear-gradient(to right, #6db9ef, #7ce08a);
}

.left-arrow {
  color: #999;
}

.right-arrow {
  color: #29b929;
}

/* site-stats */

#site-stats {
  padding: 100px 0;
}

#site-stats {
  margin-bottom: 30px;
}

.stats-box {
  padding: 30px;
  border-radius: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 40px 0 rgba(110, 130, 208, 0.18);
}

.stats-box:hover {
  transition: all 0.2s ease-out;
  box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
  border: 1px solid #cccccc;
  background-color: #00838d;
  transform: scale(1.1);
}

.stats-box:hover p {
  transition: all 0.3s ease-out;
  color: #ffffff;
}

.stats-box:hover i {
  transition: all 0.3s ease-out;
  color: #ffffff;
}

.stats-box:hover small {
  transition: all 0.3s ease-out;
  color: #ffffff;
}

.stats-box .fa {
  font-size: 30px;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* footer */

.page-footer {
  background-color: rgb(37, 28, 28);
}

.icon_name {
  padding-left: 10px;
  cursor: pointer;
}

.icon_name:hover {
  color: #00ff00;
}

.dark-grey-text {
  color: #fff;
}

Step 3 (JavaScript Code):

Integrate JavaScript to add dynamic functionalities to your landing page. Let's break it down section by section:

1. let bookmark = document.getElementsByClassName('bookmark'): This line selects all elements in the document that have the class name 'bookmark' and stores them in the variable bookmark.

2. Array.from(bookmark).forEach(v => v.addEventListener('click', function () { ... }));: This line converts the HTMLCollection bookmark into an array and then iterates over each element using forEach. For each element, it adds a click event listener. When one of these elements is clicked, the provided function will execute.

3. let el = this.parentElement.getElementsByClassName('bookmark')[0]: Inside the event listener function, this refers to the element that was clicked. parentElement gets the parent of the clicked element, and getElementsByClassName('bookmark')[0] selects the first element with the class name 'bookmark' within that parent and stores it in the variable el.

4. if (el.classList.contains("fa-heart-o")) { ... } else { ... }: This conditional statement checks if the selected element has the class 'fa-heart-o'. If it does, it means the element is currently displaying an outline heart icon. If it doesn't, it means the element is displaying a filled heart icon.

5. Inside the if-else block:

  • If the element has the class 'fa-heart-o', it removes that class and adds the class 'fa-heart', effectively changing the icon from an outline heart to a filled heart. It also changes the text content of the element to "Job saved".
  • If the element doesn't have the class 'fa-heart-o', it removes the class 'fa-heart' and adds 'fa-heart-o', switching the icon back to an outline heart. It also changes the text content of the element to "Save Job".
let bookmark = document.getElementsByClassName('bookmark')
Array.from(bookmark).forEach(v => v.addEventListener('click', function () {

    let el = this.parentElement.getElementsByClassName('bookmark')[0]

    if (el.classList.contains("fa-heart-o")) {
        el.classList.remove("fa-heart-o")
        el.classList.add("fa-heart")
        el.innerText = "Job saved"

    } else {
        el.classList.remove("fa-heart")
        el.classList.add("fa-heart-o")
        el.innerText = "Save Job"
    }
}));

Final Output:

create a job portal landing page using html, css, and javascript.gif

See the Pen Job Portal Landing Page by Faraz (@codewithfaraz) on CodePen.

Read AlsoScroll Animation Made Easy HTML, CSS, JS with GSAP ScrollTrigger.jpgScroll Animation Made Easy: HTML, CSS, JS with GSAP ScrollTrigger

Conclusion:

By following these steps, you can create a professional and user-friendly job portal landing page that effectively connects job seekers with recruiters. Experiment with different design elements and functionalities to tailor the landing page to your specific requirements and audience preferences. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: job portal landing page, html, css, javascript, user interface, job listings, search functionality, company profiles, source code, how to create a job portal landing page, html and css for the job portal, javascript for interactive web elements, user-friendly job search interface
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post