JOB PORTAL FOR FRESH IT GRADUATES

A Case Study

Presented to the Faculty of

Mary the Queen College Pampanga

Institute of Computer Studies

Guagua Pampanga

In Partial Fulfillment of the

Requirements for the course

ITFE4 – Information Systems Planning

ITPE4 – Front-end Web Development

Submitted by

RESTINE ALEXANDRIA BAUL

JOEBERT DABU

REINIAN MALIT

JIN ASHLEY MANALANG

HOVINCI MAGCALAS

JOSHUA EMMANUEL VELO

1.1 ABOUT THE TOPIC

In today's fast-paced and competitive job market, finding the right job opportunities for recent IT graduates

can be a daunting task. Job Portal For Fresh IT Graduates systems address this challenge by providing an online

platform that connects job seekers with potential employers. The system acts as a central hub where job seekers

can search and apply for jobs in a streamlined and efficient manner. It offers a wide range of features that make

the job search process easier for both job seekers and employers. By using the capabilities of this system, recent

IT graduates are more likely to find relevant job opportunities and start their careers in the IT industry.

The features of the Job Portal system are the following:

Login Form: The Login form allows registered users to access their accounts securely. The login form typically

consists of two input fields: one for the email address and another for the password. The user enters their

registered email address and corresponding password into the form and submits it.

Registration Form: Registration form enables new users to create an account on the Job Portal system. You

need to fill out and input your name, email, password, confirm password to create a new account.

Job Filter: The Job Filter feature allows users to narrow down their job search based on specific criteria such as

location, industry, experience level, and salary range. This helps users find relevant job listings quickly and

efficiently.

Job Categories: The Job Categories section categorizes job listings into different fields or industries. This

classification makes it easier for job seekers to browse through jobs in their preferred industry or field of

interest.

Hiring Job: The Hiring Job section displays the job listings that are currently open and available for

applications. Users can view the latest job opportunities in this section, allowing users to explore a broader

range of job options.

that provides detailed information about that specific job. This may include the job description, required

qualifications, responsibilities, benefits, and application instructions.

About Us: The "About Us" section of the Job Portal system provides an overview of the platform and its

purpose. It may describe the system's mission, goals, and the benefits it offers to both job seekers and

employers. This section helps users understand the value and functionality of the system.

Contact Us: The "Contact Us" feature provides users with a means to communicate with the system

administrators or support team. Typically, this feature directs users to a form or contact page where they can

submit their concerns, questions, or feedback. This allows users to reach out for assistance or provide input to

improve the system.

Mobile View: The Job Portal system is designed to be mobile-friendly, ensuring easy access for users on

various devices, including smartphones and tablets. The forms are optimized to fit the smaller screens of mobile

devices without sacrificing usability.

Mouse Cursor Interaction: To enhance the user experience, the Job Portal system incorporates interactive

features that respond to mouse cursor actions. This can be achieved through various visual changes, such as

color transitions or highlighting.

1.2 HTML, CSS

HTML forms the backbone of web pages by defining the structure and organizing the content. HTML is

used to create the layout of the portal, including sections such as the job listings, filters, login/registration forms,

and contact forms. It allows developers to structure the content in a semantic and meaningful way, making it

easier for users to navigate and comprehend the information. CSS plays a vital role in web design, as it is

responsible for the visual presentation and styling of web pages. In the Job Portal system, CSS is utilized to

create an appealing and intuitive user interface. It allows developers to customize the appearance of various
elements, such as fonts, colors, backgrounds, buttons, and layout arrangements. CSS helps in achieving

consistency and a visually pleasing user experience.

HTML and CSS provide the necessary tools to create responsive designs that adapt to different screen sizes

and orientations. This helps in improving user accessibility and engagement, as users can access the Job Portal

system from their smartphones or tablets.

HTML and CSS are fundamental technologies in web development and play a vital role in the creation of

the Job Portal system. It enable us to structure content, create visually appealing interfaces, ensure

responsiveness, customize designs, maintain consistency, and improve accessibility. By using the advantages of

HTML and CSS, the Job Portal system can deliver an engaging, user-friendly, and effective platform for job

seekers and employers.

1.3 Systems Development Lifecycle

A. Planning

Define Objectives and Goals: Clearly articulate the purpose of the job portal. Determine the specific goals you

want to achieve with the platform, such as connecting IT graduates with job opportunities, providing a user-

friendly interface, or facilitating efficient job application processes.

Identify Target Audience and Requirements: Identify the target audience for the job portal, which in this case

is fresh IT graduates. Conduct user research to understand their specific needs and requirements, such as job

search preferences, desired features, and ease of use.

Competitive Analysis: Analyze existing job portals to understand their strengths and weaknesses. Look for

features and functionalities that are popular among users and differentiate successful portals from the rest. This

analysis can help identify opportunities to improve upon existing solutions and offer unique value to users.

User Experience: Pay attention to the usability and overall user experience of the portal. Ensure that the

interface is intuitive, visually appealing, and easy to navigate. Consider factors such as responsive design,

accessibility, and mobile-friendliness.

Mobile Responsiveness: With the increasing use of mobile devices, it's important to ensure the job portal is

responsive and provides an optimal experience across different screen sizes. Analyze how existing portals

handle mobile responsiveness and incorporate best practices into the design and development process.

C. Design and Development

User Interface Design: Based on the gathered requirements, create wireframes or mockups that represent the

layout and visual elements of the job portal. Consider the placement of navigation menus, forms, job listings,

search functionality, and other components.

HTML Structure: Once the UI design is finalized, start translating the design into HTML. Begin by creating

the overall structure of the web pages using HTML tags such as <html>, <head>, and <body>. Divide the

content into logical sections using appropriate HTML elements.

Navigation: Implement the navigation menus and links using HTML <nav> and <a> tags. Ensure that users can

easily navigate through different pages or sections of the job portal.

Content Layout: Use HTML tags such as <header>, <footer>, <main>, and <section> to structure and organize

the content on each page. This helps create a clear hierarchy and improves readability.
Forms: Implement forms for user registration, login, job filter, and other interactive features. Use HTML

<form> and input elements such as <input>, <select>, and <textarea> to create the necessary form fields.

Styling with CSS: Apply CSS styles to the HTML elements to control their appearance. Use CSS selectors to

target specific elements and apply properties such as color, font, size, padding, margin, and positioning. Ensure

the design is visually appealing and consistent across the job portal.

Responsive Design: Make the job portal responsive by using CSS media queries and techniques such as fluid

grids or CSS frameworks. This ensures that the portal adapts and displays well on different devices and screen

sizes. Also, by applying hover styles to different features, you can enhance the user experience and provide

visual feedback when users interact with elements on your job portal..

D. Testing

Unit Testing: This involves testing individual components, such as HTML forms or CSS stylesheets, to ensure

they function correctly. It helps identify any bugs or errors within specific elements.

Integration Testing: This focuses on testing the interaction between different components of the job portal,

including HTML and CSS components, to ensure they work together seamlessly. It helps detect any issues that

may arise from the integration of different modules or features.

E. Implementation

Debugging: After the testing phase, if developers encounter issues or bugs that need to be addressed, they need

to identify, analyze, and resolve these problems to ensure the system functions correctly.

Documentation: Proper documentation plays a crucial role in the long-term maintenance and understanding of

any system, including a job portal. It provides a wealth of information that can help developers, administrators,

and users comprehend the system's functionalities, troubleshoot problems, and ensure smooth operations.
 CHAPTER 2 - SYSTEM DESIGN

2.1 SCREENSHOTS of your system (PER MODULE)

This is the Registration Form interface wherein a new user can create an account to access the website. The user

needs to enter their name, email and their desired password for their account.

This is the Log-In Form interface wherein if a user has already created or have an existing account they can

login using their email and password to access the website.

This is the Home Interface of the website and it contains the "Search Job" form wherein the user can search the

job title they want and it's location to see if its available on the Job Portal website.
The next interface is the "Job Categories" form wherein it shows all the different fields of jobs related to what

the users wants to apply.

The next interface is the "Hiring Jobs" form wherein it shows all the listed available job positions that are

currently open.
In the Job list Interface it contains the "Jobs Filter" form wherein the user can search the specific job available

that meets their own preferences.

The next interface is the "All Hiring Jobs" form wherein it shows all the listed available job positions from

different companies and locations that are currently open.

When the "View Details" button is clicked the "Job Details" form will show and it contains all the information

and description of the specified job that a user can read for them see if they are qualified before applying.
The "About Us" Interface contains the brief description of the Job Portal website that gives users a knowledge

of what the website can offer to them.

phone number, email and address that a user can use when they want to address a concern or issue on the

website. Users can also send their messages or feedbacks.

3.1 CODES

HOME PAGE
JOB LIST
ABOUT US
LOGIN
3.1.1

Home Page

So, with the help of HTML and CSS were able to create and layout website design featuring the

Navigation Bar for the Headers and we put Title Name above for the Website Name itself. We also import CSS

Styles on HTML File so that our CSS codes will be apply on the Web Page, and as you can see on our HTML

File, we used div id class element for the navigation bar so that our div class will separate from another div class

element and just only refer into your implemented once. And talking about containers we used it for the

searching bar when you are looking for some available work nearby your location, and it could be displaying

some another hiring jobs in different position.

Job List

And for the job list we apply simple website form for searching available jobs over the internet and it is

more detailed than the Home Page that everything about hiring company vacant position is already display and

posted there. For the container of the web form, we used dropdown as a select html tag to know how many days
from being uploaded, if how much estimated salary offer, and what is it type of Job like you will be as Full/ Part

Time programmer and what time only available for the job you intent to apply and looking for.

About us

We place and apply the purpose of our website and what its use for everyone, we also provide our

background as knowledge for the user as they will know what we can serve to them. We set “Contact us” button

for laying some concerns and suggestion from our visitors for the websites, and then we also set our identity

(MY GROUPMATES) on our website for credential use. So, they will know who’s behind the program.

Log – In

For the log – in page we set a small web form for signing your account including our greetings for every

user accessing our page, we added also a hyperlink for Registering or Register Page that will serve as attracting

users to create an account into our website.

Home Page

In this Home Page, here what you see is a full content of our website which contains all available hiring

company nearby you that looking fit into their need position and were us developer going to show their

company background so that you will have a guide if you could be fit into that specific job position and you will

be also know where the exact place, what is the company history, what are the job qualifications, and how much

the company offer.

In terms of Job List, it’s more detailed and display information because it will show in one page all available

jobs, you just search whatever job available you like and wherever has new hiring company then our website

will bring you into the best company that has great salary.
About Us

While in About Us Page, we provide some picture of us for identity if who are the developers behind this

website so that the users would like to visit our website, they have an idea who are the creator. And they are

going to know who they may contact to one of us if they have want to raise concern or suggestions for the

improvement of our Website.

For the log – in portion we apply small web form on the top of our webpage that requiring you to sign – in your

newly created account to test if your account is already working with our website. Moreover, you can use it

anytime and everywhere if you had plan to look for a job. Along with that as you can see from below, we place

a link containing a question “If you don’t a have an account?” as we are encourage new users to join with our

community such seeking available job and workplace.

4.1 CONCLUSION

In conclusion, the development of a job portal for fresh IT graduates using HTML and CSS is a crucial

step in bridging the gap between job seekers and employers in the digital era. By providing a platform that

connects these two entities, it enhances the efficiency and accessibility of the job search process. The use of

HTML and CSS allows for the creation of an intuitive and user-friendly interface. This case study highlights the

significance of such a system in the current technological landscape and emphasizes the need for its

implementation. Besides of that, the idea of our proposed system is merged plan which came from the different

suggestion of our groupmates, which they realized that it is better to make a website about job seekers over the

internet that there can find suitable company or better workplace and fit positions related to their skills as could

help the applicant finding its dream company and work for newly graduates. Since most of the fresh graduates

are really wanted to get a job and test their gained skills at work, and their job searching will be easier and faster

because the details of the company already displayed their information so that when a certain applicant tries to

view their background then they will much know what kind of work environment they will face after their hired.

4.2 RECOMMENDATION

This recommendation holds immense value for future researchers, programmers, and developers aiming

to enhance the job portal system. In an era of advancing technology, it is crucial to continuously improve the

system's functionality to align with the evolving needs of users. By fostering developer participation, it creates a

platform for generating discussions and exploring new ideas to enhance the system's features and capabilities.

This collaborative approach ensures that the job portal system remains at the forefront of job search capabilities.

Formatting:

1. Font : Times New Roman

2. Size : 12
3. Spacing : Double

4. Chapter Titles : 14, Bold

5. Margins : Left 1.5, the rest 1.