Labels

Interactive Design - Exercises


14/4/2020 - 13/05/2020 (Week 1 - Week 5)
Yeo Hui Qi (0334134)
Interactive Design
Exercises

LECTURES

 Week 1 - Introduction (15/4/20)

 We started off with introductions from the lecturer, Mr. Shamsul. Then, we immediately dived into the topic of the week; "What is a website?". A website is a web document on the internet which has one or more pages and a clear intended purpose. The purpose for creating a website is to attract attention of the 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. Non-profit website
  9. Personal website
We carried out an activity for the tutorial portion of the class. We were instructed to find examples of the different types of websites as shown in the list above. For each type of website, we had to state the purpose of the website as well as its target audience. Everything was compiled into a Google Slides and submitted to Mr. Shamsul.



Week 2 - Web Standards & HTML (22/4/2020)

 Today we learnt about web standards set by the World Wide Web Consortium (W3C). They are responsible for creating and maintaining web standards, including the standard markup languages that we use to build websites which are HTML and CSS. Web standards are put in place so that web developers can understand each other's work or code, making the development process more simplified.

We also learnt how to code in Hyper Text Markup Language (HTML). HTML elements are made up of opening and closing tags. There are self-closing tags as well.

HTML tags we learnt how to use:
  1. <p>  Paragraph tag  </p>
  2. <head>  Head tag  </p>
  3. <body>  Body tag  </body>
  4. <title>  Title that appears in the tab bar  </title>
  5. <br />  Line break self-closing tag
  6. <h1> </h1>  until  <h6></h6>  Headings of different sizes
  7. <b>  Bold  </b>  and  <i>  Italic  </i>
  8. <ol>  Ordered list  </ol>
  9. <ul>  Unordered list  </ul>
  10. <li>  List item  </li>
  11. <a href = " url ">  Links  </a>

Week 3
We learned HTML images, ID & class Attributes and block and inline elements. 

Images are embedded using the <img> tag and it should include "src" source attribute and "alt" attribute. It is a self-closing element and the source attribute should contain the path to the image, preferably in the separate folder at the same location as the HTML file. There are several image formats for web; Joint Photographic Expert Group (JPEG), Graphics Interchange Format (GIF), and Portable Network Graphics (PNG).

ID and Class attributes are used to uniquely identify the element from other elements on the page. No two elements should have the same ID attribute, but Class attribute can be used to identify several elements so that they may share the same name of class. ID and Class attribute does not affect the presentation but they are usually used to identify elements so that we may apply CSS styling to them.

Block elements are elements that will always appear to start on a new line in the browser window. Inline elements are elements that will always appear to continue on the same line as their neighbouring elements. 


Week 4 - Cascading Style Sheet (CSS)
CSS allows you to create rules that specify how the content of an element should appear. A CSS rule contains 2 parts which is a selector and a declaration. The selector indicates which element the rule applies to. The same rule can apply to more than one element if you separate the element names with comas. The declaration indicates how the elements referred to in the selector should be styled. Declaration is separated into 2 parts, the property and the value and they sit inside curly brackets. We can specify several properties in one declaration, each separated by a semi-colon. The property indicates the aspects of the element you want to change while the value specifies the settings for chosen properties.

There are 3 methods to implement CSS:
  1. External CSS
    • Separate file from the HTML document.
    • Using <link> in the head of the HTML document containing 3 attributes, 
    • "href" to specify the path to the file
    • "type" to specify the type of document and in this case the value should be "text / css"
    • "rel" to specify the relationship between the HTML page and the file linked which in this case the value should be "stylesheet"
  2. Internal CSS
    • Inserted in the head of the HTML document using <style> with the "type" attribute value should be "text / css"
  3. Inline CSS
    • Inserted as attributes in HTML tags.
Why we use External CSS?
  • allow all pages to have the same style
  • keeps content separate from how it looks
  • this means you can change the styles across all pages by altering just one file.
Week 5
We were taught different CSS styles / properties:
  1. font-weight
  2. font-style
  3. text-transform
  4. text-decoration
  5. text-indent
  6. text-shadow
  7. CSS Box Modules to change the width and height
  8. overflow with hidden and scroll values
  9. border, margin and padding
INSTRUCTIONS

Exercise 1: Week 2
For the Exercise 1, we used the HTML tags we learnt to make a website about ourselves and how we spent the COVID-19 MCO.

Instruction (as written by Mr Shamsul):
In the document, you need to break it into 3 to 4 sections. Each section needs to be separated with a heading.Under each heading, you need to have at least 2 paragraphs that include about 20 to 30 words.
In one of the paragraph add a list. Give it a name for the list that you want to describe as shown in my example. You need to make sure that the document that you created has a meaningful and exciting content for Mr. Lun and me to read.

HTML file:

My Final Product:


Exercise 2: Week 3
For this exercise, the lecturer supplied us with resources such as images and word document containing the content of our website and its format. We just had to take these and turn it into a working HTML file including inserting text, images and links, using the things we have learnt in lectures.

Content file given:

HTML File:


My Final Product:


Exercise 3: Week 4
We were instructed to apply the CSS rules introduced to us in the lecture into the previous exercise with the triathlon article. We are to use Internal CSS format.

HTML file with Internal CSS:

My Final Product:
I couldn't fit all into one picture so this is just parts of it.
I changed the font, font colour, background colour, and highlighted the headings .

This picture shows that I changed the color for links and when it has been visited it will change colours.


Exercise 4: Week 5
Instructions:
  1. Format text and links according to word document provided.
  2. Implement CSS according to your own style making sure that everything looks cohesive.
  3. Must use all the images provided but can add your own if you want.
Content file given:

My Final Product:


After feedback:
For the final product, I did minor changes such as changing the footer to a horizontal 1 line instead of the unordered list. I also made the drop shadow less obvious, made the margins on both sides of the container wider so that there is more white space in my website and the navigation bar slightly slimmer.

FEEDBACK

Week 1
Feedback on tutorial:
    - Be more specific about the target audience by specifying their age or work when relevent.

Week 2
Feedback on Exercise 1:
    - There were no problems with my code since I had correct path for my images, and my link open in new tab, and my code was organized neatly.

Week 3
Feedback on Exercise 2:
    - Good, followed instructions and neat coding by using comments.

Week 4
Feedback on Exercise 3:
    - Good, but not advisable to change the link colours because Mr. Shamsul hasn't taught that yet.

Week 5
Feedback on Exercise 4:
    - Overall, a bit too boxy
    - The contrast of the words is good considering I used the images as background for all the sections.

REFLECTIONS

Week 1
  • Experience
    • Week 1 was very stressful for me because I felt that the lecturer expected a lot from me even though this was my first time attending class for a design module. I felt lost because I had no idea what I had to do to prepare for the class.
  • Observations
    • The students in the class are very friendly and willing to help.
  • Findings
    • I learnt the different types of websites.
Week 2
  • Experience
    • I was still stressed about this class but not as much once I learnt that we will be taught about HTML, since it is something that I have come to be familiar with. 
    • Even though I've done my Web Programming module, it was fun to revisit HTML and jog my memory on all the different HTML tags.
  • Observations
    • The lecturer was more motivating this week and when we, as student makes mistakes it's okay.
  • Findings
    • I found that the class was helpful at jogging my memory on HTML.
    • Although, the lecturer didn't put much importance of indentation because I find that indenting my code helps with readability and overall neatness.
Week 3
  • Experience
    • The lecture went by quickly and we started exercise 1.
  • Observations
    • Exercise 1 was very simple because we only had to implement HTML and follow the formatting that was provided in the Word document.
  • Findings
    • I should pay more attention when looking at formatting because I missed out the bold and italic words but later realized when I double checked my work.
Week 4
  • Experience
    • It was chill because we only learned some simple CSS and was given time to experiment with what we learned.
  • Observations
    • The first week was so stressful and fast paced and as time goes on the class slowed down so much because I feel like we could've done more in each week. Maybe it's like this because the demonstrations take a long time.
  • Findings
    • I realized that the lecturers really just want us to follow whatever they've taught rather than experimenting too much on our own maybe because some of these things may be new to others.
Week 5
  • Experience
    • It was a more hectic week as we got Exercise 2 and Project 1 thrown at us at the same time.
  • Observations
    • Exercise 2 required me to explore a lot on my own about CSS commands. 
    • For Project 1, I didn't have much inspiration but I realized from my sketches that we shouldn't fill up the whole width of the website with sections, better to leave some space on both sides.
  • Findings
    • It actually took me 3 days to format my website properly and a lot of exploring into how to use CSS to make things look the way that I wanted it to.
Labels:

Comments

Post a Comment

Popular Posts