Interactive Design - Project 2

15/10/19 - 29/9/19 (Week 8 - Week 10)
Chan Qian Hui 0334447
Project 2
Troublemakers Manifesto Microsite

---

INSTRUCTIONS

---

LECTURE NOTES

15.10.19 (Week 8)
For this week's class, Mr Lun taught us about responsive web design and introduced us to bootstrap. We learned about the grid systems in bootstraps and other features to be applied to our designs.

Fig 1.0 Grid systems in bootstrap

Fig 1.1 Bootstrap exercise in class

22.10.19 (Week 9)
There was no lecture conducted this week. We worked on planning the wire frames for our microsite

29.10.19 (Week 10)
There was no lecture conducted this week. We continued working on our microsite.

---

TROUBLEMAKERS MANIFESTO MICROSITE

For this project we were required to create a micro site for our troublemakers colloquium from Advanced Typography Project 2. We needed to apply frameworks from Bootstrap when creating our website

The microsite should include all details on only one landing page. We are to incorporate the collaterals made from Advanced Typography into the site.

Reference :
I used the sample given by Mr Lun and Mr Shamsul and also a sample from the internet called stylish portfolio (https://startbootstrap.com/themes/stylish-portfolio/) as reference for my microsite.

Fig 2.0 Sample given by Mr Lun

Fig 2.1 Sample found on internet

Elements used in Microsite :

Here are the elements which I included in the microsite :

1. Carousel 

Fig 3.0 Carousel Element #1

Fig 3.1 Carousel Element #2

Fig 3.2 Carousel Element #3

2. Panel list, Event Details, Part of key illustration and colour palette

Fig 3.3 Panel list, Event Details, Part of key illustration and colour palette element used 

3. Merchandise Section

Fig 3.4 Merchandise Element #1 (poster)

Fig 3.5 Merchandise Element #2 (shirt)

Fig 3.6 Merchandise Element #3 (tote bag)

Process of creating Microsite :

1. HTML coding

Fig 4.0 HTML Coding Process

Fig 4.1 HTML Coding Process

2. CSS Coding

Fig 4.2 CSS Coding Process

Fig 4.3 CSS Coding Process

---

Final Website Link :

https://troublemakersmanifesto-qian-hui.netlify.com/

Final Website Screenshots :

Fig 5.0 Carousel #1

Fig 5.1 Carousel #2

Fig 5.2 Carousel #3

Fig 5.3 About Section

Fig 5.4 Panel Section

Fig 5.5 Panel Section

Fig 5.6 Panel Section

Fig 5.7 Merchandise Section

Fig 5.8 Merchandise section

Fig 5.9 Footer

---

FURTHER READING

HTML QuickStart Guide: The Simplified Beginner's Guide To HTML

This books is really helpful as it helps readers and learners through the HTML learning process in a step-by-step progressive path. Our simplified presentation means that foundational concepts are built upon to speed up the HTML mastery process. This guide starts with the fundamentals and takes readers all the way to building their very own full-fledged HTML5-compliant web page.
Through this book I learnt Foundational HTML Terminology, Basic Page Structure - Head & Body Markup, Page Content Creation - Paragraphs, Lists, Tables and Images, Content Structure - Headers, Footers, Semantic Images, The Importance of HTML5 Compatibility, The Top Mistakes to avoid when creating website.