Interactive Design - Lectures and Class Activity
28/8/2023 - 18/9/2023 Week 1 - Week 4
Ng Jia Ern 0363033
Bachelor of Design (Honours) in Creative Media
Interactive Design / Exercise
How to preview code in Chrome:
How to create CSS file to style HTML:
\
Ng Jia Ern 0363033
Bachelor of Design (Honours) in Creative Media
Interactive Design / Exercise
LECTURE NOTES
Week 1
In week 1 we were briefed about the MIB and the projects that we need to do in the next 13 weeks.
- Sign up for Netify and upload our project to Netify when completed
- Will check the blog after each task is over
- The process needs to be recorded in the e-portfolio to prove our work
- Project 1 and Project 2 are related
- Submit the final project link (Netify) and e-portfolio link when the project finished
- Lecture note for e-portfolio no need to write too long, just summarise it
Week 2
Design process:
- Empathy
- Define-what's the problem
- Ideate-how to improve
- Prototype
- Test
Week 3
Anatomy of Landing Page:
Week 4
How does the web work?
- Data store in a server
- Ip address sent to server
- Server sent the page we request to your web browser
Html-hypertext markup language
< > - html
If other bracket is other language
{} - css
- Heading already bold, no need to add <b>
- Save to index.html (lowercase)
Week 5
ID attribute
eg: <h1 id="main_header>text</h1>
cannot two elements have the same value
for their ID attribute
Blog elements
eg: <h1>, <p>, <ul>, <li>
Inline elements
eg: <a>, <img>
CSS
create rules appear elements
A CSS rule contains two parts: a selector and a declaration
A CSS rule contains two parts: a selector and a declaration
Declaration is made up of
two parts: a property and a value
eg: {p:v;}
p-property
v-value
Cannot use number, space
Can _, -,
Week 6
Selector is any element that you want to style.
Universal Selector: Selects all elements on the page. It's represented by an
asterisk (*).
* {
/* CSS styles go here */
}
Element Selector: The simplest type of selector, it targets HTML elements by
their tag name.
p {
/* CSS styles go here */
}
ID Selector: Targets an element with a specific id attribute. IDs
must be unique within an HTML
document. To select an element with a specific ID, use a #
symbol followed by the ID name. (Not recommended to use)
#my-element {
/* CSS styles go here */
}
Class Selector: Targets elements with a specific class attribute.
Multiple elements can share the
same class. To select elements with a specific class, use a
. symbol followed by the class name.
.my-class {
/* CSS styles go here */
}
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
"container,"
.container a {
/* CSS styles go here */
}
Child Selector: Selects elements that are direct children of another
element. To select only the immediate <li>
children of an <ul>, you can use: (Rarely use)
ul > li {
/* CSS styles go here */
}
Pseudo-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)
a:hover {
/* CSS styles go here */
}
Pseudo-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.
p::before {
/* CSS styles go here */
}
Universal Selector: *
Element Selector: p
ID Selector: #my-element
Class Selector: .my-class
Descendant Selector: .container a
Child Selector: ul > li
Pseudo-class Selector: a:hover
Pseudo-element Selector: p::before
How to insert dummy link:
Highlight the text, Insert>Hyperlink>Type # at link
How to preview code in Chrome:
Save HTML file and create a new file in CSS format
Save CSS format file in same folder as HTML file with style.css
Find CSS Designer format>Attach Existing CSS File
Week 7
Box Model
The Display property
Block-level element:
<div>
\
Inline Element:
<span>
INSTRUCTIONS
PRACTICAL
CLASS ACTIVITY
Week 2
Clothing Store Website Prototype
Week 3
Week 4
We learned simple HTML code in class:
Week 6
We learned how to link CSS to html
FEEDBACK
Navigation Menu Design: The package section is a bit confusing because one of my peers said he doesn't know 5D4N means 5 Days 4 Night. Moreover, these categories limit the choice of users, so we need to improve the selection of travel dates. But overall prototype is good, we had included all the hover effects and dropdown menu.
Comments
Post a Comment