Application Design II / Exercises

on


05.04.2023 - 12.04.2023 (Week 1 - Week 2)
Audrey Gracia Djohari / 0348120
Application Design II
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Exercises


EXERCISE 1


WEEK 1:

Instruction

During class, Mr. Razif told us to use ChatGPT to generate an HTML code for a simple website. Then, we had to design and edit it again to look better.  Unfortunately, I didn't attend class that Wednesday so I knew all of this exercise from  my classmates. They gave me a prompt and I tried it in ChatGPT.

ChatGPT

ChatGPT Prompt:
"write an HTML and CSS code for a 1 page scrollable and sticky 
navigation with a jump link website with 4 sections"

Fig 1.0: Codes generated by ChatGPT

HTML code by ChatGPT:

<!DOCTYPE html>
<html>
  <head>
    <title>My One-Page Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact Us</a></li>
      </ul>
    </nav>
    
    <section id="home">
      <h1>Welcome to my website!</h1>
      <p>This is the home section of my website.</p>
    </section>
    
    <section id="about">
      <h2>About Us</h2>
      <p>This is the about section of my website.</p>
    </section>
    
    <section id="services">
      <h2>Our Services</h2>
      <p>This is the services section of my website.</p>
    </section>
    
    <section id="contact">
      <h2>Contact Us</h2>
      <p>This is the contact section of my website.</p>
    </section>
  </body>
</html>

 

CSS code by ChatGPT:

body {
  font-family: Arial, sans-serif;
  margin: 0;
}
nav {
  position: sticky;
  top: 0;
  background-color: #333;
  padding: 10px 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
nav li {
  margin: 0 20px;
}
nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}
section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#home {
  background-color: #f2f2f2;
}
#about {
  background-color: #d9d9d9;
}
#services {
  background-color: #bfbfbf;
}
#contact {
  background-color: #a6a6a6;
}

I copied and pasted the codes in Adobe Dreamweaver and link the HTML & CSS file. 
<link rel="stylesheet" type="text/css" href="Week1.css">

It came out like this:

Fig 1.1: Website Preview by ChatGPT

To me, ChatGPT is an truly amazing! It makes this task easier. It's an Artificial Intelligence in a form of language model that has the ability to generate coding for websites. ChatGPT can understand complex instructions and translate them into accurate and efficient code. This technology really helps creating impressive websites with ease. The outcome is truly remarkable, because it produces code that is not only functional but also visually appealing and user-friendly.

However, using chatGPT also worries me. It will become more and more sophisticated in the next few years and it's a possibility that many jobs will be replaced with this AI technology.

Designing & Reediting

After generating the initial code, I re-edited the website to give each section a unique color. I changed the fonts with codes from Google Font. 

I decided to make the website about my dog, a corgi. I added some personal photos and used animations to bring the website to life. With ChatGPT as my starting point, the entire process was a breeze.

Fig 1.3: Coding in Dreamweaver

Fig 1.4: Files

It took me quite some time though to find out how to fix things. Such as the padding and the kerning of the text.  The end result was a cute and functional website that showcased my furry friend in the best possible way.

These are the codes that I wrote to make this website:

Fig 1.5: HTML Code

Fig 1.6: CSS Code


Final Outcome

And these are the final outcome of my first exercise for this module. I provide PNG and screen-recorded GIF. 

Overall, it took me about 3 hours to make this. I know it took me quite long because it's been months since the last time I did programming. This is definitely a brain exercise so that I can recall what I've learned in the past semesters.


Fig 1.7: Website Final Outcome, GIF

Fig 1.8: Website Final Outcome, PNG

EXERCISE 2


WEEK 2:

Instruction

This week, Mr. Razif gave us a Figma file and instructed us to redesigned it using HTML. We were allowed to download the images from Figma but we need to recreate the text, squares and shapes.

Process

I use Figma to see the color code and to measure the contents. The measurement in Figma is really helpful because when I click an object, it will show its width, height, and position in the frame.

Fig 2.0: App Design Reference in Figma from Mr. Razif

It didn't take me long to finish the exercise, only around 2 hours (?). It's a fun exercise to refresh my HTML coding knowledge. And I feel satisfied that I can redesign the whole thing. One CSS code that I found very helpful is position: absolute; This code allows me to move the object freely in the div, not being bothered or blocked by other objects. It also allows me to overlay on the other objects.

Fig 2.1: Position absolute definition

Outcome (Week 2)


Fig 2.2: HTML Code

Fig 2.3: CSS Code

Fig 2.4: Final Outcome, Web Browser

WEEK 4:

Learning Java Script

This week, we added <script> where we put the JavaScript codes. Mr. Razif gave us a link to https://www.w3schools.com/js/ where we can find all tutorials for JavaScript.

JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages

  • What JavaScript can do:
1. Changing HTML Content: 
document.getElementById("demo").innerHTML = "Hello JavaScript";

2. Changing Attribute Value (Image): 
<button 
onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light
</button>

3. Changing HTML Style (CSS): 
document.getElementById("demo").style.fontSize = "35px";

4. Hide & Show HTML Elements:
Hide: document.getElementById("demo").style.display = "none";
Show: document.getElementById("demo").style.display = "block";

  • Where to put JavaScript
In HTML, JavaScript code is inserted between <script> and </script> tags. A JavaScript function is a block of JavaScript code, that can be executed when "called" for. For example, a function can be called when an event occurs, like when the user clicks a button.


Practicals

First, we created new functions that enable us to open and close the side panel by clicking the bar symbol (upper left corner). Next, we learned to create another function that changes the text & color of the main box when we click it. Below are the codes:

        <script>

        //Changing Text & Color of The Main Box//

var counter = 0;
function changeBandName(){
if(counter == 0){
document.getElementById("BandName").innerHTML = "Green Day - Dookie";
document.getElementById("black").style.backgroundColor = "#124700";
counter++;
}
else if(counter == 1){
document.getElementById("BandName").innerHTML = "The Bluebirds";
document.getElementById("black").style.backgroundColor = "black";
counter--;
}
}

        //Side Panel Function//
function sidePanelOpen(){
document.getElementById("sidePanel").style.display = "block";
}
function sidePanelClose(){
document.getElementById("sidePanel").style.display = "none";
}

        </script>


Outcome (Week 4)

Fig 2.4: Added Javascript Function

WEEK 5:

GSAP

Link: https://greensock.com/gsap/
This website helps us to create animation in HTML elements. The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools used on over 11 million sites, including more than 50% of award‑winning ones! You can use GSAP to animate pretty much anything JavaScript can touch, in any framework. Whether you want to animate UI, SVG, Three.js or React components - GSAP has you covered.
Fig xx: Logo Screen Blocking animation

Fig xx: Open & Close panel animation

Outcome (Week 5)

First, I animated the logos in the sticky header. Next, I animate the open & close movement of the side panel. Also, I managed to add a logo screen at the start.

URL: https://week5exercise2.netlify.app/

Fig xx: Logo Screen & Panel Animation


WEEK 6:

Codes & Script

Fig xx: Week 6 Codes & Script

Outcome (Week 6)

Today, we managed to animate the profile button so it leads to the second page.


Fig xx: Second Page Animation

WEEK 7:

Outcome (Week 7)

Today, we made a footer that should appear in every page.

URL: https://week7exercise2.netlify.app/

Fig xx: Creating Footer with Icons



FEEDBACK

WEEK 1:
Specific Feedback
Sir told me to use z-index: -1000; to move the animated image to the back but it won't move. So I tried to apply it to the navigation bar and brought it to the front. I used z-index:1000;

WEEK 2:

Specific Feedback
(Exercise 2) The main text "The Bluebirds" is not similar enough. And you can see the text "Mangsa" color should be more grey.

REFLECTION

Experience
Learning JavaScript for the first time in Adobe Dreamweaver was both challenging and exciting. It was satisfying to see how a few lines of code could create such a dynamic user experience, W3Schools website really helps my learning process. As I progressed in my learning, I made an effort to try writing and debugging my JavaScript code manually at home, which ultimately gave me a deeper understanding of how it all worked together.


Observation
I discovered that using ChatGPT not only save me time, but it also made my job more effective. During the whole process I also observed that JavaScript language is versatile and powerful, but it requires a lot of practice and patience to become good at it.
  
Findings
I found that other than practicals with Mr. Razif, utilizing other resources such as online tutorials and forums can be helpful because it supplements learning and provides additional examples and explanations. Working on the exercises and experimenting with code is also an effective way to apply and reinforce concepts learned in JavaScript.



Comments

Post a Comment