Interactive Design / Project 1 - Proposal
Week 1 - Week 6 (23/04/25 - 28/05/25)
Felice Jolin (0373636)
Interactive
Design / Bachelor of Design (Hons) in Creative Media
Project 1
TABLE OF CONTENT
LECTURES
Week 4 (13/05/25)
Web started in 1989 and bombarded in Malaysia at around 2000.
Web was accessed using keyboard, mouse and monitor in the early days.
Some people access the web through audible interfaces (they talk to the computer, or they listen to the computer talk to them, or both).
The central organization responsible for creating and maintaining web
standards is the World Wide Web Consortium (W3C).
Standard markup languages to build websites we'll be using in this
course are:
• HTML • CSS
HTML is to put all informations
CSS is the
'makeup'
HTML always have < > (opening tag and a closing tag). each element tells the browser something about the information that sits between its opening and closing tags
<element>Information</element>
Opening tag <p>
Closing </p>
HTML has six levels of headings ; only headings need number
<h1>
until <h6> only
<h1> means heading
<h2> means
sub heading and so on
<h> heading
<b> bold
<i> italic
<p>
paragraph
<br/> is a single tag for line break
<hr/>
is a single tag for lines
Basic HTML
<html>
<head>
<title>title</title>
<head/>
<body></body>
<html>
Ordered list
Comes in 1,2,3...
<ol>, <li> list item
<ol>
<li>felice<li/>
<li>felice<li/>
<li>felice<li/>
Unordered list
Comes in bullet point
<ul>, <li> list item
*do not use paragraph/heading inside list
Nested list
<ul>, list within list
Category - sub category
Link
Fig 1.1 Links
Images
Fig 1.2 Images
Week 5 (20/05/25)
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 (otherwise the value is no longer
unique)
Class attribute
• Sometimes you will want a way to identify several elements as
being different from the other elements on the page
• The class attribute on any elements can share the same value or
name
Block elements
• Some elements will always appear to
start on a new line in the browser window
• It is know as
block level elements
• Example: <h1>, <p>,
<ul> and <li>
Inline elements
• Some elements will always appear to
continue on the same line as their neighbouring elements
•
Example: <b>, <i>, <em>, <a> and <img>
Introducing CSS
• CSS allows you 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 1.3 CSS
CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon. You can specify several properties in one declarations each separated by a semi-colon.
Fig 1.4 CSS
CSS Background • Set background color • Set background image • Set background repeat • Set background attachment • Background shorthand
CSS Text Formatting • Text Color • Text Alignment • Text Decoration • Text Transformation • Text Spacing • text-indent • letter-spacing • word-spacing • Text Shadow
CSS Fonts • Best Web Safe Fonts for HTML and CSS • The following list are the best web safe fonts for HTML and CSS: • Arial (sans-serif) • Verdana (sans-serif) • Tahoma (sans-serif) • Trebuchet MS (sans-serif) • Times New Roman (serif) • Georgia (serif) • Garamond (serif) • Courier New (monospace) • Brush Script MT (cursive)
This week we did HTML exercise. I also tried to insert my picture in the HTML.
.png)
Fig 1.6 The result
Week 6 (27/05/25)
CSS Selectors
- This is important for us to target and style HTML elements on a web page.
- It is to define which elements should receive specific styles, such as colors, fonts, spacing, and more.
There are several types of selectors:
- Universal Selector
- Element Selector
- ID Selector
- Class Selector
- Descendant Selector
- Child Selector
- Pseuduo-class Selector
- Pseuduo-element Selector
Why are there many selectors?
It is to enable web developers
accurately target and style specific elements or groups of elements based
on their structure, attributes, state, or position within the document. It
is to consider specificity, structure, responsive design, stateful
interactions, ease of maintenance and accessibility.
Universal Selector
Selects all elements on the page. It's represented by an asterisk (*).
Fig 1.8 Universal Selector
The simplest type of selector, it targets HTML elements by their tag name.
Fig 1.9 Element Selector
ID Selector
Targets element with specific id attribute, use a # symbol followed by the ID name.
Fig 1.10 ID Selector
Class Selector
Targets elements with a specific class attribute, use a . symbol followed by the class name.
Fig 1.11 Class Selector
Descendant Selector
Selects an element that is a descendant of another element. You can specify a hierarchy of elements to target. For example, to style all <a> elements inside a <div> with class "cpntainer",
Fig 1.12 Descendant Selector
Child Selector
Selects elements that are direct children of another element. To select only the immediate <li> children of an <ul>, you can use:
Fig 1.13 Child Selector
Pseuduo-class Selector
Selects elements based on their state or position in relation to other elements. Common pseudo-classes include :hover, :active, :visited, :link, :focus, and :nth-child(n)
Fig 1.14 Pseuduo-Class Selector
Pseuduo-element Selector
Selects parts of an element rather than the element itself. Common pseudo-elements include ::before and ::after, which are used to add content before or after an element.
This week, we did selector exercise. I tried different kind of selector in my css to add more styles.
.png)
INSTRUCTION
TASK
Proposal
FEEDBACK
REFLECTION
It was a fun experience redesigning these 3 websites. Although I was quite struggling to fing the similar typeface, I ended up with the result that I am satisfied.
Before starting to redesign, I really observe the details of the website and makesure to design it in a similar way.
I have found out that designing page by page is easier and more organized of a work. Designing in Illustrator has also enhance my techinical skills.
Komentar
Posting Komentar