INTERACTIVE DESIGN / PROJECT 2 / WORKING WEB PAGE

16/10/2023 - 23/10/2023 / Week  8 - Week 9
Adriena Tan Yan Zi  / 0351236
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Project 2 / Working Web Page 

---

Lectures

Week 8 is independent learning week and working on project 2. 

FINAL PROJECT:

Icon for website: 21x26 px covert as png

Example:

Imagine Dragons: https://www.imaginedragonsmusic.com/#/

Testament: https://www.testamentlegions.com/site/

Html element:

<div class=“box static”></div>

CSS element:

To maintain the responsive container: border-sizing: border box

position: static

**position: relative (in the parent element like my main container)

static doesn’t apply with z-index

include padding if you need the space around in of the container

100% Vh is applied to all viewport

**navigation menu use *fixed

 

 

---

Instructions 

---

Task

Requirements for this task:

• Transfrom project one prototype into a full working page. 
• Follow the same colour scheme and layout. 
• Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
• Make sure the site is reponsive and compatible on multiple devices.
• submit the link here. Update your e-portfolio with all the processes documented in the blog.

Coding the main elements and information in HTML

Typing in the html code with the necessary basic information before moving to CSS. 

Typing and linking the css stylesheet manually as dreamweaver doesnt allow me to link it by sourcing it.

After that i move on to add in the element like the container with background colour and border radius. Took me a while to figure out the rounded edge and eventually figured that it was the the margin with padding and to ad border radius one by one. 

I moved on to do that to the other container since i have the same shapes in my cv. 

The next part i did also struggle quite a bit as I was figuring out how to make a stadium shape for so long for my image but eventually got it. 

Another problem i encountered during this part was that the image was behind the square, i tried a lot of code but couldnt get it to come in front. Fortunately, my friend came to the rescue and just asked me to add the z-index which i did and it worked! 

Here im just coding the rating dots and still was struggling as i was not sure how to code a circle but figured it out soon, focused on aligning the dots which worked out. 

I spent the most time at the last part as the last part just doesnt make sense to me. I did everything fine and was trying to get my image icon and text on the same line which then i learned to apply flex and it works for instagram and email but just not the phone number one. I tried to ask sir and he suggested to add div span which i tried as well but still didn't work. The elements around it were moving around sometimes but not the actual element that i wanted to move. 

Final html and CSS

Final Webpage