Interactive Design / Project 2

29.05.2024 - 29.062024 (Week 6 - Week 10)
Gunn Joey / 0366122
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 2: Working Web Page

TABLE OF CONTENTS

  1. Module Information Booklet (MIB)
  2. Project 2: Working Web Page
MODULE INFORMATION BOOKLET



PROJECT 2: Werking Web Page

OBJECTIVE:

This assignment aims to create a fully functional and interactive web page based on our Project 1 static prototype. Using the skills we learned in web layout class, we will produce a functional website that closely resembles our initial prototype. 

  • Review our static prototype from Project 1 and analyse its layout, typography, colour 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.
  • Upload the file in Netlify, update e-portfolio with all the processes documented in the blog, and submit the link as a submission.
PROCESS:

Firstly, I study the layout of my project 1 design. 

Figure 1: Resume Figma 

The HTML of the profile image, header text and contact were first added in the source code. For the contact section, I insert images of icons.

Figure 2: profile image, header text and contact HTML code 

Then, I linked my css file and added few css style for the first part. For the profile picture, I added border-radius to match with the design in Figma.

Figure 2: profile image, header text and contact CSS code

Figure 3: profile image, header text and contact CSS code

Figure 4: profile image, header text and contact CSS code

Figure 5: profile image, header text and contact CSS code

The second section of my resume is experiences section. I added h2, h3 and li for this section.

Figure 6: Experiences HTML code

The list-style-type of li was applied to disc in the css style.

Figure 7: Experiences CSS code

The education and projects were placed in a row. I added a div class for education-projects. <span> was also added in education section.

Figure 8: Education-projects HTML code

I added vertical line between education and projects.

Figure 9: Education-projects CSS code

Figure 10: Education-projects CSS code

For the skills section, the adobe icons and the li text are placed in a row.

Figure 11: Skills HTML code

I added float: left for the adobe icons in css style.

Figure 12: Skills CSS code
 
Figure 13: Skills CSS code

FINAL OUTCOME:


HTML code:

CSS code:

Comments

Post a Comment

Popular posts from this blog

Typography / Task 1 : Exercises

Image
25.9.2023 - 2.11.2023 ( Week 1 - Week 6 ) Gunn Joey / 0366122  Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University  Task 1: Exercises JUMPLINK 1.  Lectures 2.  Instructions 3.  Task 1: Exercise 1- Type Expression 4.  Digitalisation 5.  Animation 6.  Task 1 : Exercise 2 - Type Formatting 7.  Text Formatting 8.  Feedback 9.  Reflection 10.  Further Readings LECTURES Week 1 : Typo_0_Eportfolio Briefing In the first lecture, Mr. Vinod explained to us the meaning of typography and it is used and displayed in our daily life. Mr. Vinod taught us to create e-portfolio with Blogger. We referred to few samples and video tutorial. We followed the instructions that given by Mr. Vinod in the video tutorial. Typo_0_Introduction Font : The individual font or weight within the typeface. Typeface : The entire family of fonts / wei
Read more

Advanced Typography / Task 1: Exercises

Image
22.04.2024 - 26.05.2024 (Week 1 - Week 4) Gunn Joey / 0366122 Advance Typography / Bachelor of Design (Honours) in Creative Media Task 1 / Exercises: Typographic Systems & Type & Play TABLE OF CONTENTS 1. Lectures           Week 1 - Lecture 1           Week 2 - Lecture 2           Week 3 - Lecture 3 2. Module Information Booklet 3. Task 1: Exercises         Exercise 1 : Typographic Systems          Exercise 2: Type and Play 4. Feedback 5. Reflection 6. Further Reading LECTURES   Week 1 - Lecture 1   Week 2 - Lecture 2   Week 3 - Lecture 3 Week 1 - Lecture 1 Typographic Systems There are eight major variations with an infinite number of permutations such as Axial Radial Dilatational Random
Read more

Illustration and Visual Narrative / Task 1: Vormator Challenge

Image
27.09.2023 - 3.11.2023 (Week1-Week6) Gunn Joey / 0366122  Illustration and Visual Narrative / Bachelor of Design (Honours) in Creative Media Taylor's University / Task 1 LECTURES WEEK 1 : Character Design Basics  Iconic : Stylized designed characters are often iconic that you can immediately recognize them even in black silhouettes.  Simplicity : Simplicity of the design allows viewers to digest and understand the purpose of the character easily.  Unique : Not only memorable, but make impact on the viewer. Principle of Character Design Shapes 1. Silhouette  It is used to identify a character from one another. 2. Think iconic   Explore the possibilities of combining different shapes for your design. 3. Add weight to personality Use character's persona as the basis of the shapes for your design. Colour 1.  Establish basic roles of the characters  Colours plays an important role in determining and separate the basic characteristics of heroes, villains and even background character
Read more