Lab 4 Online Resume
In this lab, we will learn about HTML by building a simple, but useful document, your resume. We will use the key HTML tags I described in the previous labs. To make this project easier to understand, we will build the document one section at a time. We will be using the Jdoodle HTML editor for this lab. It is integrated into the Destin Learning Lab webpage.
4.1 Resume Header
In the header, I display the main title using the <h1> tag. This represents the largest of the header tags. I use smaller header tags to describe each section of the document. Next, I define some styles for the <h1>, <p>, and <div> tags for consistent display throughout the document. The <h1> tag will be centered and the <p> and <div> tags will be indented by 20 px. Next, I use a div tag to display my contact information. Note how the style portion aligns to the right side of the document.
<html>
<header>
<title>Eric Frick Resume</title>
<style>
h1 {text-align: center;}
p {margin-left: 20px;}
div {margin-left: 20px;}
</style>
</header>
<body>
<p>
<h1>Resume Eric Frick</h1>
</p>
<div style="float: right;">
efrick@destinlearning.com<br>
cell: 614-XXX-YYYY<br>
https://www.linkedin.com/in/<br>
</div>
<br>
4.2 Skills Summary
In this section of the resume, I used an <h2> tag to separate this section along with the <hr> tag to draw a line to separate this section out from the previous section. I then used an unordered list to list out some of my key qualifications. Add the code shown below for the next section.
<h2>Summary</h2>
<hr>
<ul>
<li>30+ years in the Information Technology field</li>
<li>A dedicated hard-working individual with the intercommunication
skills to work at all levels of the organization.</li>
<li>Exceptional abilities in project design and management with the
organization and supervisory skills to ensure success.</li>
<li>Outstanding motivator and builder of teams.</li>
<li>Works well in both team environments as well as
individual assignments.</li>
</ul>
4.3 Experience
In this section I used an <h2> tag to title the section. Next, I used a combination of a <div> tag and an unordered list to display each job and the key points about each position. The following is a snapshot of this section. Enter the following code for the next section.
<h2>Experience</h2>
<hr>
<div style="margin-left: 20px;">
<b>Curriculum Specialist and Course Author, Linux Academy</b>
May 2018 - Present
<ul>
<li>Leads custom curriculum development for enterprise customers for
cloud and Linux systems. Includes consultation
with CIOs, CTOs, and architects from leading companies.</li></Leads>
<li>Course author on the Google Cloud team (GCP published video courses for
the Google Cloud Platform (GCP)
and CompTIA certifications. (See the list of publications)</li>
<li>Represents the company at trade shows and events</li>
</ul>
</div>
<div style="margin-left: 20px;">
<b>Adjunct Faculty, Columbus State Community College</b>
Dec 2017 - Present
<br>
Currently teaching classes in the Computer Science Department. Classes taught:
<ul>
<li>ITST 1101 Industrial Applications and Software</li>
<li>ITST 1136 Linux Essentials</li>
<li>CSCI 2999 Capstone project</li>
</ul>
</div>
4.4 Education
In this section, I used a paragraph tag <p> and entered my academic credentials. I made a new line using the <br> tag. Notice I also used the <i> tag to have the name of the university be displayed in italic font.
<h2>Education</h2>
<hr>
<p style="margin-left: 20px;">
MS, Computer Science 2000 - <i>The University of Dayton</i>
<br>
BS, Industrial and System Engineering 1984 - <i>The Ohio State
University</i>
</p>
4.5 Publications
In this section, I once again started with the <h2> tag for the heading and decided to use an HTML table for displaying the publications. The first column in the table is for the titles and the second column is for the site of publication. Enter the following code for the next section.
<h2>Publications</h2>
<hr>
<table style="margin-left: 20px;">
<tr>
<td>The Self Publishing Toolkit</td>
<td>Amazon Kindle 2020</td>
</tr>
<tr>
<td>How to Make Money Teaching Online</td>
<td>Amazon Kindle 2019</td>
</tr>
<tr>
<td>The Beginners Guide to C#</td>
<td>Amazon Kindle 2017</td>
</tr>
<tr>
<td>Information Technology Essentials</td>
<td>Amazon Kindle 2017</td>
</tr>
<tr>
<td>Cloud Computing Development Essentials</td>
<td>Amazon Kindle 2017</td>
</tr>
<tr>
<td>How to Become a Successful Programmer Without a Degree</td>
<td>Amazon Kindle 2017</td>
</tr>
</table>
4.6 Awards
The last section of the resume is to include any awards. I displayed this using an unordered list like the following, and used the <h2> tag for the heading. Enter the following code for the last section.
<h2>Awards</h2>
<hr>
<ul>
<li>Outstanding Graduate Project - The University of Dayton 2000</li>
<li>Eagle Scout - The Boy Scouts of America 1977</li>
</ul>
After you have entered all the HTML code, click the Execute button to display the final results in the Jdoodle editor window.
4.7 The Final Product
The following is a screenshot of the final project displayed in Google Chrome. Although this is a much longer document than our hello world example, it is still straightforward in how you build the page. For longer projects, try to break them down to one section at a time, like the example we looked at here. This will make your project much easier to manage and maintain.
.jpg)
4.8 Summary
In this lab we combined multiple tags to construct a result. We used pre-build blosks to contrcut this result step-by-step section by section. This exercise show you how to use the tags we learned baout in previous exercises in a proactical real-world application.