Interactive Design// Project 2//Microsite

 

31/5-12/6/22 Week 10- Week 11

Chan Siew Ni #0352518
Bachelors of Design in Creative Media

Interactive Design//Project 2

---

INTRODUCTION

<iframe src="https://drive.google.com/file/d/19Jm8JmX_P6Zb26cpaeHRs6jTknT7wtKy/preview" width="640" height="480" allow="autoplay"></iframe>

---

LECTURES

Bootstrap:

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Figure 1: in class exercise of using bootstrap, week 11 (7/6/22)

---

PROJECT 2

Task: With the static landing page designed in Adobe Illustrator, we may proceed to work on creating usable/ workable html page using Adobe Dreamweaver.

Figure 2: Final submission of project 1 static landing page design

To make sure the card size were same, we have to also control the image dimensions, we can first edit and crop in Adobe Photoshop first then only use it in Adobe Dreamweaver. 

Figure 2.1: work progress on making home page 

Figure 2.2: work progress on making home page

Figure 2.3: previewing in browser 

Other than creating a usable html page, we must also check on the responsive page to make sure it works well on other devices too.

Figure 2.4: previewing responsive html

---

FINAL SUBMISSION OF PROJECT 2 MICROSITE

https://htmlproject2-chansiewni.netlify.app/

---

REFLECTIONS

I think this project is a bit time-consuming as we had to ensure everything works well in other devices and sometimes when the code was not working we might be stuck at some part. I have learned a lot from doing this project. For example, I have learn how bootstrap, creating a button, and also creating an responsive html.