INTERACTIVE DESIGN - PROJECT 2

-

7.6.2022 - 18.6.2022 (Week 11 - Week 12)
Hansel Ribowo / 0350008 / BDCM
Interactive Design
Project 2 / Working Landing Page

Lectures
Week 12 / Bootstrap demonstration

This week, we are given a live demonstration on how to use Bootstrap by Mr. Shamsul. We used the v4.4 of Bootstrap documentation

Linking HTML to Bootstrap

Fig 1.1 Bootstrap starter template

Since Bootstrap is an external code and style sheet, it has to be linked in our HTML using the <link> tag so that Bootstrap elements can be used. The starter template in Bootstrap website can be copied and pasted on our HTML. Though, the Javascript links should be at the very bottom of our HTML. 

Navigation bar

Fig 1.2 Bootstrap navigation bar template

Carousel 

Fig 1.3 Bootstrap carousel template

Cards

Fig 1.4 Bootstrap card template

Fig 1.5 Using the card template in multiple columns

All Bootstrap codes can be customised using our own CSS style sheet. For example, the background colour of the webpage and navigation bar can be changed, the style and colour of the buttons can be changed and the font used can be changed as well. But remember to link the fonts from Google Fonts to change the fonts. We would only require to find the class name and indicate it in CSS to customise the appearance. The class name can be found by looking at the HTML or by using the inspect function in the web browser. 
Instructions
Progress
In this project i use visual studio code to make my landing page working.
In my landing page i just use bootstrap for the navigation.

Fig 1.6 HTML 

Fig 1.7 CSS
Reflections
In this project i confuse about using bootsrap maybe because its new to me, but i still like the proses when i do the code and theres a trouble ofcourse when making the landing page working but i manage to figure it out.

Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II - EXERCISE 1

-
Image
12/04/2023 Hansel Ribowo / 0350008 BDCM (UI/UX) Application Design II - Exercise 1 Exercises In this first week, Mr. Razif explains to us about MIB and what task and project we will do this semester after that we learn how to use Chat GPT to make a website after that Mr. Razif asks us to do some exercises which make a website using Chat GPT. Here my website uses Chat GPT Fig 1.1 Home Page Fig 1.2 About Page Fig 1.3 Portfolio Page Fig 1.4 Contact Page Fig 1.5 HTML Coding in Visual Studio Code Fig 1.5 HTML Coding in Visual Studio Code Fig  1.6 CSS Coding in Visual Studio Code Fig  1.7 CSS Coding in Visual Studio Code Fig  1.8 CSS Coding in Visual Studio Code ...
Read more

APPLICATION DESIGN II - LECTURE

-
Image
03/05/2023 Hansel Ribowo/BDCM App Design II Lecture Lecture In this week we learning how to animate our website. We start by learning how to use Gsap website to help us with the animation of the website, Then we try to animate our website logo by using script that we copy from Gsap. First we need to load Gsap into HTML page we need to add script in visual studio code which is this After adding the script now we can add the animation from Gsap, our lecture want us to the animation for the logo so this the code for the animation First we need to add id to the logo. and then add the Gsap at the java script section. This one is for adding ease in/out for the animation After that, we added some animation delay to make it come one by one. This animation for the side panel that when we press it will show the menu to animate the section we need to add the animation when open and close the panel. now we making the main lo...
Read more