Interactive Design / Project 2: Working Web Page
2024.06.19-2024.06.29 Week 9 - Week 10
Instructions
Teh Ming En/0364908
Interactive Design-Bachelor of Design (Honours) in Creative Media--Taylors University
Project 2: Working Web Page
Instructions
Project 2: Working Web Page - Creating Digital Resume/CV
In project 2, we need to create a working website that closely aligns with our
original prototype design - Digital Resume/CV.
Requirements:
- Review the static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
- Use HTML and CSS to translate the design elements into code.
My Original Prototype - Digital Resume/CV
Working Process
|
| Fig 1.1 Put in basic information content |
First, I created a new index file and put my basic information content in
it. I set the background to two colors and used a script to help me
control the space between the contact and my name.
|
| Fig 1.2 Apply font |
After that, I found the font that same as the original prototype from Google
Fonts. The font is called Oxygen. I applied it to the entire
website, just with different weights, such as bolder headings.
|
| Fig 1.3 Divide content into two parts |
My resume has two parts: education and experience. I have divided them into
two parts and listed them side by side.
|
| Fig 1.4 Create skills bar |
Next, I used Progress to create the technical skills bar. I have changed the
color to make them look suitable for the website. I did not apply the
Oxygen font to the software title, as I did on my original prototype. I just
bolded and enlarged the text.
|
| Fig 1.5 Attach blog link |
|
| Fig 1.6 Attach other blog links |
In the ‘Feel Free to visit my blog’ text, I bolded the word ‘Blog’ and
attached a link to it. It leads directly to my blog page. Finally, I also
attached 3 links to the blog pages of other modules that people might want to
know about them. I also used CSS to style all my links.
Submission
Netlify Link: https://my-resume-me.netlify.app/
 |
| Fig 2.1 Full-sized Screenshot Of The Website |
Reflection
This is my first time creating a website by myself. I must say it was a difficult and challenging process for me. This project taught me the complexities of web development and the importance of detail-oriented coding. I have understood the importance of planning and structuring HTML to ensure a seamless layout and use CSS to style the web page taught me about the intricacies of design elements like fonts, color schemes, and responsive design. They are all significant when creating a website.
Comments
Post a Comment