03/10/24 - 00/00/24 (Week 1 - Week )
Andrea Choo Qin Hui (0366959)
Andrea Choo Qin Hui (0366959)
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercise 3
INSTRUCTIONS
EXERCISE
Exercise 3: (Personal CV Page)
For our third exercise, Mr Shamsul
tasked us in designing and building a personal
CV
page using basic HTML and CSS. This exercise will help us
organise 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
Before starting my CV, I went to look for
inspiration on other CVs on Pinterest. The
main inspiration for my own CV are taken mainly from these
two.
|
| Figure 1.1 CV Inspiration |
I wanted to recreate the dotted background and the gradient for my own CV.
|
|
Figure 1.2 Code for Dotted BG & Pink
Gradient |
I didn't want to just put the images for the adobe icons for technical skills, so I
challenged myself to make 4 rounded squares for each of the
app (Ps, Pr, Ae & Ai).
|
| Figure 1.3 Code for Skill Icons |
|
| Figure 1.4 Outcome |
I wanted the icons to have 2 on each row but no matter what I did, it came out like this
so
eventually I just left it.
To make my image match the colour scheme of my CV, I went to Photoshop to edit it,
To make my image match the colour scheme of my CV, I went to Photoshop to edit it,
Ito
make it have the same pink colour overlay on the now grayscale
image of myself.
Fonts Used:
|
| Figure 1.5 Profile Image Outcome |
Fonts Used:
I wanted to have a favicon like every website for my submission, so I watched a
Youtube video on it.
Figure 1.6 Youtube Tutorial
I first went on Google to find a PNG of what I wanted as my favicon, Then going onto
favicon generator.net, to make the PNG into a favicon and putting it into my images
folder.
 |
| Figure 1.7 Favicon |
 |
| Figure 1.8 Favicon Code |
 |
| Figure 1.9 Final Favicon Outcome |
Final Exercise 3: (Personal CV Page)
Comments
Post a Comment