Project 2: Working Web Page

Project 2: Working Web Page

                                         

The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.

Review your 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, ensuring a faithful representation of the original prototype.

Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.

---

For starting this task, I had used the coding from recipe card. I had start the code with doing the border-box of tittle box, which is the "profile" and "experience".

fig 1.1 prototype

By the prototype that we done from last few weeks, I had opened the html and code to check on the width and height of text box. The font family had also provided in the css, so I went to google fonts to find the exact font family, which included light, normal, latin, etc.

fig 1.2 draft

I had make up a draft for better reference.

fig 1.3 code

By the draft, i started doing my css code inside. I had used the information had provided in Figma to know the font size and letter spacing. As some of the tittle box had margin and kerning between. I used <margin> and <letter spacing> for adjustment.

fig 1.4 profile

For original prototype, there will be a circle for my profile, i had used 

img {

  border-radius: 50%;

float:left;

width: 514px;

height: 525px;

z-index: 10;

position: relative;

}

By the result does not shows well, so i had some research on how to make the radio and circle fit well.

 img {

1. max-width: 100%;
2. border-radius:
   288px
   ;
3. position: relative;
4. box-sizing: border-box;
5. aspect-ratio: 1/1;
6. width: 100%;
7. object-fit: cover;
8. border:
   10px
    #ffffff solid;

 By the css style here, for border:10px to fit the circles and aspect-radio, the profile picture looks fine.

fig1.5 index

As for the profile of the company, if i place the profile the paragraph will immediately gone, i had checked a lot of times but the result shows not well, so i give up of it.

fig 1.6 contact

The progression of row and column wasn't so smooth and easy for me. I had used quick some time to figured out how to place it better and looks more tidy. 

After the adjustment and time running, here is my final result of my page :

https://project2-0352888.netlify.app