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