Interactive Design / Project 2
07.06.2022 - 19.06.2022 (Week 11 - Week 12)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Interactive Design / Taylor's University
Project 2
LECTURES
<back to top>
WEEK 11 (07/06/2022) - Bootstrap
As mentioned before, bootstrap is a very good opensource site.
Container and Grid system can be used to add the code for layouts.
- CONTAINER
fig 1.1, container, Week 11 (07/06/2022)
- GRID
fig 1.2, grid, Week 11 (07/06/2022)
- 12 Grids : easiest number to divide
- NAVIGATION
fig 1.3, navi, Week 11 (07/06/2022)
- Provide various style of navigations.
- Usually used: navbar -> allow hamburger menu
- CAROUSEL
- Something to put the image and can be slide
- CARD
fig 1.4, carousel, Week 11 (07/06/2022)
- BUTTONS
fig 1.5, buttons, Week 11 (07/06/2022)
- To change the color of button custom:
fig 1.6, custom-button, Week 11 (07/06/2022)
PRACTICAL
<back to top>
First, I created new files:
fig 2.1, starter, Week 11 (07/06/2022)
Then add the starter template, and adjust the title and add div.
Then, I add the navigation, I add navigation as instructed, sticked on top:
fig 2.2, to make sticky top navbar, Week 11 (07/06/2022)
fig 2.3, navbar, Week 11 (07/06/2022)
Then add the carousel. This is how to make the card more than 1:
fig 2.4, section (column) for card, Week 11 (07/06/2022)
fig 2.5, cards, Week 11 (07/06/2022)
I followed all the instructions and successfully made this. I'm satisfied.
fig 2.6, cards, Week 11 (07/06/2022)
INSTRUCTIONS
<back to top>
fig 3.1, Module Information Booklet of Interactive Design
WEEK 11 TASK (07/06/2022):
✅ Finish Project 2 by next week.
EXERCISES
So this is the layout design I'm going to use:
fig 4.1, project-1 static prototype, Week 11 (07/06/2022)
First thing first, I made the starter code for the web, the head, body, css, everything.
fig 4.2, starter code, Week 11 (07/06/2022)
Moving forward to the navigation bar, I followed all the instructions demonstrated in previous class, and came out with this:
fig 4.3, navbar, Week 11 (07/06/2022)
I began to resize the image so they have same size, and put it in the bootstrap code:
fig 4.4, carousel images, Week 11 (07/06/2022)
Then, I move out to the card and made them using the bootstrap. I used single card bootstrap, which make the card don't maintain their size on smaller device, so I changed it into the grouped card bootstrap. For the CSS, I edited it so it made the corner rounded.
fig 4.5, cards, Week 11 (07/06/2022)
Then I made the featured post section. i have no issue with this since it's like the previous file I did. I just add button to the image so it can interact. For the image, I put it as <div> background.
fig 4.6, featured post section, Week 11 (07/06/2022)
The sign-up section in my opinion is a little bit confusing at first because it uses code that's new for me, <form>. But then, I tried to put it on <div>s, and gladly it worked!
fig 4.7, form, Week 11 (07/06/2022)
Then I proceed making the footer, I find it very messy because I use div so the placement is very wrong. I solved the problem by using column, which I copied form the bootstrap and edit some a bit.
fig 4.8, footer, Week 11 (07/06/2022)
In the process also, I learnt a lot of new thing from other sites, like we can actually write on specific weight of typeface using the number (if we have various weight of typeface other than only bold-regular-italic).
Also, my teacher back in high school refer me to read form W3S School, which offer very guiding information.
FINAL SUBMISSION:
After I finalize everything and finish everything, this is my final:
Submission link: https://project-2-abigail.netlify.app
REFLECTION
WEEK 12 (14/06/2022):
- SPECIFIC FEEDBACK:
- Finish your layout because it's almost submission.
- Refer to the recorded lecture for the <a href> coloring, also the usage of div.
REFLECTION
I explored very wide knowledge in this project. Because it's my first time being exposed to Bootstrap and I notice lots of instant code that can be edited so we don't make the website step by step from zero. I noticed that it's very important to understand the basic coding of HTML and CSS, which really help the process in editing the Bootstrap.
Turns out, I learnt to make a prototype in a short period of time (1 week) which also can make my working time faster.
Comments
Post a Comment