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:

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 

Comments

Post a Comment

Popular posts from this blog

Information Design - Exercises, FLIP Topics & Practical

-
Image
6/2/2024 - 5/3/2024 / Week 1 - Week 5  Adriena Tan Yan Zi (0351236) Information Design / Bachelor of Design (Hons) in Creative Media Exercises, Flip Topics & Practical    Instructions Exercise 1 - Quantify and Visualise Data  Drafts and testing formations      Fig 1.1 Formation drafts  During class, the lecturer was explaining on how we could category and arrange our formation. He was explaining to us trying make sure our layout has to make sense in the end. I was just trying different formations first to see which one speaks to my liking the most before adding the labels. The first one i was going for something IT or digital waves. The second one is just spiral, and then diamonds/gems for the second and third. Lastly, just a neat formation for a clean look. Final Formation   Final 1.2 Final Exercise 1 Fi
Read more

Film Studies & Cinematography - Project 1

-
Image
  24.9.2024 - .10.2024 / Week 1 - Week Adriena Tan Yan Zi / 0351236 / BA of Design (HONS) in Creative Media Film Studies & Cinematography Project 1 Lectures  Week 1:  Week 2:  This week, the lecturer explained to us the elements that consist in basic good story. He also brief us about the art of storytelling so we have a better idea how to map out the spine of a good story.  We tell stories that hold a special place or made us feel some type of way that we would like to share with people. So through writing and telling the story, we hope that we can get our story across to the viewers hoping they would understand what we feel while writing this story. Will take many tries until we get the storyline perfect. We were shown a video called Purl, where a ball of yarn is trying to fit into an office environment.  We were shown another video of a dog and a cat befriending
Read more

3D Modeling - Exercises

-
Image
24/04/2024 - 05/06/2024 / Week 1 - Week 7 Adriena Tan Yan Zi / 0351236 3D Modelling / Bachelor of Design (Hons) in Creative Media Exercises Lectures  Week 1:  3D animation: Pre-production - Production - Post production 3D modeling  Texturing  Rigging  Animate  Lighting Rendering  Quad view = ctrl + alt + Q,  press N for side bar Press T to bring out the left tool box click move tool to move object Alt + G to reset position +(press x, y, z)  Alt + R to reset rotation +(press x, y, z)  Press S for scaling week 3: Press I for inset  Press E to extrude  We can press S to scale on the extruded part ALT + click to select everything  Press look up in edit mode and scale mutiple times to make curved line For a curve smooth side, we can you bevel, then go to EDGES  on top, Bevel edges and setting below to adjust many section you want, the width as well 
Read more