Interactive Design / Exercises
30/03/2022 - 18/05/2022 (Week 1 - Week 8)
Reagan Val Adelbert Mahadi /
0349177
Interactive Design / Bachelor of Design in Creative Media
Exercises
LECTURES
Week 1
On our first week in this
module, Mr. Shamsul started the class by explaining the MIB. He then proceeds
to explain the fundamentals of webs.
A website is a web
document on the internet that contains one page or more with the intended
purpose. There are many different types of websites on the internet, they
are:
- Informational website
- Corporate website
- Portfolio website
- Brochure website
- Entertainment website
- Personal website
- Educational website
- E-commerce website
- Nonprofit website
He then explained about us needing to evaluate websites if they are good or
not so good. We were then given an exercise to evaluate the good and bad
websites.
Week 2
For the second week of this module, Mr. Shamsul presented to us about web design and new media.
HTML Describes The Structure of Pages
Fig. 1.2 Closing tag
Attributes Tell Us More About The Elements
Headings
HTML has six levels of headings. <h1> being the main heading and <h2> being the subheading. If there are further sections under the subheadings then the <h3> element is used and so on..
Fig. 1.4 Headings
Paragraph
To create a paragraph surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.
Fig. 1.5 Paragraph
Bold and Italic
By enclosing words with the tags <b> and </b>, we can make the characters appear bold.
Fig. 1.6 Bold
By enclosing words in the tags <i> and </i>, we can make characteristics appear italic.
Fig. 1.7 Italic
List
There are lots of occasions when we need to use lists. HTML provides two different types. Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list items).
Ordered List
Ordered lists are lists where each item in the list is numbered. A list is a set of steps for a recipe that must be performed in order. The ordered list is created with the <ol> element.
Fig. 1.8 Ordered list
Unordered List
Unordered lists are lists that begin with a bullet point. The unordered list is created with the <ul> element.
Fig. 1.9 Unordered list
Nested List
We can put a second list inside an <li> element to create a sub-list or nested list. Browsers display indented further that the parent list. In nested unordered lists, the browser will usually change the style of the bullet too.
Fig. 1.10 Nested list
Links
Links are the defining features of the web because they allow you to move from one web page to another.
Commonly type of links:
Links are created using the <a> element. User can click on anything between the opening <a> tag and the closing </a> tag. Specify which page to link to using the href attribute.
Fig. 1.11Writing links
Link To Other Sites
Links are created using the <a> element which has an attribute called href. The value of the href attributes is the page that we want users to go to when they click on the link. When we link to a different website, the value of the href attribute will be the full web address for the site, also known as an absolute URL.
Week 3
In week 3, Mr. Shamsul presented to us about adding images in HTML.
Adding Image in HTML
The tag <img> is used to add an image in HTML. Img tag is a single-sided element that does not have a closing tag like other HTML elements. The tag is considered empty until you add an attribute.
For the fourth week in this module, Mr. Shamsul prepared lectures about UI vs UX and introduction to CSS.
UX
UX would say that button should physically press down when you click it.
UX designers focus on the structure and layout of content, navigation, and how users interact with them. The types of deliverables they produce include site maps, user flows, prototypes, and wireframes, which are more focused on the underlying structure and purpose of the software. The visual appearance does impact ton these, but can be created as a separate layer that is applied over the top.
UI
The UI would be a series of buttons and how they look.
UI design focuses on anticipating what the users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture (IA).
Users have become familiar with interface elements acting in a certain way, be consistent and predictable in the choices and the layout design. Doing so will help with task completion, efficiency, and satisfaction.
Interface elements include but are not limited to:
In week 5, Mr. Shamsul provided us a lecture about CSS.
Bold [Font-Weight]
The font-weight allows us to create bold text. There are two values that this property commonly takes:
The sixth week is a holiday so there was no class.
Week 7
Tutorial
Week 8
Tutorial
Week 2
For the second week of this module, Mr. Shamsul presented to us about web design and new media.
HTML Describes The Structure of Pages
The HTML code is made up of characters that live inside angled brackets <>. These are called HTML elements. The HTML code is made up of characters that live inside angled brackets <>.
<element>Information</element>
<element>Information</element>
Each element tells the browser something about the information that sits between its opening and closing tags.
Fig. 1.1 Opening tag
Fig. 1.1 Opening tag
Fig. 1.2 Closing tag
Attributes Tell Us More About The Elements
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equal sign.
Fig. 1.3 Attributes
Body, Head, and Title
<body> : Everything inside this element is shown inside the main browser window.
<head> : This contain information about the page. Usually can find <title> element inside
<title> : The contents of the <title> element are either shown in the top of the browser (tab bar)
Fig. 1.3 Attributes
Body, Head, and Title
<body> : Everything inside this element is shown inside the main browser window.
<head> : This contain information about the page. Usually can find <title> element inside
<title> : The contents of the <title> element are either shown in the top of the browser (tab bar)
Headings
HTML has six levels of headings. <h1> being the main heading and <h2> being the subheading. If there are further sections under the subheadings then the <h3> element is used and so on..
Fig. 1.4 Headings
Paragraph
To create a paragraph surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.
Fig. 1.5 Paragraph
Bold and Italic
By enclosing words with the tags <b> and </b>, we can make the characters appear bold.
Fig. 1.6 Bold
By enclosing words in the tags <i> and </i>, we can make characteristics appear italic.
Fig. 1.7 Italic
List
There are lots of occasions when we need to use lists. HTML provides two different types. Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list items).
Ordered List
Ordered lists are lists where each item in the list is numbered. A list is a set of steps for a recipe that must be performed in order. The ordered list is created with the <ol> element.
Fig. 1.8 Ordered list
Unordered List
Fig. 1.9 Unordered list
Nested List
We can put a second list inside an <li> element to create a sub-list or nested list. Browsers display indented further that the parent list. In nested unordered lists, the browser will usually change the style of the bullet too.
Fig. 1.10 Nested list
Links
Links are the defining features of the web because they allow you to move from one web page to another.
Commonly type of links:
- Links from one website to another
- Links to one page on the same website
- Links from part of a web page to another part of the same page
- Links that open in a new browser window (tab)
Links are created using the <a> element. User can click on anything between the opening <a> tag and the closing </a> tag. Specify which page to link to using the href attribute.
Fig. 1.11Writing links
Link To Other Sites
Links are created using the <a> element which has an attribute called href. The value of the href attributes is the page that we want users to go to when they click on the link. When we link to a different website, the value of the href attribute will be the full web address for the site, also known as an absolute URL.
Week 3
In week 3, Mr. Shamsul presented to us about adding images in HTML.
Adding Image in HTML
The tag <img> is used to add an image in HTML. Img tag is a single-sided element that does not have a closing tag like other HTML elements. The tag is considered empty until you add an attribute.
- <img src="url'>
- src attributes specify the location of the image
- <img src="img_flower.jpeg">
- <img src-"http://stockimages.anylink.com">
Alt attribute is added to described the image (img src="img_flower.jpeg" alt="Flowers in Denmark">
Alternatively, we can also specify the width and height by adding those attributes. (<img src="img_flower.jpeg" alt="Flowers in Denmark" width="500" height="350">)
Image Format for Web
Three common image formats for the web:
Alternatively, we can also specify the width and height by adding those attributes. (<img src="img_flower.jpeg" alt="Flowers in Denmark" width="500" height="350">)
Image Format for Web
Three common image formats for the web:
- JPEG (Joint Photographic Expert Group)
- GIF (Graphics Interchange Format)
- PNG (Portable Network Graphics)
JPEG
JPEG is the most common image format used on the web. It is highly compatible and small in size and has very little loss of quality. It is saved using lossy compression. JPEG format is usually used for photos on the web.
GIF
GIF uses lossless compression. We can save the image over and over again without losing any data. It uses an 8-bit lossless format which supports a maximum of 265 colors. A unique feature of this format is its ability to be animated. This format is excellent for logos and limited color images that need to be in small sizes. It is small in size but not suitable for photos.
PNG
It contained a bitmap of indexed colors and uses lossless compression. It also allows a full range of colors and better compression. It is the most used format on the web, and it supports images with transparency.
ID Attribute
Every HTML element can carry the ID attribute. It is used to uniquely identify the element from other elements on the page. It is important that no two elements have the same value for their ID attributes. Giving an element a unique identity allows us to style it differently from any other instance of the same element on the page.
Class Attribute
Every HTML element can also carry a class attribute. Sometimes we will want a way to identify several elements as being different from the other elements on the page. The class attribute of any element can share the same value or name.
ID and Class Attribute
By default, using these attributes does not affect the presentation of an element. It will only change its appearance if there is a CSS rule that indicates it should be displayed differently.
Block Elements
Some elements will always appear to start on a new line in the browser window. It is known as block level elements. Examples: <h1>, <p>, <ul> and <li>.
Inline Elements
Some elements will always appear to continue on the same line as their neighbouring elements. It is known as inline elements. Examples: <b>, <i>, <em>, <a> and <img>.
Week 4JPEG is the most common image format used on the web. It is highly compatible and small in size and has very little loss of quality. It is saved using lossy compression. JPEG format is usually used for photos on the web.
GIF
GIF uses lossless compression. We can save the image over and over again without losing any data. It uses an 8-bit lossless format which supports a maximum of 265 colors. A unique feature of this format is its ability to be animated. This format is excellent for logos and limited color images that need to be in small sizes. It is small in size but not suitable for photos.
PNG
It contained a bitmap of indexed colors and uses lossless compression. It also allows a full range of colors and better compression. It is the most used format on the web, and it supports images with transparency.
ID Attribute
Every HTML element can carry the ID attribute. It is used to uniquely identify the element from other elements on the page. It is important that no two elements have the same value for their ID attributes. Giving an element a unique identity allows us to style it differently from any other instance of the same element on the page.
Class Attribute
Every HTML element can also carry a class attribute. Sometimes we will want a way to identify several elements as being different from the other elements on the page. The class attribute of any element can share the same value or name.
ID and Class Attribute
By default, using these attributes does not affect the presentation of an element. It will only change its appearance if there is a CSS rule that indicates it should be displayed differently.
Block Elements
Some elements will always appear to start on a new line in the browser window. It is known as block level elements. Examples: <h1>, <p>, <ul> and <li>.
Inline Elements
Some elements will always appear to continue on the same line as their neighbouring elements. It is known as inline elements. Examples: <b>, <i>, <em>, <a> and <img>.
For the fourth week in this module, Mr. Shamsul prepared lectures about UI vs UX and introduction to CSS.
UX
UX would say that button should physically press down when you click it.
UX designers focus on the structure and layout of content, navigation, and how users interact with them. The types of deliverables they produce include site maps, user flows, prototypes, and wireframes, which are more focused on the underlying structure and purpose of the software. The visual appearance does impact ton these, but can be created as a separate layer that is applied over the top.
UI
The UI would be a series of buttons and how they look.
UI design focuses on anticipating what the users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture (IA).
Users have become familiar with interface elements acting in a certain way, be consistent and predictable in the choices and the layout design. Doing so will help with task completion, efficiency, and satisfaction.
Interface elements include but are not limited to:
- Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
- Navigational Components: breadcrumbs, slider, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bars, notifications, message boxes, modal windows
- Containers: accordion
UI designers focus on the way the functionality is displayed and the fine detail of how users interact with the interface. They produce the visual comps and functioning front-end code. This is very much about published final production quality outputs.
Golden Rules of Interface Design
Interface expert Nielsen identifies five usability attributes designers should put more attention to when creating a design interface, no matter what their medium:
Week 5Golden Rules of Interface Design
Interface expert Nielsen identifies five usability attributes designers should put more attention to when creating a design interface, no matter what their medium:
- Ease of learning
- Efficiency of use
- Memorability
- Minimize errors
- Satisfy the users
Introduction to CSS
CSS allows us to create rules that specify how the content of an element should appear. CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.
A CSS rule contains two parts: a selector and a declaration.
Fig. 2.1 CSS Style Rules with HTML Elements
This rule indicates that all <p> elements should be shown in the Arial typeface. Selectors indicate which element the rule applies to. The same rule can apply to more than one element if we separate the element names with commas.
Declarations indicate how the elements referred to in the selected should be styled. Declarations are split into two parts (a properly and a value) and are separated by a colon.
CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon. We can specify several properties in one declarations each separated by a semi-colon. We can specify several properties in one declarations each separated by a semi-colon.
Fig. 2.2 CSS Properties Affect how Elements are Displayed
This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color. Property indicate the aspects of the element we want to change. For example, color, font, width, height and border.
Values specify the settings we want to use for the chosen properties. For example, if we want to specify a color of property then the value is the color that we want it to be for the elements.
Employ CSS Using External CSS
The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page. It is an empty element and it lives inside the <head> element. It should use three attributes:
CSS allows us to create rules that specify how the content of an element should appear. CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.
A CSS rule contains two parts: a selector and a declaration.
Fig. 2.1 CSS Style Rules with HTML Elements
This rule indicates that all <p> elements should be shown in the Arial typeface. Selectors indicate which element the rule applies to. The same rule can apply to more than one element if we separate the element names with commas.
Declarations indicate how the elements referred to in the selected should be styled. Declarations are split into two parts (a properly and a value) and are separated by a colon.
CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon. We can specify several properties in one declarations each separated by a semi-colon. We can specify several properties in one declarations each separated by a semi-colon.
Fig. 2.2 CSS Properties Affect how Elements are Displayed
This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color. Property indicate the aspects of the element we want to change. For example, color, font, width, height and border.
Values specify the settings we want to use for the chosen properties. For example, if we want to specify a color of property then the value is the color that we want it to be for the elements.
Employ CSS Using External CSS
The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page. It is an empty element and it lives inside the <head> element. It should use three attributes:
- href: To specify the path to the CSS file
- type: This attribute specifies the type of document being linked to. The value should be text/css
- rel: Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file
An HTML page can be used more than one CSS style sheet. To do this it could have a <link> element for every CSS file it uses. For example, one authors use one CSS to control the presentation (fonts and color) and a second to control the layout.
Employ CSS Using Internal CSS
We can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page. The <style> element should use the type attribute to indicate that the styles are specified in CSS. The value should be text/css. When building a site with more than one page, you should use an external CSS style sheet. This:
Employ CSS Using Internal CSS
We can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page. The <style> element should use the type attribute to indicate that the styles are specified in CSS. The value should be text/css. When building a site with more than one page, you should use an external CSS style sheet. This:
- Allow all pages to use the same style rules (rather than repeating them in each page)
- Keeps the content separate from how the page looks
In week 5, Mr. Shamsul provided us a lecture about CSS.
Bold [Font-Weight]
The font-weight allows us to create bold text. There are two values that this property commonly takes:
- Normal-text appears at a normal weight
- Bold-text to appear bold
Italic {Font-Weight]
To create italic text, we can use the font-style property. There are three values this property can take:
Week 6To create italic text, we can use the font-style property. There are three values this property can take:
- Normal-text to appear in a normal style
- Italic-text appear italic
- Oblique-text appear oblique
Uppercase & Lowercase [Text-Transform]
The text-transform property is used to change the case of text giving it one of the following values:
The text-transform property is used to change the case of text giving it one of the following values:
- Uppercase-text appear to uppercase
- Lowercase-text appears to lowercase
- Capitalize-first letter of each word to appear capitalized
Underline & Strike [Text-Decoration]
The text-decoration property allows us to specify the following values:
Border
The text-decoration property allows us to specify the following values:
- None-removes any decoration already applied to the text
- Underline-adds a line underneath the text
- Overline-adds line over the top of the text
- Line-through-adds a line through words
Indenting Text [Text-Indent]
The text0indent property allows us to indent the first line of text within an element. The amount we want the line indented by can be specified in a number of ways but it is usually given in pixels or em. It can take negative value (eg:-10px)
Drop-Shadow [Text-Shadow]
The text-shadow property has become commonly used despite lacking support in all browsers. It is used to create a drow shadow, which is a dark version of the world just behind it and slightly offset. It can also be used to create an embossed effect by adding a shadow that is slightly lighter than the text.
The value of this property is quite complicated because it can take three lengths and a color for the drop shadow. The first length indicates how far to the left or right the shadow falls. The second value indicates the distance to the top or bottom of the shadow fall. The third value is optional and specifies the amount of blur that should be applied to the drop shadow. The fourth value is the color of the drop shadow.
CSS Boxes Model
CSS treats each HTML element as if it lives in its own box. We can set several properties that affect the appearance of the boxes. We can control the dimensions of the boxes, create borders around the boxes and show ad hide boxes.
Box Dimensions-Width, Height
By default, a box is sized just big enough to hold its contents. To set our own dimensions for a box, we can use the height and width properties. The most popular ways to specify the size of a box are to use pixels or percentage. Traditionally, pixels have been the most popular method because they allow designers to accurately control their size. When we use percentages, the size of the box is relative to the size of the browser window or, if the box is escaped within another box, it is the percentage of the size of the containing box.
Limiting Width [Min-Width, Max-Width]
Some page designs expand and shrink to fit the size of the user's screen. In such designs, the min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide. These are very helpful properties to ensure that the contents of pages are legible.
Limiting Height [Min-Height, Max-Width]
In the same way that we might want to limit the width of a box on a page, we may also want to limit its height of it. This is achieved using the min-height and max-height properties. If the box is not big enough to hold the content, and the content expands outside the box it can look very messy. To control what happens when there is not enough space for the content of the box, we can use the overflow property.
Overflow Content [Overflow]
The overflow property tells the browser what to do if the content contained within a box is larger than the box itself. It can have one of the two values:
The text0indent property allows us to indent the first line of text within an element. The amount we want the line indented by can be specified in a number of ways but it is usually given in pixels or em. It can take negative value (eg:-10px)
Drop-Shadow [Text-Shadow]
The text-shadow property has become commonly used despite lacking support in all browsers. It is used to create a drow shadow, which is a dark version of the world just behind it and slightly offset. It can also be used to create an embossed effect by adding a shadow that is slightly lighter than the text.
The value of this property is quite complicated because it can take three lengths and a color for the drop shadow. The first length indicates how far to the left or right the shadow falls. The second value indicates the distance to the top or bottom of the shadow fall. The third value is optional and specifies the amount of blur that should be applied to the drop shadow. The fourth value is the color of the drop shadow.
CSS Boxes Model
CSS treats each HTML element as if it lives in its own box. We can set several properties that affect the appearance of the boxes. We can control the dimensions of the boxes, create borders around the boxes and show ad hide boxes.
Box Dimensions-Width, Height
By default, a box is sized just big enough to hold its contents. To set our own dimensions for a box, we can use the height and width properties. The most popular ways to specify the size of a box are to use pixels or percentage. Traditionally, pixels have been the most popular method because they allow designers to accurately control their size. When we use percentages, the size of the box is relative to the size of the browser window or, if the box is escaped within another box, it is the percentage of the size of the containing box.
Limiting Width [Min-Width, Max-Width]
Some page designs expand and shrink to fit the size of the user's screen. In such designs, the min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide. These are very helpful properties to ensure that the contents of pages are legible.
Limiting Height [Min-Height, Max-Width]
In the same way that we might want to limit the width of a box on a page, we may also want to limit its height of it. This is achieved using the min-height and max-height properties. If the box is not big enough to hold the content, and the content expands outside the box it can look very messy. To control what happens when there is not enough space for the content of the box, we can use the overflow property.
Overflow Content [Overflow]
The overflow property tells the browser what to do if the content contained within a box is larger than the box itself. It can have one of the two values:
- Hidden-hides any extra content that does not fit in the box
- Scroll-adds a scrollbar to the box so that the users can scroll to see the missing content
The overflow property is particularly handy because some browsers allow users to adjust the size of the text to appear as large or small as they want. If the text is set too large then the page can become an unreadable mess. Hiding the overflow on such boxes helps prevent items from overlapping on the page.
Border
Every box has a border, the border separates the edge of one box from another.
Margin
Margin sits outside the edge of the border. We can set the width of a margin to create a gap between the borders of two adjacent boxes.
Padding
Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.
Fig. 2.3 Border (blue), Margin (green) & Padding (purple)
The Display Property
The display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually blocked or inline.
A block element is often called a block-level element. An inline element is always just called an inline element.
Block-level Element
<div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form and new in HTML5 are header, footer, section, and more.
Inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph. The a element is the most common inline element since we use them for links.
Every element has a default display type. We can always override this. It wouldn't make sense to make an inline div, we can use this to customize the display of elements that have particular semantics.
A common example is making inline li elements for horizontal menus.
Margin
Margin sits outside the edge of the border. We can set the width of a margin to create a gap between the borders of two adjacent boxes.
Padding
Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.
Fig. 2.3 Border (blue), Margin (green) & Padding (purple)
The Display Property
The display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually blocked or inline.
A block element is often called a block-level element. An inline element is always just called an inline element.
Block-level Element
<div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form and new in HTML5 are header, footer, section, and more.
Inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph. The a element is the most common inline element since we use them for links.
Every element has a default display type. We can always override this. It wouldn't make sense to make an inline div, we can use this to customize the display of elements that have particular semantics.
A common example is making inline li elements for horizontal menus.
The sixth week is a holiday so there was no class.
Week 7
Tutorial
Week 8
Tutorial
INSTRUCTIONS
Surveying the Possibilities
In this exercise,
we are required to provide 3 good websites and 3 bad websites. We are also
required to explain the pros/cons, the target audience, the goal of the
website, and the purpose of the website.
Spreadsheet link:
https://docs.google.com/spreadsheets/d/1L0MutBUyMF9I5e2fETfGnZexahynM7v7Soi_LqibOBA/edit?usp=sharing
Exercise 1: HTML Document
In this exercise, we are required to create a web document based on the
context given. Follow the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). We need to
create the document using Text Edit or Note Pad as shown in class.
This is the document we are required to create in HTML
Fig. 1 Exercise 1 content
This is the document we are required to create in HTML
Fig. 1 Exercise 1 content
So I followed the way Mr. Shamsul taught us last week and created
it in HTML form
Fig. 2 Process of making the exercise
Exercise 1 link.
Exercise 1 link.
Exercise 2
We are required to create a single HTML page that contains the content given. We should also include images for required sections (use all the images provided). In each main sections, we need to include an id attribute that will be later used as an anchor to be linked from the navigation (in the first part of the content).
Exercise 2 link.
Exercise 3: Layout Exercise
We are required to create a single web page based on the content given in the link. We must follow the layout as in the reference given. Use an external CSS file to create the layout as shown in class.
Exercise 3 link.
We are required to create a single HTML page that contains the content given. We should also include images for required sections (use all the images provided). In each main sections, we need to include an id attribute that will be later used as an anchor to be linked from the navigation (in the first part of the content).
Exercise 2 link.
Exercise 3: Layout Exercise
We are required to create a single web page based on the content given in the link. We must follow the layout as in the reference given. Use an external CSS file to create the layout as shown in class.
Exercise 3 link.
FEEDBACK
If you want to make a website,
the goal of the website must be clear
REFLECTIONS
My first impression of this module was cool. I have always wondered how coding a website works and I was really curious. Then after I did the tutorials in the class, I was so confused. The things that we need to remember are a lot and I am not a person that is good at memorizing things. Perhaps the only thing that can keep me up to remember the stuff I study is to keep on practicing them until I am familiar with them. The tasks are given now aren't very hard but it gives me the general idea of how coding works.
Comments
Post a Comment