Interactive Design / Exercises

30.3.2022- 11.5.2022 (Week 1 - Week 7)
Cheryl Voo Yie Qi / 0349878
Interactive Design / Bachelor of Design in Creative Media
Exercises

---

Links to other projects:

• Project 1 / Landing Page Design
• Project 2 / Working Landing Page
• Final Project 

---

LECTURES

Week 1 - What is Website?

Week 2 - The Web 

Elements are usually made up of two tags:
Opening tag < _ >
Closing tag < / _ >

HTML has six levels of headings:

<h1> Main headings

<h2> Subheadings

Fig 1.1, Six levels of headings

To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag. 

Fig 1.2, Paragraph

BOLD 

By enclosing words in the tags <b> and </b> we can make characters appear bold.

Fig 1.3, Bold

ITALIC

By enclosing words in the tags <i> and </i> we can make characters appear italic.

Fig 1.4, Italic

Lists (2 types)

1. Ordered list <ol> </ol>
   - are lists where each item in the list is numbered. List is for set of steps for a recipe that must be performed in order
   
   
2. Unordered list <ul> </ul>
   - are list that begin with a bullet point

Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)

Fig 1.5, Ordered list

Fig 1.6, Unordered list

Nested list

You can put a second list inside an <li> element to create a sub-list or nested list.

In nested unordered lists, the browser will usually change the style of the bullet too.

Fig 1.7, Nested list

Links

Links are the defining features of the web because they allow you to move from one web page to another.

Links are created using the <a> element which has an attribute

called href.

User can click on anything between the opening <a> tag and the closing </a> tag.

Specify which page to link using the href attribute.

Browsers show links in blue with an underline by default.

Fig 1.8, Link

Add target="_blank" behind the website link to open it in another tab when it is not our own website.

Week 3 - Extra Markup

Week 4 - Introduction to CSS 

UI vs UX

Week 5 - CSS

---

INSTRUCTIONS

Week 1 
We learned some basic HTML codes and did an exercise in class together :

Fig 2.1, Class exercise 

Week 2 

We are required to create a web document based on the content given. We are going to follow exactly the format as in the document. And name the file as index.html and save the file in a folder name Exercise One.

Fig 2.2, Exercise 1 (Triathlon History)

Fig 2.3, Exercise 1 uploaded to Netlify, https://exercise1-cherylvooyieqi.netlify.app/

Week 3 
We are required to create a single HTML page that contains the content given. And also include images for required sections (use all the images provided). In each main section, we need to include an id attribute that will be later used as an anchor link from the navigation (in the first part of the content).

After completing the task, upload it to Netlify and submit the link in Google Classroom. 

Fig 2.4, Exercise 2 (Vision for the Unequal World)

Fig 2.5, Exercise 2 uploaded to netlify, https://exercise2-cherylvooyieqi.netlify.app/

Week 4
We have to design a User Interface for Taylor's University Interactive Information Kiosk in groups. 
Target audience: Parents, visitors.
The goal of the Interactive Information Kiosk is to inform the user on how to access Taylor's University.

Fig 2.6, Group 2

Week 5 
This week we used the exercise from week 3 (single HTML page) to learn to add backgrounds, border-box, and change the fonts.

Fig 2.7, Added background, border-box and changed the fonts

Week 7
This week we had a layout tutorial in class about how to link our HTML to style.css, adding .navi & .container and others in Adobe Dreamweaver.

After that, we need to complete a layout exercise with a given example, texts and images, upload it to Netlify and submit the link to google classroom. 

Fig 2.8, Layout tutorial

Fig 2.9, Layout tutorial (the menu on top will change colour after clicked/visited)

Fig 2.10, Given images, examples, and texts (Layout exercise)

Fig 2.11, Layout exercise uploaded to Netlify, https://layoutexercise-cherylvooyieqi.netlify.app/

---

REFLECTION

It was fun learning coding! Seeing codes becoming websites I saw every day is quite satisfying and happy. But for now, we are still following Mr Shamsul's guide in class to create web pages, not sure if I can do it on my own after doing these exercises.