Labels

INTERACTIVE DESIGN- PROJECT 2

 

Week 8 (18/10/22)- Week 9 (25/10/22)
Student: Tai Ser Yeet (0345798)
Programme: Bachelor of Design (Honours) in Creative Media
Task: Project 2- Working Landing Page

WEEK 12

LECTURE 

BOOTSTRAP

  • .container-fluid is to make the menu full size (extend all the way to the sides)
  • must have 12 columns
  • when you wanna set columns, use flex on the parent element
  • make sure that the content in the card is not too long, around one short paragraph is enough
  • if you wanna use a carousel, then use images with the same sizing 
  • use "navmenu" for automatic resizing of the menu
  • javascript link should be at the bottom of the code sheet
  • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> = so that the website created is mobile-responsive
  • before putting the carousel or column stuff, make sure to click the open tag <div> to know where is the end tag and that's where u can paste the next feature
  • add margin = mt-5, add padding = p-3 ( the number represents how wide you want it to be)// add it in <div class="row mt-5" and so on
  • because we cannot edit the CSS sheet from bootstrap, we have to create our own CSS sheet and attach it to the HTML file. In that CSS sheet, we will put the same class name and change the color of the text. Then do not forget to add a !important; at the end.
  • The !important;  is to tell the system to override the Bootstrap CSS command.
  • choose either one of the class names for navigation menu (.nav) cuz there are many classes placed under the nav or container class (e.g choose either .nav, .nav-item, .nav-link)
  • e.g position:absolute; left: 80px; right: 70px; allows you to manually shift any elements that you want to align. (buttons, pictures)

INSTRUCTIONS

Fig XX Image Citations, Week 12 (15/11/22)


PROJECT 2: WORKING LANDING PAGE














copied from Bootstrap. helps to make the image responsive to the page, applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

Fig XX Adding Image Fluid, Week 12 (15/11/22)


PROMPT MESSAGE (interested in joining)

Fig XX Offsetting Header text, Week 12 (15/11/22)


changed alignment of sub-header to be centered-aligned by using text-aligned and also offsetting the columns by 5 points

Fig XX Changing Alignment of Sub-Header, Week 12 (15/11/22)

changing border radius for email application (newsletter)


Fig XX Adding Hyperlink to Footer, Week 12(5/11/22)

Fig XX List for Footer, Week 12(5/11/22)

many issues were encountered e.g first everything was highlighted due to the fact that i placed it in the <ul> tag instead of each individual element.

Fig XX Adding Hyperlink to Footer List, Week 12(5/11/22)


Due to the time crunch, I really could not afford to waste time on the multi-column carousel anymore as I tried many different versions and followed too many YouTube Tutorials but none of them worked for me. Hence, I just decided to delete the entire section and replaced it with a simpler carousel design.

Fig XX Deleting Entire Carousel, Week 12(5/11/22)

I tried many different versions and followed too many YouTube Tutorials but none of them worked for me. Hence, I just decided to delete the entire section and replaced it with a simpler carousel design.
Fig XX Adding New Carousel, Week 12(5/11/22)

To make all the images similar in size, I went on to Illustrator and resize each of them. After that, I cropped off the white parts and saved it.

               Fig XX Cropping Images, Week 12(5/11/22)


FINAL SUBMISSION OF PROJECT 2


FEEDBACKS

WEEK 13 -

Specific Feedback

  • Can change the header position with margin auto 
  • Double-check if there's any section with an unnecessary margin; add a border too if you want
  • Two options to align the sub-header to the images; either make the text center so it looks more uniform with the placement of the button OR applies the same column style to the text so they are following the same margin
  • Try to use the default bootstrap button 
  • Make all the images the same size
  • Remove the extra space by reducing the width of the header image (should not have the horizontal scroll bar at the bottom)
  • The button is not aligned properly with the shape

REFLECTIONS

EXPERIENCE

lorem ipsum paragraph

OBSERVATIONS

lorem ipsum paragraph

FINDINGS

lorem ipsum paragraph

Labels:

Comments

Post a Comment