Application Design 2 // Class Exercises & Tutorials

 29.08.2023 - .0.2023// Week 1 - week 6

Lim Yi Xvan 0354552

Bachelor of Design in Creative Media 

---

Instruction

---

Task 1

Week 01 

On week 1, Mr. Razif briefed us about the module's outlines and objectives. Each task's details were also explained and examples of seniors were also shown for us to have a better understanding of what we will be doing soon. 

Then, we were asked to present our last semester's work on App Design 1, which mine was the Period Tracker App by GP Apps. Feedback was given to let us think of better improvements that can be made.

Week 02

For week 2, we were taught how to use customized codes to develop easy web pages with simple designs. It was said that we were to "recap" things we learned on Advanced Interactive Design but, things were quite different from what we'd learned on the previous semester. 

As on AID, we were using bootstraps and templates to develop the pages and now, we are restricted to not using bootstraps and we were to think of what codes to be applied from the basics provided on w3school. 

It's been a long time since I used Dreamweaver so it was quite challenging at first to recap things and its features, but then after some guidance from friends and "self-experiment", things slowly get back to my mind. For this task, we were asked to create a main page with a logo in the middle, then when you click the logo, you'll be directed to the second page with an image and text right beside in column form.

Hence, I've created two index.html so that I have another link that can be directed when I click the logo. Buttttt then, Mr. Razif showed us his example which was the second page after you scroll down from the first page. So yes, sis amended the codes and made it as what he wanted. So here are the final codes for page 1 & 2 with the style.css along.

fig 1.1 - exercise 1 codes

fig 1.2 - exercise 1 style.css's codes

Outcome:

Week 03

On week 3, we were asked to create a two section website with Dreamweaver as well. Mr. Razif showed us a Figma web design and asked us to replicate it using Dreamweaver. The images and vectors are provided via Figma and we can get all the sources from it. 

The main page with the logo in the middle, we were asked to make it scroll to the next page while clicking on it. Hence, a hyperlink was created for it and a scroll behavior was added for it too.

fig 2.1 - exercise 2 logo's codes

fig 2.2 - exercise 2 logo's style css codes

Next, for the second page was super challenging to insert the codes for the actual layout shown in Figma. There's a moment actually when I already feel like giving up as I don't even know how to deal with this stupid thing. My mind has already crashed and cannot function even using ChatGPT also not able to fix my issues. 

But after a few attempts of retyping the codes, and changing the style codes for the section. THINGS FINALLY WORK! oh lord. 

fig 2.3 - 2nd page logo's style css codes

My logo on the navigation for the 2nd page finally aligned with the other icons. SIS is exhausted already... Then the next issue faced which is also the biggest problem of all, is the image container with text container in it.

fig 2.4 - problematic section

What my problems are: The texts in the images don't align, and some with bigger widths and the "play" icon some more don't stay inside the container. However, after asking ChatGPT about my issues and trying to figure it out myself, it finally worked out!!

fig 2.5 - solution for problematic solution

Outcome:

Week 04

In week 4, we were asked to reuse the "Band" website we had done last week and make some changes. Mr. Razif taught us how to use the function of "toggle play" where you click something and changes will be made as in buttons, texts, images, etc. 

An easy tutorial was given, using the "hello world" text.

fig 3.1 - "hello world" tutorial

Next, we were brought back to the Band website. We were asked to create a pause button once you clicked on the play button along with the border color changes from grey to red. Hence, an ID was created for each item to be scripted later for its function.

fig 3.2 - ID created for each item

Then, the texts were informed to become "italic" later along while the texts changed from "Mangsa" to "Mangsa-Now Playing". Hence, a new ID was created for the text as "textElement".

Outcome: