INTERACTIVE DESIGN: EXERCISES
15.04.2020 - 03.06.2020 (Week 1 - Week 8)
Maisarah bt Muhd Zamri (0335576)
Interactive Design
Exercise
LECTURES
15.04.2020 (Week 1)
We were given exposure to what websites are, the purpose of websites, and the different types of websites.
Websites: Web document on the internet consisting of one or more page with intended purposes.
Purpose: Mainly to attract the attention of Internet audience.
Types of websites:
1. Informational website
2. Corporate website
3. Portfolio website
4. E-commerce website
5. Brochure website
6. Entertainment website
7. Educational website
8. Nonprofit website
9. Personal website
22.04.2020 (Week 2)
The Web
Every page of a website will have a headline, body, and if necessary, images.
Each elements are put in angled brackets (< >), and there's always an opening and closing elements.
<element>Information</element>
Closing tags have a forward slash (/) in between the left angled bracket and element. (</el>)
The attribute tag tells us more about the information we're putting in.
<p language="eng-us">Paragraph in English</p>
(What kind of extra attribute you're putting in)
(Setting for the attribute)
Here are some other tags for a basic html structure:
Title: <title>Title</title>
Head: <head>Head</head>
Body: <body>Body teaxts</body>
Headings: <h1>Heading 1</h1> - <h6>Heading 6</h6> (There's up to 6 headings)
Paragraph: <p>Paragraph</p>
Bold: <b>Bold</b>
Italics: <i>Italics</i>
Lists:
a. Ordered list with numbers: <ol>List title</ol>
b. Unordered list (bulleted): <ul>List title</ul>
c. Items in the list: <li>The actual item in the list</li>
(Item List <li> </li> must be put WITHIN <ol> </ol> or <ul> </ul>)
Links: <a href="https://www.thedamnlink.com">Text</a>
<a> </a> is the "link" tag
29.04.2020 (Week 3)
Adding Image on the Web
<img> is the tag used for images.
src (source) attribute is used to specify the location of the image.
<img src="img_fishcakes.jpeg">
Can also add more attricutes to the code to further describe the image.
<img src="img_fishcakes.jpeg" alt="Fishcakes for dinner lol">
The most common extra attributes to be added to an image code is the height and width of the image.
<img src="img_fishcakes.jpeg" alt="Fishcakes for dinner lol" width="500" height="500">
There's three formats for images for web:
1. JPEG (Joint Photographic Expert Group)
2. GIF (Graphics Interchange Format) "It's pronounced with a hard G, y'all," according to my lect.
3. PNG (Portable Network Graphics)
15.04.2020 (Week 1)
So our first exercise that's not really exercise is to find examples of the 9 types of websites.
22.04.2020 (Week 2)
Here's yet another exercise that's not really an exercise.
We were told to make a html structure about ourselves. This is just for us to practice and familiarize ourselves with the html format before we do the real thing.
I wrote something about me, but it's like, the thing I love, rather than me myself.
Fig 1.1 - 1.4 - "Kamen Rider is Great!!" (html coding)
Fig 1.5 - 1.7 - "Kamen Rider is Great!!" (on web)
29.04.2020 (Week 3)
Finally, the real Exercise 1.
We were given a content and some images. We had to use the content and images given and make a html thing using DreamWeaver. Since the content was already given, we practically only have to copy paste everything. But we have to put in the necessary tags ourselves.
We were given a content and some images. We had to use the content and images given and make a html thing using DreamWeaver. Since the content was already given, we practically only have to copy paste everything. But we have to put in the necessary tags ourselves.
Fig 2.1-2.3 - Triathlon History (html coding)
Fig 2.4 - 2.8 - Triathlon History (on web)
06.05.2020 (Week 4)
An extended practice of Exercise 1.
Basically we learnt how to add colour background and change typefaces and other.
Fig 3.1 - Nicer Triathlon History (html coding)
13.05.2020 (Week 5)
Exercise 2
This week we learned to use CSS. Hahahahhahhahhahahhahhhahahhah ahahha hahah ha.
Right, so at first they taught us how to do layouts and I did it, but I didn't screenshot so now it's gone :')
But we have here the product of the actual exercise. Images and contents were provided, but we had to design the layout ourselves.
03.06.2020 (Week 8)
I don't know what the fuck happened the last two weeks but we're here on Week 8.
But anyway.
We learnt about bootstrap, JavaScript, and one other thing which I don't remember and leT ME TELL YOU SUMN :)
I want to stab myself with a dull knife
One student: Wow, sir this is so much easier you should've taught us this sooner
Me: ex-fcking-cuse mE?! My head is cracked open and my brain just fcking left for vacation
Me: ex-fcking-cuse mE?! My head is cracked open and my brain just fcking left for vacation
anyway. As usual, Images and contents were given to us, we just had to design a layout and apply bootstrap so it can be viewed in different screen resolutions/sizes.
FEEDBACK
29.04.2020 (Week 3)
- All the contents should be within <body>
- All the contents should be within <body>
Exercise 2 feedback (Whenever it was. I don't remember)
- The layout is pretty safe.
>It was intentional, sirs. I wanted to play it safe because if I try to be creative, it's going to take 7 years to complete because I am incompetent.
04.06.2020 (Bootstrap exercise feedback)
- There's something wrong with my layout
- Apparently I didn't use rows??? (I did, though???)
- What the--
Comments
Post a Comment