Application Design II - Exercises
05.04.2023 - 05.07.2023 ( Week 1-Week 14 )
Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Application Design II
Exercises
EXERCISES
Week 1 - Exercise 1
In week 1, we were introduced to MIB and given a review of what we will be working on throughout semester 4. This module is a continuation of the application design module I from semester 3.
What we do next is, we are asked to create a website that contains our portfolio with 4 sections. We are encouraged to use ChatGPT or other AI to assist us in the build process.
After using AI, I ported the code to Visual Studio Code and started replacing the content inside. On the first section, I add a background image and a title written Michelle Angeline's Blog.
REFLECTIONS
Moving on to the 'About' section, I divided this section into 2. On the left is my photo and on the right is a short description of myself. I made my image have a radius of 20% at the edges.
The third section is my portfolio section. First, I divide this section into 3 columns which contain photos of cats. Then I added a title and description that included a link that took us to my portfolio blog page.
The last section contains a contact form. In this section, I use ChatGPT to help me structure the code.
Here is the walkthrough of my website
Week 2 - Exercise 2
Lastly, the last section is the section that contains the album cover along with its title and artist. In this section I use containers and divide them into 4 columns. I make each column a maximum size of 25%.
This is the final look in inspect mode on phone
This is the link to access the web : https://appdesignii-ex2-michelleangeline.netlify.app/
In week 2, Mr. Razif showed us a layout of an application. We were asked to recreate it in HTML. We are allowed to use ChatGPT to help us.
The first thing I did was check the font and colors. Then I downloaded all the images and vectors in the Figma file.
I started at the top of the section. There are 4 elements that need to be included. I decided to create a table and set the width of each element.
Then for the next section, the section is quite complicated. First, I included the background image. Then I added 2 squares for 'Featured Release' and the title of the image.
The next section is a small section. In this section I divide it into two parts. The first vector box is orange and then the words 'New Releases.
The first thing I did was check the font and colors. Then I downloaded all the images and vectors in the Figma file.
I started at the top of the section. There are 4 elements that need to be included. I decided to create a table and set the width of each element.
The next section is a small section. In this section I divide it into two parts. The first vector box is orange and then the words 'New Releases.
This is the link to access the web : https://appdesignii-ex2-michelleangeline.netlify.app/
Week 4 - Exercise 2
Now, we want to make a timeline for the animation. This is just another way to animate the element.
So after we create a variable called "t1" we need to make it equal as "gsap.timeline"
Under the variable we type t1.from("#vector", {y: -100, duration: 0.4, ease: "expo.out"}); and we can make the gsap code before into a comment
Next, we want to make the side panel animate by using reverse function. So we do the same thing as before. Create variable called "t2" and then put the timeline below. We add the t2.play under the sidePanelOpen and then we add t2.reverse on the sidePanelClose.
Next, we want to make a condition where we click one icon it will lead us to a new page. So what we want to do is to create another DIV for the page and add an image there.
And then we want to edit it on the CSS
Next, we add another function called gotoPage2 and put t1.reverse(); there
Then we go back to the DIV where we put the profile icon and we add onClick="gotoPage2();
After that, we create another function to load the page 2 called loadPage2. Then add this
Next, we want to add onReverseComplete:loadPage2 on var t1 so that after the reverse complete for the t1, the page will load to page 2
This will be the final output for today's exercise
Week 11 - Exercise 3
Continuing the previous exercise, this week we learned about how to use simple JavaScript. Firstly, we are going to make the text from "Mangsa" to "Green Day - Dookie".
In the code file, we add this on the html code.
And then we want to make the background of the box change when we click it. So we add the code as well.
This is how it looks like after we click it
Then we want to make it change back when we click it again so we need to make a counter.
Another thing we do is make a side panel. Firstly, we make div for the side panel and then edit it using css.
And it should look like this.
Then we can add the JavaScript. We want to make it open and close when we click it so we need to make 2 function
This is the final output for the exercise
Browser Code from the Web
Browser Code in the HTML File
After that, we can start to animate our application. First, we go to GSAP > Tween. Scroll down and we will find this.
Copy the code and paste it in our HTML file.
In the code file, we add this on the html code.
And then we want to make the background of the box change when we click it. So we add the code as well.
This is how it looks like after we click it
Then we want to make it change back when we click it again so we need to make a counter.
Another thing we do is make a side panel. Firstly, we make div for the side panel and then edit it using css.
And it should look like this.
Then we can add the JavaScript. We want to make it open and close when we click it so we need to make 2 function
This is the final output for the exercise
Week 5 - Exercise 2
Continuing the previous exercise, today we learned about adding GSAP. Firstly, we need to go to the web, and go to the installation.
Then we need to scroll down and find the browser code to put it into our HTML file.
Then we need to scroll down and find the browser code to put it into our HTML file.
Browser Code from the Web
Browser Code in the HTML File
After that, we can start to animate our application. First, we go to GSAP > Tween. Scroll down and we will find this.
Copy the code and paste it in our HTML file.
But before that, we also need to put ID in the DIV that we want to animate
To arrange the timeline of the animation, we can add delay: "x".
The next thing we can do is animate the side panel when it opens and close.
Then we want to make a logo loading screen before the main screen appears. We add another div for the logo screen.
HTML Code
CSS Code
Then we add the script
Initially, the main screen won't appear with animations, so we need to adjust the delay to make the animation appear on time. I added 2 to each of the animations. So the final output for this exercise
Then we want to make a logo loading screen before the main screen appears. We add another div for the logo screen.
HTML Code
CSS Code
Initially, the main screen won't appear with animations, so we need to adjust the delay to make the animation appear on time. I added 2 to each of the animations. So the final output for this exercise
Week 6 - Exercise 2
Continuing the previous exercise, the next thing we do is to make the element animate after the loading. So we add another function called "playLogo" and we put all the gsap code into it except the #logoAnimate
Then, we add playLogo(); between the showMainScreen function.
To declare a variable in JavaScript we can use var or let or const
Then, we add playLogo(); between the showMainScreen function.
To declare a variable in JavaScript we can use var or let or const
Now, we want to make a timeline for the animation. This is just another way to animate the element.
So after we create a variable called "t1" we need to make it equal as "gsap.timeline"
Under the variable we type t1.from("#vector", {y: -100, duration: 0.4, ease: "expo.out"}); and we can make the gsap code before into a comment
Then, we add t1.play(); under the playLogo function.
Next, we want to make the side panel animate by using reverse function. So we do the same thing as before. Create variable called "t2" and then put the timeline below. We add the t2.play under the sidePanelOpen and then we add t2.reverse on the sidePanelClose.
Next, we want to make a condition where we click one icon it will lead us to a new page. So what we want to do is to create another DIV for the page and add an image there.
And then we want to edit it on the CSS
Next, we add another function called gotoPage2 and put t1.reverse(); there
Then we go back to the DIV where we put the profile icon and we add onClick="gotoPage2();
After that, we create another function to load the page 2 called loadPage2. Then add this
Next, we want to add onReverseComplete:loadPage2 on var t1 so that after the reverse complete for the t1, the page will load to page 2
This will be the final output for today's exercise
Week 11 - Exercise 3
This week, we were asked to create a SVG of any logo. I decided to use Figma to create it.
Then we need to export it as SVG.
After that, we open the SVG file using notepad or VSCode, then copy the code and move it to the HTML file. Next, we want to animate the logo. First, we need to connect the HTML file with GSAP by copying this link
Then, at the bottom we add the gsap code
This is the output
Then, we can modify the fill, stroke, strokewidth.
Then we need to export it as SVG.
After that, we open the SVG file using notepad or VSCode, then copy the code and move it to the HTML file. Next, we want to animate the logo. First, we need to connect the HTML file with GSAP by copying this link
Then, at the bottom we add the gsap code
This is the output
Then, we can modify the fill, stroke, strokewidth.
REFLECTIONS
Week 1
Week 1 we were asked to create a website about us. It's still quite easy because we are also allowed to use ChatGPT in the process. Decorating the website feels fun but there is a slight obstacle in my footer where there is a form whose alignment is not neat.
Week 2
In week 2 we were asked to move the app design from Figma to HTML. I felt it was going to be a difficult exercise and yes, during the process, nothing was smooth. Will definitely find errors or untidiness. But with this exercise, I am sure it will help me when working on future tasks.
Week 3
Public Holiday
Public Holiday
Week 4
Week 4 was the week we were introduced to Javascript. Javascript is difficult but quite fun. There are some errors that occur, but they can still be fixed. We also need to use logic to understand entering code into certain parts.
Week 5
This week we learned to include animations using GSAP. The whole process is not too complicated and difficult. From this week's class, I came to understand that one letter or sign is very important in coding. Losing just one of them can make it not work.
Comments
Post a Comment