IT Job Placement Site Under Development

Ted Carr
Capstone Project
December 14, 2016
IT 1150 – Introduction to Web Programming
CRN: 84353

Table of Contents
Table of Contents ...............................................................................................................................2
Executive Summary ............................................................................................................................3
1. Wireframe and Diagram of Site Layout to Show Site Logic................................................................4
2. GeeksGetHired.com.......................................................................................................................5
3. Job Listings & Employers (Menu Optionsleads here)......................................................................15
4. Upload Resume (Menu Option leads here) ....................................................................................17
5. Join Email List (Menu Option leads here).......................................................................................19
Conclusion / Discussion.....................................................................................................................22

Executive Summary
The project topic is a web site designed for an employment agency, catering specifically to
IT Professionals.
The target audience is job seekers and employers in the IT field. Usability is simple just
follow the guidelines in the book and see the conventions that similar sites use.

1. Wireframe and Diagram of Site Layout to ShowSite Logic
GeeksGetHired.com – Information Technology Job Seekers (Wireframe)

2. GeeksGetHired.com
Screenshot of the “GeeksGetHired” homepage
*NOTE: Images above the footer rotate 360 degree on mouse hover.

HTML code for the “GeeksGetHired” Homepage – index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Geeks Get Hired!</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/slicknav.css">
<link rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script>
$(document).ready(function() {
$('#nav_menu').slicknav({prependTo:"#mobile_menu"});
});
</script>
<script>
$(document).ready(function() {
$("#accordion").accordion({
heightStyle: "content",
collapsible: true
});
});
</script>
</head>
<body>
<header>
<img src="img/itco.jpeg" alt="Company logo" height="80">
<h2>GeeksGetHired.com</h2>
<h3>IT Job Placement</h3>
<h3>We work with Everyone</h3>
</header>
<nav id="mobile_menu"></nav>
<nav id="nav_menu">
<ul>

<li><a href="index.html" class="current">Home</a></li>
<li><a href="under-const.html">Job Listings</a></li>
<li><a href="upload_resume.html">Upload Resume</a></li>
<li><a href="under-const.html">Employers</a></li>
<li><a href="email_list.html">Join Email List</a></li>
</ul>
</nav>
<main>
<aside>
<h2>Get Hired Faster</h2>
<form method="get" action="http://www.google.com/search">
<label for="location">Location:</label>
<input type="text" name="location" placeholder="Enter city, state or zip"
autofocus><br>
<label for="jobtitle">Job Title:</label>
<input type="text" name="jobtitle">
<input type="submit" name="search" id="button" value="Search">
<input type="reset" name="reset" id="reset">
</form>
<br><br><br>
<h2>Useful Resources</h2>
<ul>
<li><a href="under-const.html">Educational Opportunities</a></li>
<li><a href="under-const.html">Featured Companies</a></li>
<li><a href="under-const.html">Resume Workshop</a></li>
</ul>
</aside>
<section>
<p><span class="shadow">Featured Jobs</span></p>
<div id="accordion">
<h2><a href="#">IT Technician</a></h2>
<div>
<h3>Job Description</h3>
<h4>NuTech Company, Inc.</h4>
</div>
<h3><a href="#">.NET Developer</a></h3>
<div>
<h4>Machina Co.</h4>
</div>
<h3><a href="#">Web Developer</a></h3>
<div>
<h4>Active Engineering, Inc.</h4>

</div>
<h3><a href="#">Network Administrator</a></h3>
<div>
<h4>InfoCycle Company</h4>
</div>
<h3><a href="#">Sr. Java Developer</a></h3>
<div>
<h4>MoreData.com</h4>
</div>
</div>
</section>
<center>
<table>
<tr>
<td><img src="img/img2.jpg" class="images" height="150" width="265"></td>
</tr>
</table>
</center>
</main>
<footer>
<p>© 2016, GeeksGetHired.com, Cleveland, Ohio 44101</p>
</footer>
</body>
</html>

CSS for the “GeeksGetHired” – main.css
/* the styles for the elements */
* {
margin: 0;
padding: 0;
}
html { background-color: white; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 800px;
margin: 0 auto;
border: 3px solid #800000;
background-color: #fffded;
}
a:focus, a:hover {
font-style: italic;
}
/* <header> rules */
header {
padding: 1.5em 0 2em 0;
border-bottom: 3px solid #931420;
background-image: -moz-linear-gradient(
30deg, navy 0%, #f6bb73 30%, white 50%, #f6bb73 80%, navy 100%);
background-image: -webkit-linear-gradient(
30deg, navy 0%, #fffded 30%, white 50%, #fffded 80%, navy 100%);
background-image: -o-linear-gradient(
background-image: linear-gradient(
}
header h2 {
font-size: 175%;
color: #800000;
}
header h3 {
font-size: 130%;
font-style: italic;
}
header img {
float: left;
padding: 0 30px;
}

.shadow { text-shadow: 2px 2px 2px navy; }
/* <nav_menu> rules */
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu ul li { float: left; }
#nav_menu ul li a {
display: block;
width: 160px;
text-align: center;
padding: 1em 0;
text-decoration: none;
background-color: navy;
color: white;
font-weight: bold;
}
#nav_menu a.current { color: yellow; }
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li { float: none; }
#nav_menu ul li:hover > ul { display: block; }
#nav_menu > ul::after {
content: "";
clear: both;
display: block;
}
/* <main> rules */
main {
clear: left;
}
/* <section> rules */
section {
width: 45%;
float: right;
/*padding: 0 20px 20px 20px;*/
border: 5px navy;

border-radius: 1em 1em 1em 1em;
box-shadow: 3px 3px 3px 3px navy;
margin-top: 2em;
margin-right: 1em;
margin-bottom: 3em;
}
section h1 {
font-size: 150%;
font-style: bold;
text-align: center;
padding: .5em 0 .25em 0;
margin: 0; /* If you remove this, the margins in normalize.css will be applied.
*/
}
section h2 {
color: #800000;
font-size: 130%;
padding: .5em 0 .25em 0;
}
section p {
padding-bottom: .5em;
color: navy;
font-size: 150%;
font-style: bold;
text-align: center;
}
section ul { padding: 0 0 .25em 1.25em; }
section li { padding-bottom: .35em; }
/* <aside> rules */
aside {
margin-top: 2em;
width: 45%;
float: left;
padding: 0 0 20px 20px;
}
aside img { padding-bottom: 1em; }
aside ul { margin-left: 7em; }
aside h2 {
color: navy;
font-size: 150%;
font-style: bold;

text-align: center;
padding-bottom: 1em;
}
aside h3 {
font-size: 105%;
text-align: right;
}
label {
float: left;
font-size: 105%;
text-align: right;
width: 5em;
}
input {
margin-left: 1em;
margin-bottom: .5em;
}
#button { margin-left: 6.25em; }
#button, #reset {
width: 5.5em;
box-shadow: 2px 2px 0 navy;
background-color: silver;
}
table {
clear: both;
border: 3px solid navy;
border-collapse: collapse;
}
.images { transition: 2s; }
.images:hover { transform: rotateY(360deg); }
/* <footer> rules */
footer {
background-image: -moz-linear-gradient(
30deg, navy 0%, #f6bb73 30%, white 50%, #f6bb73 80%, navy 100%);
background-image: -webkit-linear-gradient(
background-image: -o-linear-gradient(
background-image: linear-gradient(

/*background-color: navy;*/
clear: both;
}
footer p {
text-align: center;
color: black;
padding: 1em 0;
}
.slicknav_menu {
display: none; /* Hide SlickNav Menu initially */
}
/* @Media Query for a tablet in portrait view */
@media only screen and (max-width: 479px) {
section h1 { font-size: 125%; } /* Reduce font-size */
section h2 { font-size: 110%; } /* Reduce font-size */
aside h2 { font-size: 110%; } /* Reduce font-size */
}
/* @Media Query for a phone in landscape orientation */
header img { float: none; } /* No floating */
header { text-align: center; } /* Center content */
section {
float: none; /* No floating */
width: 43.145%;
}
aside {
float: none; /* No floating */
width: 43.25%;
}
#nav_menu { display: none; } /* Take away Regular Menu */
.slicknav_menu { /* Show SlickNav Menu */
display: block;
background-color: navy !important;
}
}
/* @Media Query for a phone in portrait orientation */
body { font-size: 90%; } /* For relative font size adjustments */
}

3. Job Listings & Employers (MenuOptions leads here)
Screenshot of the “Page Under Construction”- under-const.html
*NOTE: Clicking on the image takes you back to the Home Page.

HTML code for the “Page Under Construction”– under_const.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
</header>
<main>
<a href="index.html"><center><img src="img/page-under-construction.jpg"
alt"Home"></center></a>
</main>
<footer>
</footer>
</body>
</html>

4. UploadResume (Menu Optionleads here)
Screenshot of the “Upload Resume” - upload_resume.html

HTML code for the “Upload Resume”– upload_resume.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
</header>
<nav id="nav_menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="upload_resume.html" class="current">Upload Resume</a></li>
<li><a href="email_list.html">Join Email List</a></li>
</ul>
</nav>
<main>
<br><br><br>
<center>
<form name="upload_form" action="" method="post"><h2>Attach your
resume:</h2><br>
<input type="file" name="file_upload" accept="text/docx, text/pdf">
</form>
</center>
<br><br><br>
</main>
<footer>
</footer>
</body>
</html>

5. Join Email List (Menu Optionleads here)
Screenshot of the “Join Email List” index.html
*NOTE: There is only a small amount of validation on the fields.

HTML code for the “Join Email List”– emai_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles/email.css">
</head>
<body>
<header>
</header>
<nav id="nav_menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="upload_resume.html">Upload Resume</a></li>
<li><a href="email_list.html" class="current">Join Email List</a></li>
</ul>
</nav>
<main>
<center><h1>Please enter the following information:</h1></center>
<form action="" method="get" name="join_email" id="join_email">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" autofocus
required><br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" required><br>
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" required><br>
<label for="zip">Zip Code:</label>
<input type="text" name="zip" id="zip" placeholder="Optional, but
appreciated: 12345"

pattern="d{5}" title="Either 5 digit zip code"><br><br>
<input type="submit" name="subscribe" id="button"
value="Subscribe"><br>
</form>
</main>
<footer>
</footer>
</body>
</html>
CSS for the “Join Email List” – email.css
/* email.css */
/* <form> rules */
label {
float: left;
width: 6em;
text-align: right;
margin-left: 12em;
}
label, input, select { font-size: 90%; }
input, select {
width: 25em;
margin-left: .5em;
margin-bottom: .5em;
}
input:required, input[required] {
}
input:valid { border: 2px solid black; }
input:invalid {
box-shadow: none;
}
br { clear: both; }
#button {
margin-left: 25em;
width: 8em;
box-shadow: 2px 2px 0 navy;
background-color: silver;
}

Conclusion/ Discussion
It is a lot more difficult to design and implement a web site from scratch than it is to simply
follow instructions for an assignment.

IT Job Placement Site Under Development

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Destaque

Destaque (16)

Semelhante a IT Job Placement Site Under Development

Semelhante a IT Job Placement Site Under Development (20)

IT Job Placement Site Under Development