Interactive Design : Project 2 - Working Web Page

Berlian Johanna / 0360054
Interactive Design/ Bachelor of Design in Creative Media (Hons) 
Project 2 - Working Web Page

Instructions


Project 2 - 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 and submit the link here. Update your e-portfolio with all the processes documented in the blog.

Progress

Fig 1.1 Dreamweaver (HTML)

I used dreamweaver and follow the instruction exercise in order to accomplish the same form just like the previous prototype I done in Project 1 (Figma). In this process, I carefully create the HTML structures for every part of a webpage, such as personal information, education, work history, skills, projects, and other important sections. At the same time, I make sure to give each part the right labels and organization by using specific class names. I tag each element with the right classes in the HTML structure. This careful approach in the project guarantees that when it's time to write the CSS, the task will be much simpler and well-organized. By giving each element meaningful and clear class names, I create a logical and systematic link between the content and its style.

Fig 1.2 Dreamweaver (CSS)

Even after finishing the coding part, I ran into numerous errors when I tried to showcase the project on the website. But this far I try to handle it while asking some of my classmates for checking the codes if I am doing it wrong. When I checked again, there's an error again so I asked our lecturer as He gave solution how to fixed that part, and so I try explore everything until I manage found the problem source.


Fig 1.3 Screenshot of my working web page

Final Outcome
Copy the link below and paste it on Safari/Google to view my Final Outcome :

Komentar

Posting Komentar

Postingan populer dari blog ini

Information Design - Flip & Exercise : 1 & 2

Gambar
Berlian Johanna / 0360054 Information Design / Bachelore of Design in Creative Media (Hons) Exercises Instructions   Flip W1: Types of infographics & online tools Presentation slides In your group, find out what are the different types of infographic + the kind of information they’re applicable for + an example for each identified type. Flip 1 (Group 4) - Types of infographic oleh Adriena Tan Flip 1 (Group 4) - Types of infographic by Group 4 Individual task Pick one free online infographic tool and re-design one poorly constructed infographic poster.  Record the process into the your blog and present the redesigned infographics with before and after comparison and their personal rating + review of the online tool for: - Difficulty, intuitiveness - Usef
Baca selengkapnya

Information Design - Project 1 & 2

Gambar
Berlian Johanna / 0360054 Information Design / Bachelore of Design in Creative Media (Hons) Project 1 & 2  Instructions Flip W3: Miller's Law Group Presentation.  Flip Topic 3 oleh Adriena Tan Flip 3 (Group 4) - Miller's Law by Group 4 Individual Task Project 1 An infographic poster for ONE recipe selected from Pasta Grannies. Study one video, break down, and chunk the preparation and cooking process into an instructable poster. Try to capture each Grandma’s personality and unique dish identity in your poster as part of the narrative structure. These infographics present complex information quickly and clearly, with symbols charts, and diagrams. With an information graphic, computer scientists, mathematicians, and statisticians develop and communicate concepts using a single symbol to process information.  Your job is to transmit a set of instruc
Baca selengkapnya

Intercultular Design

Gambar
Berlian Johanna / 0360054 Intercultural Design / Bachelore of Design in Creative Media (Hons) Instructions My Google drive :  Intercultural Design - Google Drive Project Week 1 Brown and Beige Aesthetic Modern Group Project Presentation oleh Berlian Johanna Fig 1.1 Balinese People PPT In this PPT, I do my own research avout Balinese People and their culture too. I put every updated information and research in there but for in case I write down in the blog. For my PPT Intercultural Research, I have a thought came across me which culture I am gonna do.  I choose Bali since it's not only has unique culture or festivals and rituals ceremony, but also know world event until international.  So in materials I do research to Introduce Indonesia first before focusing ot Bali. Then after introduction I start focusing more to Bali which I make a title Balinese People. Balinese People ahev the
Baca selengkapnya