15 Oct 2019 - 29 Oct 2019 (week 08-week 10)
Soo Wen Yi (0334653)
Interactive Design _ Project 2
LECTURES_
Lecture 06 _
15 Oct 2019 (week 08)
This week's lecture is on Bootstrap, I took some notes during lecture.
-webpage that render well on different devices & screens
-use % instead of px
-it adjust the content to fit in the viewport automatically, no content will be left out.
-this is achieved by fluid grid concept
image:
.img-fluid {width:100%; height auto;}
-this resizes the image to be 100% according to the size of the container
Bootstrap framework Grid notes
-usually 100% frame divided by 12 columns (12 because when you divide with 12 with any other number, you get a single number)
.col -will never collaspe
.col-sm -will collapse only when the viewport is small (4)
.col-md -will collapse when the viewport is medium (3)
.col-lg -will collapse when the viewport is smaller than large (2)
.col-xl -will collapse first (1)
.col-4 .col-4 .col-4
-all number together have to add up to 12
3 important tags
-meta tag
-CSS tag
-JS tag (javascript)
<div class="container-fluid mainbg">
container-fluid = bootstrap CSS
mainbg = our own CSS
-can have more than 1 class names, separate them by space
-adding our own CSS to customise it because its not in the bootstrap's CSS
-using .col don't have to use float
-use the p- padding from bootstrap or you can use your own
-section is <div class="row">
To make 2 columns (both col-4) that don't add up to 12 in the middle:
"col-4 offset-md-2 colbg p-5"
columns: 4x2= 8
total: 12
12-8=4
-so we need 2 on each side to make the 2 columns in the center (offset-md-2)
No lecture
22 Oct 2019 (week 09)
No lecture
29 Oct 2019 (week 10)
INSTRUCTIONS_
PROJECT 2_
Week 08
Bootstrap - in class
For this project, we are to create a microsite for an event that was given to us in Advance Typography. And we are to use our collateral from there for this microsite. We are also required to use Bootstrap 4 along with HTML and CSS to create this microsite. We started with learning Bootstrap in class with Mr Lun.
 |
| Fig. 1.1: Bootstrap website examples |
 |
| Fig. 1.2: Grid example |
To start off I tried to use the template carousel from Bootstrap. But that was really confusing because I didn't need/want the carousel so I struggled trying to get rid of that and replacing it. But at the end I gave it some thought and figured that using the grid will be much easier for me to do, then add on other bootstrap elements.
 |
| Fig. 2.3: screenshot of starting out |
Everything was going well except when I ran into this problem of not be able to use the "btn" tag for my buttons or else they would go out of their box as seen below.
But after looking at the my CSS code with a fresh eye, I realised the problem was caused by having the same class name as the "more info" button.
Week 10
After my feedback I adjusted all the things that Mr Shamsul told me to. Except for the "more info" button being in another position when I resize the view port even though I tried a lot of ways and asked my friends. Here are the font and images used in this microsite.
I chose this font for its similarity to the font that I've used in my key artwork to tie in the rest of the sub-headings in the microsite.
 |
| Fig. 2.5: main background image |
 |
| Fig. 2.6: speakers |
 |
| Fig. 2.7: flag used |
 |
| Fig. 2.8: poster |
 |
| Fig. 2.9: t-shirt |
 |
| Fig. 2.10: tote bag |
 |
| Fig. 2.11: lines image body |
 |
| Fig. 2.12: lines image footer |
Here's the final outcome of the microsite.
 |
| Fig. 2.13: screenshot of a part of my own CSS |
 |
| Fig. 2.14: screenshot of the start of my HTML |
 |
| Fig. 2.15: screenshot of a part of my HTML |
 |
| Fig. 2.16: screenshot of final microsite 1 |
 |
| Fig. 2.17: screenshot of final microsite 2 |
 |
| Fig. 2.18: screenshot of final microsite 3 |
 |
| Fig. 2.19: screenshot of final microsite 4 |
 |
| Fig. 2.20: screenshot of final microsite 5 (clicked on view item) |
 |
| Fig. 2.21: screenshot of final microsite 6 (zoom on hover) |
 |
| Fig. 2.22: screenshot of final microsite 7 |
Here's the link to my microsite
https://id-htmlwenyi.000webhostapp.com/Microsite/microsite.html
FEEDBACK_
Week 08
no feedback
Week 09
no feedback
Week 10
Bigger logo on the navigation bar, put some more spacing on the buttons in the navigation bar. The problem with fixed navigation bar is that it covers the top of the linked section, put some margin on top to stop right below the navigation bar when clicked on the section. Other than that its ok.
Comments
Post a Comment