Interactive Design - Project 2 Microsite
2/6/2021 - 20/6/2021 // Week 10 - Week 12
Gan Shin Tung / 0346455
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2: Microsite
Lecture
Week 9: Box Model
Week 10: Bootstrap
Instructions
<iframe
src="https://drive.google.com/file/d/17gAJVt0w293uSw8UPuuvmIg_pbAEcaDD/preview"
width="640" height="480"></iframe>
Project 2
For project 2 we had to make our project 1 design into a website using html,
css or bootstrap that we've learned during the past few weeks. Mr.Shamsul said
we could use templates online or bootstraps templates. Therefore, I went
online for some bootstraps template to create my website page.
Mr.Lun share few links to make our webpage:
Bootstrap site and documentation. Look at the "Docs" and "Examples" section
https://getbootstrap.com/
HTML
https://www.w3schools.com/html/default.asp
CSS
https://www.w3schools.com/css/default.asp
Changing Bootstrap Navbar Color. Look at the Bootstrap 5 Answer
https://stackoverflow.com/questions/43381596/bootstrap-4-navbar-color
Reorder column ordering / sequence in Bootstrap
https://getbootstrap.com/docs/5.0/layout/columns/#order-classes
Example file for carousel that don't become small (height) when resize
https://drive.google.com/file/d/1oicn68Npq5IPizguqJQtnB4oFxjTVDCt/view?usp=sharing
Animate DIV on scroll
https://michalsnik.github.io/aos/
Photo Gallery (Enlarge Photo) Light Box 1
https://www.w3schools.com/howto/howto_js_lightbox.asp
Photo Gallery (Enlarge Photo) Light Box 2
https://lokeshdhakar.com/projects/lightbox2/
Custom fonts
https://fonts.google.com/
He also showed us how to get button by using button generator online and get
the html and css code during exercise 2.
 |
| Figure1.1 Google Search |
 |
| Figure1.2 Button Generator Website |
With the existing CSS and HTML code provided from these free websites, we could possibly design at the same time generate any styles of buttons we wish and insert them into our webpage that we're designing. Just copy and paste those HTML and CSS codes in our Adobe Dreamweaver and we will get the results.
 |
| Figure1.3 Adjust Opacity in Adobe Illustrator |
After that I start generating my code for my website that I've designed in Project 1.
|
| Figure1.1 HTML |
|
| Figure1.2 CSS |
These are the codes of my HTML and CSS that I've used to make my website.
Final Outcome:
|
| Figure1.3 Main Page |
|
| Figure1.4 About Page |
|
| Figure1.5 Menu Slide Bar |
|
| Figure1.6 Location Page with Map |
|
| Figure1.7 Contact Page & Footer |
FINAL WEBPAGE LINK: https://reverent-franklin-a41cb8.netlify.app
This website is clean and rather simple as this is my first time attempting to type out the codes myself therefore everything is still new to me. However, since I've experienced it in this project, I think I would perform better in my Final Project.
Reflection
Week 10-12: I'm so nervous this is the first time I'm doing coding in my life. This is so hard and confusing, I question myself if I will be able to do it. Luckily I've got help from the templates online that Mr.Lun provided me, or I think I won't be able to survive this semester. I'm so anxious about this course, if I do not pass I would have to take it another semester. I have to pass this and put effort so that I don't regret.
Feedback
Week 11: You will have to change the opacity of the image in Photoshop or Illustrator, it is difficult to change it in HTML or CSS, it is more easy for you to change it outside before you add them in. And make sure to save it as png or the background will still be there, remember this.
Comments
Post a Comment