Interactive Design / Project 2 : Working Web Page

29.05.2024 - 29.06.2024 (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
3. Final Outcome
4. Reflection

---

MODULE INFORMATION BOOKLET

[back to top]

---

PROJECT 2: Working 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:

Netlify link: https://gunnjoey-resume-project2.netlify.app/

HTML code:

CSS code:

[back to top]

---

REFLECTION

Through Project 2, creating a working web page using CSS and HTML provided a valuable learning experience in web design and development. I learned to structure content with HTML, emphasizing semantic elements for organization and accessibility. Styling with CSS highlighted its power to transform plain HTML into an appealing design, teaching me about the box model, layout techniques like flexbox and grid, and responsive design principles. Additionally, I gained insights into maintaining clean and organized code, ensuring cross-browser compatibility, and the overall importance of creating user-friendly and visually engaging web pages. This hands-on experience reinforced key web development principles and the need for continuous learning.

[back to top]