Project 2

 Interactive Design

26/5/2024-../5/2023 Week  - Week
Wu Ziyang (0368325)
Bachelor of Design (Honours) in Creative Media

INTRODUCTION

In this class, we coded the self-introduction we did before using figma.I divided them into different regions and inserted and adjusted them in sequence. Here is my HTML CSS code.


Working Web Page

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.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission



HTML:









CSS:









This stage of programming is actually a little difficult for me, because there is more <div> than the previous programming element, I in order to prevent different <div> cross-fusion of a lot of effort. At the same time, you also need to check the performance of your code on different sizes of screens, which is very troublesome to modify at this stage.

When I first started coding, I became very frustrated because there were often areas where I got mixed up.But after I became familiar with how to operate it, I also felt the joy of editing code. I felt a great sense of accomplishment when I completed this assignment.

When I uploaded the file to netify, the file corruption prevented me from uploading, so I couldn't upload to netify, but I could open the web link.

Web Link:  file:///Users/wuxiaoxiong/Documents/project2/Untitled-4.html

Reflection

I encountered a lot of difficulties in this project because I had no contact with programming before, but after I solved this problem, the following programming went very smoothly, which also made me interested in programming

Comments

Post a Comment

Popular posts from this blog

Brand Corporate Identity | Task 1: Breaking Brand

Image
23.09.2024 - 07.10.2024 / Week 1 - Week 3 Wu Ziyang / 0368325 Brand Corporate Identity / MKT62404 / Bachelor of Design (Honours) in Creative Media Task 1: Breaking Brand Table Of Contents LECTURES  INSTRUCTIONS TASK  FEEDBACKS  REFLECTIONS  FURTHER READING Lectures Brand Corporate Identity is an integral part of graphic design discipline as it focuses on the visual integrity of a brand. As such the module introduces students to the basics of identity design and the effective use of symbols in the area of visual communication. What is a brand? "A brand is a person's gut feeling about a product, service, or company while companies can't control this process, they can influences it by communicating the qualities that make this product different than that product. "When enough people arrive at the same gut feeling, a company can be said to have a brand. In other words, a brand is not what you say it is. It's what they say it is." It is a mental construct shared b...
Read more

Publishing Design

Image
WU ZIYANG / 0368325 Publishing Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1 INSTRUCTION Lectures Lecture 1  （Formats） The book Publications: books, nnewapapers, magazines The book is a medium to document andtransmit, ideas, knowledge, records, historyand so much more. Format Question:  In your view, what factor/sinfluence and determine the format of abook? age user Historical Format lran-lraq =Mesopotamian civilization Egypt = Ancient Egyptian civilization, India-Pakistan-Afghanistan = Indus Valley civilization, China = Han Chinese civilization Europe (Turkey & beyond) = European civilization Innovation almost always shadows technologyNew technology creates opportunity. lf thetechnology has potency it would have acascading effect on other areas of life. Fig. 1.1 Regions For  Mesopotamia Denise Schmandt-Besserat(1995)   contends in her essay on the token system “Record Keeping Before Writing,” that“lt is remarkable that the ...
Read more

Interactive Design-EXERCISE 1&2

Image
Interactive Design- Exercise 1 23/4/2023- 2023（week1-week ） Wu Ziyang/0369288 Interactive Design / Bachelor of Design (Honours) in Creative Media Exercise 1 - Web Analysis TABLE OF CONTENTS  1. Instructions 2. Lectures  3. Exercises  Instructions Lectures Week1 The teacher asked us to choose two websites we want to analyze among the given links. Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers. Week 3 Key Elements of a website: Header Body Footer ...
Read more