Interactive Design: Project 1
21.04.2025 - 12.05.2025 / Week 1- Week 4
Angelique Svetlana Pekasa / 0377365
Interactive Design / Bachelors Of Creative Media / Taylor's University
Task 1: Exercise 1
Table of contents
Lectures
Week 4 Notes
Html code comes in pairs: opening and closing
()= java script
<>= HTML
{}= CSS
Opening tag= <p>
Closing tag= </p>
Attributes: provide additional info, provide info to the browser
In HTML u need to define the section: <body> <head>
<title>
information is wraped in a tag ex:
<h1>information</h1>
Parent element ex:
<body>
<h1></h1>
<h2></h2> (child element: element that
lives inside a parent element)
</body>
Head section: for external links, title lives inside head section
Body section: everything seen inside browser, footer section lives inside
body
Head and body lives inside <html>
ex:
<html>
<head></head>
<body></body>
</html>
Within paragraph we can forced line break: by adding <br>
Diff type of element
Bold: <b> </b>
Italic: <i> </i>
Lists have default indentation
Each item in the list is placed between opening and closing tab of
<li> </li>
Ordered list: list each item in number
<ol>
Unordered list: list each item in bullets
<ul>
Nested/sub list: used to create dropdown menus(list inside list)
Links use <a> <a/>
but <a> alone isn't complete, need to use attributes, need to tell
browser where the link will go to
Week 5 Notes
- Universal selector: selec all elements on the page, represented by *
- Element selector: targets HTML elements by their tag name.
- ID selector: Targets an element with specific id attribute, represented by # followed by ID name.
- Class selector: Targets elements with a specific class attribute, represented by . followed by class name.
- Descendant selector: selects an element that is a descendant of another element,
- Child selector: selects elements that are direct children of another element, use ul > li
- Pseudo-class selector: Selects elements based on their state or position in relation to other elements.
Instructions
Project 1
For project 1, we were task to make a proposal for a website redesign. For this task I choose IFGF Bandung's website. Shown below is my proposal presentation.
Reflections
This is actually my first time learning how to code, and use Adobe Dreamweaver during the week 4 tutorial. When I was given the task to make the presentation for the website proposal, I kept on thinking on how I should code for it, however I ended up designing the wireframes according to the UI/UX of it instead of thinking on how to code it as UI/UX is the most important part when it comes to websites. By doing this project, I also become more aware of my surroundings, especially when looking into applications and websites, I began to see the flaws and imperfections of it.
Comments
Post a Comment