Project 2: Working Web Page

-

SIMON KO JING LIANG 
0364359
Bachelors of Design(Honours) in Creative Media
Project 2: Working Web Page

INSTRUCTION



Process


Fig 1

This is the prototype that I designed so I will follow this prototype to make a working web page.



Fig 2

First is I'm going to Google Font to search a suitable font family. The font family that I chose is Saira Semi Condensed. 

In the body I created a container and divided into two section, left side and right side. Left side has the picture, my name, contact information and my education.


Fig 3

For the right side has my profile, experience, skill and the project. This is the whole content that appears in the body section.


Fig 4

In CSS style, I coded the padding: 0, margin:0 , box sizing: border box and font family. For the style of body is background: light-blue, display: flex, justify content: center, align items: center and min-height:100vh.


Fig 5

After the style of body is the style of container, there has margin, position, width, max-width, min-height, background, display, grid-template-columns and box-shadow. In order for my webpage to appear to have two parts, the display needs to select grid, and grid--template-columns is indispensable because it determines your left part and right part. Next is the box shadow, which can clearly separate the background.


Fig 6

Then we come to the style of the left part. The first is position: relative, background is hot-pink and padding: 40px. Right part also the same but the background color is white and I added the font-size to 22px. After the basic adjustment is profile-text(My name) and image-box(the picture). I make the shape of image-box become round so there has border-radius inside the code.



Fig 7

The next things are pretty much the same, the only thing special is the numerical display in the skill part. The first thing to do in the numerical display is to make two blocks, one is for the total and the other is for the percent that I had in the skills.



Final 




Fig 8
Final Output-jpeg
This is the display in Google Chrome.


Fig 9
Final Output-PDF



Here is the LINK To the web page.