Scribd
Upload
16 views26 pages

HTML Workshop Jobjo

The document provides a guide on creating a one-page HTML CV, highlighting the ease of use and editing with HTML and CSS. It includes instructions for downloading templates, editing HTML elements, and customizing the CV to include personal information and social media links. The final steps involve saving and uploading the CV online for accessibility.

Uploaded by

anildhakite1979
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views26 pages

HTML Workshop Jobjo

The document provides a guide on creating a one-page HTML CV, highlighting the ease of use and editing with HTML and CSS. It includes instructions for downloading templates, editing HTML elements, and customizing the CV to include personal information and social media links. The final steps involve saving and uploading the CV online for accessibility.

Uploaded by

anildhakite1979
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

HTML Practical –

Building Your
Own CV

Promoting youth employment in remote areas in Jordan -(Job Jo)


598428-EPP-1-2018-1-JO-EPPKA2-CBHE-JP
Why HTML?

• easy to create different types of websites with


HTML basics (static, basic websites)
• widely used, many discussion forums, many
templates available
• easy editing, even locally
• looks nice on the web (combined with CSS)
• can be easily uploaded and run online
One-page HTML CV

• appropriate for a CV
• simulating a paper CV
• easy to create & edit: single HTML file
• easily readable for the visitor
• avoid navigation confusion
• modern, minimal, trending
• Not suitable for a website including a lot of
content (e.g. e-shop)
HTML CV Templates

• You can search online and find many free


templates that can be downloaded and used.
• The templates should:
– follow web usability heuristics
– be responsive (bootstrap library)
– include all main sections needed
– be easy to edit
– include proper license of usage
Workshop Template

• One-page CV Template
• “A clean, simple, yet elegant free resume/CV
template for Bootstrap 4”

• Source: https://startbootstrap.com/
Inspecting Elements..

• You can check the html tags and css properties


of an element as follows:
1. Viewing a website in the browser (Chrome)
2. Right click anywhere on the website
3. Click on “Inspect”
4. Click on the “Select an item in the page to
inspect it” icon
Take a look at the HTML tags like
<h1>…</h1>,
<h2>…</h2>,
<p>…</p> etc…
Inspecting Elements..
Inspecting Elements..

• You can preview the mobile version of your


website
– Click on the “Toggle device toolbar” icon
– Change the “device” to preview the website in
different devices versions
Inspecting Elements..
Workshop on CV

• Download the CV Template from:


https://www.cs.ucy.ac.cy/seit/jobjo/
• Steps:
1. Click on “Click here to download the zip folder”
2. The folder will be automatically downloaded
3. Unzip the folder (extract in a folder)
4. Open the folder
Workshop on CV

• Check the license document:

Copyright (c) 2013-2019 Blackrock Digital LLC


Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software
without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to
whom the Software is furnished to do so, subject to the
following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
Workshop on CV

• Open the html file for editing:


1. Open PSPad Editor (or another editor)
2. Click “File” -> “Open file”
3. Locate the file “index.html” and open it
• Open the website preview:
– Open “index.html” on the browser (chrome)
– Press “ctrl” + “r” on the keyboard or use the
reload browser button to refresh the preview
upon changes
Note: the initial page has to be named
“index.html”
HTML to edit

1. View the website and decide what you want


to edit
2. Inspect the website and find the correct
element to be changed
3. Locate that element in the html file and edit
4. Reload the website preview
HTML to edit

<!DOCTYPE html>
<html lang="en">
<head>
<title>Resume - Start Bootstrap Theme</title>…
</head>

This will be displayed as the browser tab


title when visiting the website!
HTML to edit

<body>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-
auto mb-2" src="img/profile.jpg" alt="">
</span>
If you will use another photo
Save a jpg photo of your format e.g. png, you will need to
choice in the “img” change the text to e.g.
folder, with the name src=“img/profle.png”
“profile”.

• Free Icons: https://www.iconfinder.com/


HTML to edit

<nav …>
…Navigation Menu…
<li class="nav-item">
<a class="nav-link js-scroll-trigger active" href=“#about">
About </a>
</li>
This link will navigate to
……. section with id: #about
Copy/Paste this to
</nav> create a new
menu link!
HTML to edit

<section class="resume-section p-3 p-lg-5 d-flex align-


items-center" id="about">
<section>…</section> create new parts
for the website, referred to by their id
attribute

<h1 class="mb-0">Clarence
<span class="text-primary"> Taylor</span>
</h1> <h1>…</h1> creates a big heading as this
is the first (home) section of the website
HTML to edit

• You can add or delete a whole section (<section


…>…</section>) from your page according to your
needs. Don’t forget to also add/delete the
corresponding menu link navigating to this section.
• You can add other html elements within the sections
using html tags, for example an unordered list:
<ul>
<li>Java Applications</li>
<li>HTML Websites</li>
...
</ul>
HTML to edit

<div class="subheading mb-5">3542 Berry


Street · Cheyenne Wells, CO 80810 · (317)
585-8468 ·
<a href="mailto:[email protected]">
[email protected]</a>
</div>
Edit all information included in this
section such as address/organization and
e-mail address…
HTML to edit

<p class="lead mb-5">I am experienced in


leveraging agile frameworks to provide a
robust synopsis for high level overviews.
Iterative approaches to corporate strategy
foster collaborative thinking to further the
overall value proposition.</p>

…and the description text (short cv)!


HTML to edit

<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#">
<i class="fab fa-github"></i>
</a>
….
Add your social media links!
</section>
CSS to edit

• You can change the left column color as follows:


– Open the “resume.min” css file located in the css folder
– Search and find “background-color:#bd5d38!important”
– Replace #bd5d38 with another color (e.g. #000)
– You can use any hex color of your choice:
• https://www.color-hex.com/

• Inspect element to locate the property and test


potential colors!
Let’s Go!

1. Replace all example information from the rest of


the sections, with your valid information
2. Reload & preview your cv in the browser to check
the updated versions you create
3. Inspect your cv in different mobile versions
Let’s Go!

1. Finally, save your CV


2. Rename the folder with your Name and Surname
3. We will upload your CV online
4. It will be accessible from:
– https://www.cs.ucy.ac.cy/seit/jobjo/yourfullname
– It will remain uploaded for the next month
Creating the CVs…
Thank you!

You might also like