Lab 1: Add HTML to Your Resume

The objective of this lab assignment is two-fold: 1) to learn a bit of HTML markup and 2) to practice the workflow of web developers, which is writing code in a text editor and viewing it in a browser. If you are a student in CSCI1450 or BUS 1880, study the Module 1 Slideshow before startng this lab. If you are studying the HTML/CSS Lessons, study Lessons 1.3 and 1.4 before starting this lab.

In Lab 1 you will add HTML markup to your resume. If you don’t have a resume, I have a sample resume below to get you started on creating a resume. If you are feeling stuck on where to begin, I have coded a sample resume that you can look at for ideas at the end of this page.

Step 1. Open the text editor you installed. (Most students use the free version Sublime Text, but any text editor is fine. )

Step 2. Create a new document called resume.html. (In Sublime Text, use File→New, then File→Save As.) On Windows, save the file type as “html”. (On a Mac, you can just name the file with .html as the extension.)

Step 3. Cut and paste the content of your resume into the text editor. If you don’t have a resume, you can use the sample resume below to get you started. Note: If you are taking CSCI1450 or BUS1880, you are required to change the content of the Jane Doe resume to your content. Everything must be true for you.

Step 4. View it on Chrome browser.

Step 5. Add HTML markup to your resume.

• Use <h1> tags for the title, e.g. <h1>Resume</h1>
• Use <h2> tags for each major category. If you are using the Jane Doe resume as a starting point, the major categories are: Objective, Highlights, Skills, Experience, and Education.
• Now you need to add markup to the rest of the text:
  • Use <p> tags for paragraphs on your resume.
  • Use <b> tags for bold text
  • Use <hr> to draw a line to decorate your resume
  • Use bulleted lists with <ul> and <li> tags. See the example below.

<ul>
     <li>Gryffindor</li>
     <li>Hufflepuff</li>
     <li>Slytherin</li>
     <li>Ravenclaw</li>
</ul>

---

Sample Resume

Use this as a starting point for the lab if you don’t have a resume. Change the content to your content — for example, change “Jane Doe” to your name. Everything in your resume must be true for you.

RESUME: Jane Doe

Objective
I am a full-time student graduating in December 2027 and seeking a paid internship
in web development. I am available part-time immediately and full-time in January 2028.

Highlights
Proficient in HTML, CSS and JavaScript Frameworks
Competent cashier
Focused and detail-oriented
Good problem solver
Easy to get along with
Versatile employee
Great with customers

Skills
HTML, CSS, Bootstrap, Responsive Design and some JavaScript/jQuery

Experience
Front End Developer Intern | BrightPath Digital
September 2024 - Present
Developed professional websites using HTML, CSS, JavaScript, and WordPress. Collaborated
with clients to understand their vision and implemented content management solutions that
empowered them to maintain and update their own web content independently.

Combo Clerk | Summit Fresh Groceries
September 2021 - September 2024
Began as a Courtesy Clerk and was promoted to Combo Clerk based on strong performance
and customer service skills. Operated a register while delivering attentive, hands-on
assistance to customers, building solid experience in communication, problem-solving,
and front-line customer support.

Education
High School Diploma
Pursuing Degree: Computer Science, Saint Paul College, MN. Coursework includes
front-end developer course work in HTML, CSS and some JavaScript/jQuery

---

Coding Solution

Feeling stuck? This is one way to code the Jane Doe resume. Try to complete the lab on your own before looking at this solution. There is more than one right way to code a resume, so your solution may look different. You must change the content of the sample resume to be true for you.