Interactive Design / Exercises & Lectures

29.08.22 - (Week 1-

Janaan Ahmed (0353333)

Interactive Design / BDCM

Exercises & Lectures

Lectures

WEEK 1 (29.08.22)

Introduction

Mr. Shamsul briefed us about the module expectations and also advised us about the importance of staying resilient throughout one's design journey. We were also required to create a Netlify account, which is the chosen server to upload our work into.

WEEK 2 (06.09.22)

Basic Site Evaluation

This week we were divided into groups to discuss and present what we perceive to be good and bad qualities in websites.

Fig 1.1: Screenshot of activity from weekly notes (06.09.22)

The selections had to be from https://www.mwa.my/2021/ and https://www.awwwards.com/.

Fig: 1.2: Our group evaluation

WEEK 7 (11.10.22)

Introduction to CSS (Cascading Style Sheet)

CSS works by associating rules with HTML elements. These rules govern how the content of an element should appear.

A CSS rule contains a:

selector
declaration (has a property and a value)

Fig: Screencaps from lecture slide

IN-CLASS TUTORIAL (SUMMARISED)

The difference between writing HTML & CSS:

HTML:

CSS declaration:

element {property(:)value}

In CSS, each property is separated by a semicolon (;).

File naming conventions:

-image files

>images

img-about-header.jpeg

img-gal-01.jpeg

Font size: em is relative to screen resolution
Body-text width: set to % (adjusts according to screen size i.e. more responsive) px is fixed size.
Using text-shadow:

text-shadow: v(vertical) h(horizontal) r(radius) color;

text-shadow: 1px 1px 2px color;

make sure no commas, use space instead.

Font links from google fonts have to be copy-pasted between the <head> tag.

Fig: adding fonts from google fonts

Adding class attributes and ids:

In HTML,

<h1 id="name">I am title</h1>

In CSS,

.(period) is used for class names.

# is used for id.

e.g: .first-para {

}

#name {

}

Class attributes and ID's can be named anything, but has to be in lowercase. Can't use numbers or space. Can use _ and -

ID names are unique i.e. 1 id name per element.
Class attributes however can have more than one value BUT need to be separated by space.

e.g: <p class="first-para upper">

WEEK 12 (15.11.22)

Learning to utilise Bootstrap:

tba

Outcome:

1. Link to Netlify: https://bootstrap-exercise-janaanahmed.netlify.app/

2. HTML script:

Fig: HTML script for Week 12 Bootstrap exercise

3. CSS script:

Fig: CSS script for Week 12 Bootstrap exercise

Exercises

EXERCISE 1 - BASIC HTML SCRIPTING

Instructions

We are required to upload our completed web document into Netlify.

Fig: Instructions

Fig: Content to use in our web document

In my initial submission, I missed the part where it said that we had to add an image into our document (oops). The file attached below is the updated version of my html document.

Final Outcome:

Link to website: https://exercise1-janaanahmed.netlify.app/

Fig: Exercise 1 Final HTML Script [PDF] - (07.10.22)

EXERCISE 2 - USING CSS

Instructions:

Fig: Screencap of instructions

Fig: Written Content to utilise in exercise 2

PROCESS:

1. Creating the HTML

Fig: Final HTML code made on TextEdit [PDF] - (16.10.22)

2. Creating the CSS

I first changed the background colour, set the margin, and adjusted the body-text width. I then changed the font (Open Sans, Inter Tight), font size, color, alignment, etc.

Fig: styling the body and text - (16.10.22)

I then added ID's to the headings, and linked them to the contents section of the page.

Fig: code of heading id's and their corresponding links - (16.10.22)

Next I added a button at the bottom of the page that leads back to the top of the page. I linked the button to the logo image.

Fig: codes for the creation of the 'back to top' - (16.10.22)

I then styled the content links and the 'back-to-top'. When hovered, the content links change in size AND colour, however the 'back-to-top' only changes in size.

Fig: code for styling links - (16.10.22)

Sizing the pictures were the biggest hurdle. I wasn't sure whether to manually do it, or code it. I wanted the pictures of the speakers to have the same dimensions, however they were all varied.

From the resources below, I learned how to utilise the css property object-fit:

To summarise, the process involved adding a <div> element between the images, and giving it a class attribute. The class attribute was then styled using the object-fit property. The value most appropriate for what I needed was 'cover'.

Fig: using <div> and object-fit to adjust image size - (16.10.22)

I copy-pasted the <div> tag for the other two portraits as well:

Fig: adjusting image size cont. - (16.10.22)

I also had a problem with the header image, as it was way too wide for the page. After some reading, I learned that we could style the image to be responsive as well. I did not repeat the process for the logo though.