INTERACTIVE DESIGN(2) EXERCISES

April 06, 2020

INTERACTIVE DESIGN(2) EXERCISES

06/01/2020(week 1-week 5)
Ating Melvin Otobong Abang(0333700)
Interactive Design
Exercises

INSTRUCTIONS

LECTURES
15|4|2020(Week 01)

Lecture01-Briefing
This week we had the Lecture briefing and we had a Website activity were we go through the different types of websites and extract their Target audience and it's intended Briefing purpose.

Here are the Slides for this week

and here are my slides on the Website activity

22|4|2020(Week 02)
Lecture 02- Web standards

For this lecture, we went through what web standards are
Web standards - Design websites using the same language(Html & css)If not complied with web standards most likely to unable to access for most people.

Here is the google slide

29|4|2020(Week 03)

Lecture 03-Adding Images to Html

This week we learned how to add images in Html using

The tag <img> is empty until an attribute is added. Like <img src=“url”> and alt=" Melvin" the Alt attribute is added to describe the image.

Here's the lecture slide

6|5|2020(Week 04)

Lecture 04-Intro to CSS

CSS allows you to create rules that specify how the content of an element should appear, and how CSS works by associating rules with HTML elements. A CSS rule contains two parts: a selector and a declaration.

Here are this week's slides

13|5|2020(Week 05)

Lecture 05-Layout

We learnt about the arrangement of layouts and how to make them in CSS and Html.

here is the slide

EXERCISES
Exercise01-
29|4|2020(Week 03)
we were tasked to recreate a small web page based on the information given to us on google classrooms.

here is my process on the exercise

Fig 1.1 Html Sorce code

Fig 1.2 Html Sorce code continuation

Browser preview

Activity-layout Activity
6|5|2020(Week 04)

This week we were taught how we can a site more dynamic and organized look by using CSS, we then followed a simple layout given by Mr. Samshul.

here is my Html and CSS code

Fig 2.1 Html layout code.

CSS code

Fig 2.2 Css Layout Code.

Fig 2.3 Css Layout Code Continued.

Browser preview

Fig 2.4 Layout on Google.

Exercise02- Photoshop Layout
13|5|2020(Week 05)

We were given a folder with images and document files to create a layout on our own through the rest of the week.

Fig 3.1 Files are given

Fig 3.2 Initial Layout

the initial layout wasn't well arranged, neither was the logo and pictures given, the feedback given was that this wasn't really a layout and that I should have a look at what others had done so and that is what I have done

In the first try, I didn't understand how divs worked but know I have a better understanding after watching the tutorial video by Mr. samshul.

here is the Html Source code