Application Design II | Exercises
Feng weijie | 0349058
Application Design II | B' in Creative Media
03.04.2023 -28.6.2023 (Week 14 -Week 1)
LECTURES
Week 1
During our first class, Mr. Razif introduced us to ChatGPT. I wasn't familiar with it before, as I had only heard of it but never tried it out. It turned out to be a powerful tool that could help us create a "template" for any type of website we wanted to try. In the first exercise, I followed Mr. Razif and used ChatGPT to create an investment portfolio website, which consisted of 4 sections and a contact form, with smooth scrolling and jumping links.
Week 2
we were asked to convert the application design from Figma to HTML. I found it to be a challenging exercise that sometimes upset me a bit. While the previous exercises brought back memories, I forgot some details, including when there were bound to be bugs or untidy code. Luckily, my friends around me have helped me a lot, and this exercise, I believe will help me cope better as I tackle future tasks.
Week 3
public holiday and we do not have classes.
Week 4
we learned Javascript. I found Javascript to be a bit more challenging than HTML or CSS. But when I started to understand it and was able to write some code, I felt satisfied. Although there were some mistakes during the learning process, I learned how to fix them.
Week 5
we learned to animate using GSAP. The whole process is not too complicated or difficult. This week's lesson made me realize the importance of a letter or symbol in programming. I always remember to check the spelling because a small mistake can cause the whole code to not work. This happens quite often, and as long as there is a small spelling mistake, the problem can occur.
INSTRUCTIONS
Exercise 1
The first thing I did was reinstall Adobe Dreamweaver because I reset my Mac to clear up some storage space.
Upon our initial introduction to this module, we underwent a thorough review and passed the MIB assessment. This module serves as a continuation of the application design course in Sem 3, and my project and progress can be viewed here. Once again, we will be learning coding (HTML, CSS, and JScript), and this time, we must create wireframes of our previous project using code, so that it can be developed into a fully functional application.
Then I went ahead and put it on Dreamweaver
My self-introduction website cover
Exercise 2
In the second week of learning, our mentor, Mr. Razif, showed us the layout of an application, which was a very valuable experience for us. We were asked to recreate the layout of the app in HTML, and luckily we were able to use ChatGPT as a tool to help us with this task.
The first thing I did was check the font and color. Then I downloaded all the images and vectors in the Figma file.
After that, I started analyzing what the framework of the parts of it consists of. What I like about Figma is that you can clearly see its structural framework, which makes it easier for me to write code later.
I had to reposition my image,. the layout has been rearranged.
Adjust the data to get him back to the right place
Make one last trial on Safari
Exercise 3
This week's exercise is to introduce us to JavaScript in some way. We are introduced to several elements and properties of JS. The first thing we try to do is change "Mangsa" to another band name when we click on it. To do this, we first need to add an id to the text "Mangsa". After that, we need to create a <script></script> tag. This is the section where we should add JScript. For this particular task, we need to add an element function and the getElementById script (because we want to link the two). Then, next to the id line, we want to add an onClick command to indicate that the code runs when we click on it.
We're going to add a unique logo screen (with animation). Then when it is done, it will switch to the home screen. To do this, we use the same method as before, but add an onComplete function. First, we use div to separate the logo screen from the home screen.
Exercise 4
First, we fixed the animation on the home page that was cut off when we first showed the first logo animation. To do this, we added a function to know when to play the animation.
Then Mr. introduced us to Timeline. Basically doing the same thing, putting it in a function, but it allows you to pause and play the animation itself.
The final collection of all exercises
Exercise 5
To improve our animation skills, we went through another exercise to animate the app's logo. In this case, Mr. Razif told us to create a circle and asterisk in Illustrator and save it as a .svg, because it is easier to animate the image if it is in the .svg. This is my bear logo.
link: https://bearlogo.netlify.app/
feedback
Overall ok, continue to complete the page.
ponder
Even though I had completed the website for the interactive design module in the second semester, I forgot how to do this and that, but not completely. At first, I was confident in myself. I thought, "Ah, I can't possibly not do it. I did that last semester. However, after I started building it into HTML, I was suffocated and struggling. Why is it so hard? I remember why I can't do it very happily now? But then I tried to recall everything and watch some previous tutorial videos. It turned out I could do it, and I wondered why I didn't have confidence in the first place. But, starting our module with this exercise, I think it really helped me a lot. I can recall things I forgot and even learn new things, like animations with or without GSAP. This will really help me later when building the front-end part of the mobile app.
.jpg)
.jpg)
Comments
Post a Comment