INTERACTIVE DESIGN ( WEEKLY LEARN

In this course, we focused on the core concepts of user-centered design, which included three main parts: the iterative logic of design thinking, the five key design principles (consistency, simplicity, visibility, feedback, and error prevention), and practical group work. We reviewed the five stages of design thinking — empathize, define, ideate, prototype, and test — and discussed how good usability must be supported from the user’s perspective. For example, WhatsApp provides feedback pop-ups when users input phone numbers, allowing future improvements based on user behavior. Our group was assigned the “feedback” principle and created a PPT presentation on this topic. At the end of the lesson, the instructor reviewed our previous website analysis assignments and suggested improvements, including adding more interactive elements, ensuring responsiveness across devices, and enhancing digital image presentation.

WEEK 3

This course teaches the basics of the web, how web pages are built, and the key ideas of HTML. It gives us a foundation for real-world practice.

1. The Difference Between the Web and the Internet

The Internet is the main network that connects computers and devices (like Wi-Fi or broadband).

The Web is an information system built on top of the Internet — it includes websites, web apps, and online pages.

2. Problems in Early Web Development and How They Were Solved

In the early years, different browsers such as Internet Explorer and Netscape showed web code differently.

Developers had to make separate pages for each browser or device.

Later, the use of CSS (Cascading Style Sheets) helped unify the design.

The W3C (World Wide Web Consortium) set standards, so developers could follow one common rule.

Now the basic structure of web pages uses:

HTML for structure + CSS for style, which solved many compatibility problems.

3. Web Page Layout and HTML Basics

A web page is read from top to bottom and left to right.

The most important parts — like titles or main headings — are usually bigger and at the top.

HTML is a markup language used to show structure.

Most elements are written in pairs of tags, for example:

<h1></h1> for a title and <p></p> for a paragraph.

Every page must have a <html> root element.

Inside it are two main parts:

<head> — contains hidden information like the page title and links.

<body> — contains the content that users can see.

Building on what we learned before, this lesson focused on how to make websites more personalized and detailed.

1. Project File Management

When uploading a web project, you must upload the whole folder, not single files.The folder must include the main file called “index.html.”

When using Visual Studio Code or Dreamweaver, open your project by going toFile > Open Folder.

Inside the folder, create another folder called “images” (all lowercase) to store pictures and other assets.

For this lesson, I used Visual Studio Code.

2. Image and Background Settings

When adding images, use the “src” command to show the correct file path.

It’s best to use percentages (for example, 30%) for image width and height so the page looks good on all screens.

Background images should be placed in the assets folder and added with the “background-image” code.

Add the “no-repeat” setting to stop the image from repeating.

For background colors, you can choose directly from the color list in the software — you don’t need to memorize color codes.

3. Table Creation

To make a table, use the “table”, “tr”, and “td” tags.

Use “th” for the table header.

If you need to merge cells, use “colspan” to connect columns.

After adding borders, use “border-collapse: collapse” so the borders merge cleanly.

Each cell in the table should match its data — for example, a schedule table should have the correct time and module in each row.

WEEK 4

Website Development Summary

1. Project File Management

When uploading a web project, always upload the entire project folder rather than individual files. This folder must include an “index.html” file as the main entry point.

If you’re using Visual Studio Code or Dreamweaver, open the project through “File > Open Folder.” Inside your project, create a lowercase “images” subfolder to store all image assets.

For this project, I used Dreamweaver.

2. Image and Background Settings

When inserting an image, specify its file path using the src attribute. To make your webpage responsive, use percentage values (e.g., 30%) for the image’s width and height.

Background images should also be saved in the assets folder and added in CSS using the background-image property. Use no-repeat to prevent the background from duplicating.

For background colors, you can simply select from the software’s built-in color picker instead of memorizing color codes.

3. Table Creation

Use the <table>, <tr>, and <td> tags to create tables, and the <th> tag for table headers.

To merge cells horizontally, use the colspan attribute. After adding borders, include border-collapse: collapse in CSS to make the borders appear as single lines.

Ensure that the table’s data matches its purpose — for example, a schedule should have columns and rows that correspond to times and modules.

WEEK 5

Reflection on This Lesson

In this class, I primarily learned about additional HTML tags and the fundamentals of CSS.

In HTML, I explored the difference between the ID and Class attributes. The ID attribute serves as a unique identifier for a single element—it cannot be duplicated within the same page, making it ideal for applying exclusive styles to specific elements. The Class attribute, on the other hand, acts as a group label that can be shared by multiple elements, which is useful for applying consistent styling to a set of elements.

I also learned the distinction between block-level elements (such as <h1> and <p>, which occupy an entire line by default) and inline elements (such as <b> and <a>, which remain on the same line as adjacent content). This knowledge is particularly helpful for structuring web page layouts effectively.

In CSS, I came to understand it as the “makeup artist” of HTML—responsible for the visual presentation of a webpage. A CSS rule consists of a selector (which targets the element to style) and a declaration (which defines the style using the format property: value). CSS can be applied in two main ways:

• External CSS, written in a separate .css file, which allows multiple pages to share the same styles.

• Internal CSS, written within the <style> tag inside an HTML file, suitable for styling a single page.

I also learned about the cascading principle of CSS—when multiple style rules conflict, ID selectorshave the highest priority, followed by class selectors, and then element selectors. If two rules share the same level of precedence, the one written later will override the earlier one.

Furthermore, I explored several key styling techniques, such as setting colors and backgrounds, adjusting text alignment and formatting, and choosing appropriate fonts (including safe fonts and Google Fonts). During one of the practical exercises, I encountered a subheading alignment issue, which turned out to be caused by a small error in the font reference and formatting. After correcting it, I gained a deeper understanding of the importance of proper CSS structure and accurate resource linking.

To help us reinforce these concepts, our teacher guided us through hands-on exercises after the lesson, which greatly enhanced my comprehension and confidence in applying HTML and CSS effectively.

WEEK 6

CSS Selectors

1. Basic Structure

A CSS rule is made up of properties and values, separated by a colon. Properties define what you want to style, and values specify how it should look.

2. Common Types of Selectors

• Universal Selector (*)

The universal selector targets all elements in the document. It is often used to reset or remove the default margins and padding applied by browsers.

• Element Selector

This selector targets elements directly by their HTML tag names (such as body, div, or p). It is the most fundamental and straightforward type of selector.

• Class Selector (.)

The class selector begins with a period (.) and is used to group multiple elements under the same style definition. This makes it easy to apply consistent formatting across several elements.

• ID Selector (#)

The ID selector starts with a hash symbol (#) and uniquely identifies a single element within a page. Each ID can only be used once, making this selector ideal for applying specific styles to individual elements.

• Descendant Selector (e.g., nav a)

This selector separates parent and child elements with a space, targeting all child elements within a specified parent. For example, nav a applies styles to all <a> elements inside a <nav>container.

• Pseudo-class Selectors

Pseudo-classes target elements in specific states, such as :hover (when the mouse hovers), :active (when clicked), and :focus (when focused).

For link-related pseudo-classes, they must be written in the order :link → :visited → :hover → :active; otherwise, some states may not function correctly.

WEEK 7

Just like in our previous lessons, the teacher first went through the PPT to explain the concepts, followed by a hands-on practice session. This time, we built a website that was more complete and functional. The initial structure remained the same as before, including the body section, paragraphs (p), and headings—these fundamental elements do not change.

What stood out to me most in this class was the process of editing the CSS code. All the colors, font sizes, background settings, and visual effects are adjusted through CSS. Through this exercise, I now have a deeper understanding of how HTML and CSS work together: HTML creates the basic structure of a webpage, while CSS is what adds design and visual style to make the website look more attractive.

WEEK 8

This week we had online lessons, and the focus was on two important concepts:

CSS Position Property

• static (default): Elements follow the normal document flow and cannot use positioning attributes like top or right.

• relative: Keeps the element’s original space but allows it to shift relative to its initial position.

• absolute: Removes the element from the document flow and positions it relative to its nearest positioned ancestor or the browser window.

• fixed: Stays fixed in the browser window and does not move when the page scrolls.

• sticky: Acts like relative until the page scrolls to a certain point, then becomes fixed.

• Tip: Use z-index to manage stacking order, especially when working with videos or images as background layers.

Dropdown Menu Implementation

1. Structure: The navigation bar contains list items, and dropdown items are placed inside a dedicated container with specific class names.

2. Styling: The dropdown content is hidden by default using display: none, and shown on hover with display: block. Absolute positioning and z-index are used to ensure proper layering and alignment.

3. Practice: Using last week’s document as a base, we modified and tested the dropdown functionality with placeholder links.

WEEK 9

We didn't have any lectures this week; the teacher encouraged us to continue with Project 2

WEEK 10

WEEK 11

WEEK 12

Search This Blog

DING JIAQI