Exercise 3: Personal CV Page
.png)
Brief:
To design and build a personal CV page using basic HTML and CSS. This exercise will help you organize information into sections, practice styling text, and create a clean, professional-looking page layout.
Instructions:
- Add your name as the main header at the top of the page.
- Write a short paragraph describing yourself, your interests, and any hobbies.
- List your most recent education details. Include the institution name, year, and course or program.
- Create a bulleted list of at least five skills you have (these could be related to school, hobbies, or any other talents).
- Add a simple contact section with an email address and a link to any social media profile (optional).
- Use different font sizes and weights to make sections and headers stand out.
- Choose a basic color scheme for the text and background. Use colors that are easy to read and look professional.
- Add padding and margins around each section to give your CV a clean, organized layout.
- Use borders or horizontal lines to separate sections for a professional touch.
- Add an image or profile picture at the top.
- Style your CV with a unique font and background color or pattern to reflect your personality.
- Create a folder for the task and include subfolder (images) and the HTML file in the folder
- Create a single HTML file for the content. Name the file as index.html
- Add the CSS rule within the head section
- Upload the folder to Netlify (I will show it in class)
- Embed the link into your blog and submit the post in Google Classroom
Product:
https://crystalkangpersonalcv.netlify.app/
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CV - Crystal Kang Wei Kee</title>
<style>
body {
margin: 20px;
background-color: #322929;
}
.container {
background-color: #D6C1A6;
border: 2px solid #000;
padding: 20px;
max-width: 900px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
font-family: "New Rocker", system-ui;
font-size: 36px;
margin: 0;
}
.header h2 {
font-family: "New Rocker", system-ui;
font-size: 20px;
margin: 5px 0;
}
.content {
display: flex;
width: 100%;
}
.left-column, .right-column {
flex: 1;
padding: 10px;
text-align: justify;
}
.left-column {
max-width: 35%;
}
.right-column {
max-width: 65%;
}
.divider {
width: 1px;
background-color: #000;
margin: 0 10px;
}
img {
border-radius: 400px;
height: 300px;
width: 300px;
object-fit: cover;
}
.section h3 {
font-family: "New Rocker", system-ui;
font-size: 22px;
margin-bottom: 10px;
}
.section {
font-family: "New Rocker", system-ui;
margin-top: 20px;
border-bottom: 1px solid #000;
padding-bottom: 10px;
}
.contact-info {
font-family: "New Rocker", system-ui;
}
.contact-info p {
margin: 5px 0;
}
.work-experience h4 {
font-size: 18px;
margin-bottom: 5px;
}
.highlight-date {
font-weight: bold;
color: #000;
}
.work-list {
margin-top: 5px;
list-style-type: disc;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>CRYSTAL KANG WEI KEE</h1>
<h2>Interactive Spatial Design Student</h2>
</div>
<div class="content">
<div class="left-column">
<img src="profile.jpg" alt="Crystal Kang Wei Kee">
<div class="section">
<h3>Personal Profile</h3>
<p>I am a design student who is passionate about designing spaces with various art styles and providing users with the best experience they can have. I'm seeking a role that allows me to apply my knowledge and skills for continuous improvement.</p>
</div>
<div class="section contact-info">
<h3>Contact Information</h3>
<p>Phone: 014-9661219</p>
<p>Email: kangweikee1219@gmail.com</p>
<p>Instagram: crystal_here.3</p>
</div>
<div class="section">
<h3>Skills</h3>
<p><strong>Software:</strong> Blender, AutoCAD, SketchUp, Canva, Adobe Photoshop, Adobe Illustrator, Adobe Audition, Adobe Dreamweaver, Unity</p>
<p><strong>Other Skills:</strong> Manual drawing and sketching, friendly personality, good presentation and socializing skills, hardworking and willing to take challenges</p>
<p><strong>Languages:</strong> Fluent in English, Malay, Chinese, and Hokkien</p>
</div>
</div>
<div class="divider"></div>
<div class="right-column">
<div class="section">
<h3>Education</h3>
<p><strong>Taylor's University, 2024</strong><br>
Bachelor Degree of Interactive Spatial Design (Hons)<br>
CGPA: 3.78</p>
<p><strong>UCSI University, 2023</strong><br>
Diploma in Architectural Studies<br>
CGPA: 3.31</p>
<p><strong>SMK Jalan Damai, 2019</strong><br>
Science stream student<br>
SPM results: 5A4B1C</p>
</div>
<div class="section work-experience">
<h3>Work Experience</h3>
<h4>Internship, Gibert and Tan</h4>
<span class="highlight-date">(Oct 2022 - Mar 2023)</span>
<ul class="work-list">
<li>Assisted the senior architect with detailed working drawings</li>
<li>Scheduled professional drawings</li>
<li>Conducted site analysis and project research</li>
<li>Rendered drawings</li>
</ul>
<h4>Volunteer Teacher, Ruth Education Centre</h4>
<span class="highlight-date">(Jul 2022 - Aug 2022)</span>
<ul class="work-list">
<li>Taught Form 1 English</li>
<li>Prepared teaching materials independently</li>
</ul>
<h4>Volunteer Teacher, Hope Learning Centre</h4>
<span class="highlight-date">(Feb 2023 - Apr 2023)</span>
<ul class="work-list">
<li>Taught Primary 4 Science</li>
<li>Prepared teaching materials based on the textbook</li>
</ul>
<h4>Volunteer, Alien No More (Refugee-related Community Organization)</h4>
<span class="highlight-date">(Feb 2022 - Present)</span>
<ul class="work-list">
<li>Member of the research and content team</li>
<li>Conducted research for planned programs</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
.png)
.png)
Comments
Post a Comment