HTML Workshop Jobjo
HTML Workshop Jobjo
Building Your
Own 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
• One-page CV Template
• “A clean, simple, yet elegant free resume/CV
template for Bootstrap 4”
• Source: https://startbootstrap.com/
Inspecting Elements..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Resume - Start Bootstrap Theme</title>…
</head>
<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”.
<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
<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
<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