Interactive Design - Project 2

 19.06.2024 - 29.06.2024

Graciella Limpah / 0364517 

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors University

Project 2 - Working Web Page

---

LECTURES

Lectures are in exercises.

---

INSTRUCTIONS

In this project, we are asked to transform our static prototype from Project 1 into a fully functional and interactive web page. We will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.

Here is my prototype :

fig 1.1 CV from project 1

First, I start by doing html and add all the information that I have in my Prototype. 

fig 1.2 HTML of prototype

Then, I change the background color of the html.

fig 1.3 Change the color

After that, I change my picture into circle and make it float to the left.

fig 1.4 Changing the picture

Then, I change the font and size of the text so it match my prototype.

fig 1.5 Changing font and size

Then, using the aside left and aside right, I separate those two section below the introduction.

fig 1.6 Separate text below the introduction

Because I have a straight line between aside left and aside right, I browse through google and search how can I make that line, and here is the result :

fig 1.7 Straight line between aside left and right

Next, I add boxes to the education year and the graphic design text.

fig 1.8 Adding box

Because we need to make it interactive, I add @media to the end of the css.

fig 1.9 adding @media

And here is the final result : https://gracproject2.netlify.app/

---

REFLECTION

During making the prototype into a html, I think this part is not too hard since we've already learnt this since the beginning of the semester but when it came to css part, I do think this is quite challenging for me since I have to make it similar to my prototype, for some details, I couldn't really make it since it is hard and I can't find the tutorial on google. But overall, doing this project is actually fun because I get to learn a lot of new stuff and it gave me a new experience.