Interactive Design Project 2

 9/6/2024-29/6/2024 Week 8-Week 10

Jie Xuan/ 0356515

Interactive Design/ Bachelor of Creative Media/Taylor's University                     

Project 2

TABLE OF CONTENTS

1. Instructions

2. Project 2

3. Feedbacks

4. Reflections

---

INSTRUCTIONS

Fig 1.1 Module Information

PROJECT 2

• The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
• Review your static prototype from Project 1 and analyze its layout, typography, color 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.

Process: 

Step 1: I save a the photo in a file. I open a html file link with a CSS file. I put this three file inside a file and name it "resume". 

Step 2: I open a new file in Dreamweaver and start my HTML coding. I insert all the info that I want to be in the resume by HTML code first. 

Step 3: After finish doing HTML code I start writing CSS code. For me, CSS is more difficult than HTML it is because I need to be more careful and detail so that the visual of the resume can be Done nicely. If have some mistake this resume can't be Done nicely. The margin, font size, padding and text alignment, image alignment every single detail need to be very careful. 

After coding the normal webpage size I code media only screen on 996px. This process took so much time to keep on checking whether the webpage is working or not. But luckily is all good. 

Step 4: After coding I double check preview in google. The Resume looks good. Than, I self deploy the whole file to Netlify. 

Resume on Computer

Netlify Link: https://jiexuanresume.netlify.app/

Final Outcome:

HTML code

CSS code

Resume Final PNG Version

Resume Final Pdf Version

FEEDBACK

Week 9

Resume a bit simple can add more icon and make the info more clear. 

REFLECTION

Experience

My journey of using Adobe Dreamweaver to code a resume in HTML and CSS has been challenging. Initially, I was overwhelmed by the amount of tools and features available in Dreamweaver. However, as I delved deeper into the project, I began to appreciate its powerful capabilities. 

The first step was setting up the workspace, which was straightforward thanks to Dreamweaver's user-friendly interface. I started by creating a basic HTML structure for the resume, including sections for personal information, work experience, education, skills, and contact details. The real challenge came when I had to style the resume using CSS to make it visually appealing and professional.

In conclusion, using Adobe Dreamweaver to code a resume in HTML and CSS was a challenging but educational experience. I gained valuable insights into web development, improved my coding skills, and learned the importance of creating responsive and visually appealing designs. This project has laid a solid foundation for future web development endeavors.

Observation

Throughout the process, I observed that Dreamweaver's real-time preview feature was incredibly helpful. Being able to see the changes immediately as I wrote the code allowed me to experiment with different styles and layouts without constantly switching between the code editor and a browser.

One significant observation was the importance of clean and organized code. Dreamweaver's code hints and suggestions helped me maintain proper syntax and avoid errors. I also learned the value of commenting on my code to keep track of the changes and understand the structure better.

I noticed that using CSS to style the resume required a good understanding of box models, positioning, and responsiveness. Dreamweaver's CSS Designer panel made it easier to manage styles and quickly adjust properties, which was particularly useful when working on complex layouts.

Findings

Adobe Dreamweaver is a efficient and powerful tool for web development, offering features that streamline the coding process. The real-time preview, code hints, and CSS Designer are particularly valuable for beginners and experienced developers alike. Despite its many advantages, there is a learning curve associated with Dreamweaver. Understanding the various panels, tools, and options took time, but the investment was worthwhile.

This project underscored the importance of clean, well-commented code. Properly structuring HTML and CSS files made it easier to troubleshoot issues and make updates. Creating a responsive design was a crucial part of the project. I learned how to use media queries to ensure that the resume looked good on different devices, which is essential in today's mobile-first world. 

Other than that, balancing aesthetics with functionality was a key learning point. I found that while it is essential to have a visually appealing resume, it should not compromise readability and usability.