Interactive Design
Weekly Learning
WEEK 1:
In this class, the teacher introduced what we have learned this semester, mainly focusing on website design. At the same time, the teacher introduced the software we need to prepare. Finally, the teacher introduced the homework for Exercise 1. We need to select 5 different types of websites from the materials provided by the teacher and conduct in-depth analysis on them.
WEEK 2:
In this class, we learned the core content of user-centered design, which is mainly divided into three parts: First, the iterative logic of design thinking, which requires understanding and defining the problem first, then conceiving, prototyping, and testing. It is not linear and requires repeated adjustments based on test results; second, the five design principles, including ensuring consistency in style, simplifying the simplicity of operation steps, highlighting the visibility of key functions, letting users know the feedback of operation results, and error prevention to avoid mistakes in advance. Each principle must be used in conjunction with examples; third, course practice. We were divided into five groups to prepare explanations of the five principles. We were assigned to feedback. We also had to design an interactive website during the semester to put these principles into practice in the project.
Interactive Design - Week 2，作者 Shaiba Zuhury
WEEK 3:
This course focuses on web fundamentals, web page development logic, and core HTML concepts, laying the foundation for practical application. Key points are as follows:
1. The Core Difference Between the Web and the Internet
The Internet is the underlying network (Wi-Fi, broadband, etc.), while the Web is an information system built on top of the Internet (webpages, apps, etc.). The Web was developed by Tim Berners-Lee in 1989. Early on, it was text-only and required access at internet cafes (with speeds as low as 56KB/s).
2. Pain Points in Web Development and Solutions
In the early days, different browsers (IE, Netscape) interpreted code differently, requiring separate web pages for each device. Later, CSS was used to unify styles, following the web standards established by the W3C (World Wide Web Consortium). This unified development approach of "HTML (structure) + CSS (style)" addressed compatibility issues.
3. Web Page Structure and HTML Core
Web pages are laid out from top to bottom and left to right, with visual hierarchy at the core (important content, such as main headings, is larger and placed at the top). HTML is a markup language that describes structure. Elements (tags) mostly appear in pairs (e.g., <h1></h1> for a title, <p></p> for a paragraph). The <html> root element is mandatory, containing the <head> (non-displayable content) and the <body> (visible content).
WEEK 4:
Building on the previous lesson, we learned how to make websites more personalized and enriched.
1. Project File Management: When uploading a web project, you need to upload a folder (not individual files), and it must include the "index.html" index file. When using Visual Studio Code or Dreamweaver, import the project through "File > Open Folder" and create an "images" subfolder (all lowercase) to store assets. I chose Dreamweaver.
2. Image and Background Settings: When inserting images, specify the path using the "src" command. It's recommended to use percentages (e.g., 30%) for width and height to ensure responsiveness. Background images should be placed in the asset folder and referenced in the code using the "background-image" directive. Add the "no-repeat" flag to prevent duplication. Background colors can be selected directly from the software's color list, eliminating the need to memorize color codes.
3. Table creation: Use the "table/tr/td" tags to create a table (use "th" for table headers). Cells can be merged ("colspan" spans columns). After adding borders, use "border-collapse: collapse" to merge borders. The table data must correspond to the content (such as the time and module of a schedule).
WEEK 5:
In this class, I mainly learned about additional HTML tags and CSS basics:
In HTML, I learned the difference between the ID and Class attributes—IDs are "unique identifiers" for elements and cannot be repeated on a page, making them suitable for setting unique styles for individual elements; Classes are "bulk tags" that can be shared by multiple elements, making it convenient for uniformly styling a category of elements. I also learned the difference between block-level elements (like <h1> and <p>, which occupy their own line by default) and inline elements (like <b> and <a>, which share a line with adjacent content), which is very useful for creating page structure.
As for CSS, I understand it as the "makeup artist" of HTML. Rules are divided into selectors (selecting the elements to modify the style) and declarations (specific modifications are made by writing "attribute: value" in the correct format). There are two ways to use CSS: external CSS (written in a separate .css file, convenient for sharing across multiple pages) and internal CSS (written within the HTML <style> tag, suitable for a single page).
I also mastered the "cascading" nature of CSS—when styles conflict, ID selectors take precedence over class selectors, which in turn take precedence over element selectors. If they have the same precedence, the rule written later takes precedence. I also learned about specific styling features, such as changing colors, setting backgrounds, adjusting text formatting, and choosing fonts (with safe fonts and the ability to include Google Fonts). Finally, during a practical exercise, I encountered a subheading alignment issue. I discovered it was a minor error in font references and formatting, which I fixed. This also gave me a deeper understanding of the importance of CSS formatting and resource references.
In order to help us understand more thoroughly, the teacher led us to do exercises after the course.
Website Display:
CSS Selectors
1. Basic Structure: CSS rules consist of "Properties" and "Values," separated by a colon.
2. Common Types:
- General Selector: Represented by an asterisk (*), it selects all elements in the document and is often used to clear default margins and padding.
- Element Selector: Selects elements directly using HTML tag names (e.g., body, div), the most basic selector type.
- Class Selector: Begins with a period (.), allowing multiple elements to be grouped and have the same style applied.
- ID Selector: Begins with a hash sign (#), where one ID corresponds to only one element in the document, used for precise selection of a single element.
- Descendant Selector: Separates parent and child elements by a space (e.g., nav a), selecting all child elements under the parent element.
- Pseudo-class selectors, such as :hover (mouse hover), :active (click to activate), :focus (get focus), must be written in the order of "link→visited→hover→active", otherwise they may not work.
After the teacher explained, we put it into practice.
Exercise:
HTML:
- <nav> to create a navigation bar, with <ul> and <li> for menu items, and <a href="#id"> linking to different sections (Home, About, Introduction, Contact).
- <h1> and <h2> for main and subheadings, <p> for text content.
- <img> to insert the food image with alt attributes for accessibility.
- <ul> and <li> to list ingredients clearly.
- <form> with <input> fields for name, email, and submit button, and <textarea> for comments, with <label> for accessibility.
- <iframe> to embed a Google Map showing the location.
CSS:
- Set the body background to beige and applied "Cormorant Garamond" for text, "Cinzel" for navigation and headings.
- Navigation uses Flexbox to center menu items horizontally with spacing.
- Links change color on hover to enhance interactivity.
- Headings and paragraphs have colors, line height, and spacing for readability.
- Form inputs and buttons have padding, borders, rounded corners, and hover effects with smooth transitions.
- Container and image widths use percentages for responsive layout.
Using these HTML tags and CSS properties, I completed the webpage structure, styling, and basic interactivity. This exercise helped me practice layout design, form creation, font and color usage, and simple page beautification techniques.
Source file
WEEK 7:
In this lesson, the teacher mainly covered basic web page layout using HTML and CSS. We learned how to use flexbox layout to align and distribute content and how to beautify the page using margins, padding, colors, and rounded corners. The teacher also demonstrated how to add images, titles, and text descriptions to a web page and arrange them neatly in different areas.
Classroom Exercises:
🧩 Step 1: Establishing the Basic Structure
First, I built the basic skeleton of the page using HTML.
This mainly includes the following parts:
<nav> Navigation bar: Contains four navigation links: Home, About, News, and Contact;
.main-cont Main content area: Contains two boxes on the left and right sides to display different content;
.row area: Contains three columns of content cards, each containing an image, title, and text description;
<footer> Footer: Displays copyright information.
At this stage, my focus is on a clear structure and correct semantics, ensuring a well-defined page hierarchy.
🎨 Step 2: Writing CSS Styles
Next, we move on to the design phase. I used CSS to control the size, spacing, color, and font of the boxes.
Key settings include:
Using `display: flex;` to arrange elements horizontally (such as the navigation bar, main content area, and three-column cards);
Using `box-sizing: border-box;` to ensure boxes don't exceed the width after setting padding and borders;
Using `border-radius` to make the corners more rounded;
Adjusting the background and font colors for a clean and soft overall style.
During debugging, I adjusted the height of `.main-cont` multiple times to make the page look more balanced.
Ultimately, I chose a purple background with blue boxes (#E8D7FF + #BEE4F2 + #A7D8F2), which is both layered and not glaring.
🖼️ Step 3: Adding Images and Text
In the three-column card section (.row), I added an image and a short text description to each `.col`.
I also adjusted the image styles:
This way, images are automatically cropped to a uniform visual effect regardless of their aspect ratio.
The text below the cards uses light gray and has appropriate line spacing for a more comfortable layout.
⚙️ Step 4: Overall Fine-tuning and Optimization
After completing the basic layout, I further optimized the details:
Added hover underlines to navigation links;
Added subtle shadows to the cards;
Used a dark purple background for the footer to echo the main theme;
Adjusted spacing and font size appropriately to make the page more harmonious.
WEB VIEW
Source file
💭 Self-Reflection
Through this exercise, I gained a deeper understanding of the CSS Box Model and became familiar with Flexbox layout methods.
From the initial blank page to the final webpage, every adjustment to margins, colors, and shadows was a learning experience.
Although the entire page is simple, it gave me a deeper understanding of the balance between webpage structure and aesthetic design.
WEEK 8:
This week we had online classes, mainly learning two key concepts:
CSS position property
- static (default): Follows the document flow; cannot use positional properties (top/right, etc.).
- relative: Retains original space; can be offset relative to its own position.
- absolute: Removes from the document flow; positioned relative to its ancestor/browser window.
- fixed: Fixed within the browser window; does not move when scrolling.
- sticky: Fixed after scrolling to a specified position; combines the relative and fixed properties.
- Tip: Use z-index to control element hierarchy; can be used with videos/images as background effects.
Dropdown Menu Implementation
1. Structure: Navigation bar list items nested within dropdown containers; add corresponding class names.
2. Style: Hides by default (display: none); shows on mouse hover (display: block); uses absolute and z-index to optimize layout hierarchy.
3. Practice: Based on last week's document modifications, test the functionality using virtual links.
Position exercise：
Dropdown Menu:
WEEK 9:
We didn't have any lectures this week; the teacher encouraged us to continue with Project 2.
WEEK 10:
In today’s class, I finally understood the real purpose of using Bootstrap in web development. In the past, whenever I built a webpage, I had to write most of the structure and CSS by myself, especially the responsive layout, which often required a lot of trial and error. After this lesson, I realized that Bootstrap already provides many ready-made components and a complete layout system. As long as I follow its rules, I can quickly build a clean, responsive, and professional-looking webpage without starting everything from scratch.
We started by learning how to include Bootstrap in an HTML file. The instructor asked us to go to the official website and copy the CSS and JavaScript CDN links. The CSS goes inside the <head>, and the JavaScript must be placed right before </body>. Once these two lines are included, the whole page can immediately use all of Bootstrap’s built-in features.
The part that helped me the most was understanding the Bootstrap Grid system. It divides each row into 12 columns, and all content must be placed inside .col elements wrapped by a .row. Depending on the layout I want, I can choose col-4, col-6, or any other width. I also learned how to control layouts on different devices using classes like col-sm-6, col-md-4, and col-lg-3. This makes the webpage automatically adjust on phones, tablets, and desktops without me writing complicated custom CSS.
The instructor also walked us through several Bootstrap components such as the navbar, carousel, cards, forms, and alerts. I learned that I can directly copy these components from the documentation and simply replace the text and images with my own content. It’s much faster than building everything from the ground up.
Lastly, I learned how to customize Bootstrap’s default styles. If I want to override a color or design, I can create my own CSS using the same class names. And if it still doesn’t work, I can add！inportant to make sure my styling takes priority.
Overall, this class made web development feel much more structured and efficient. Bootstrap helps me save time on basic styling so I can focus more on content and user experience. My next step is to build a simple page using a navbar, carousel, and card section to put everything I learned today into practice.
After that, the teacher gave us feedback on Project 2.
Teacher's feedback
1. Functionality and Interaction
- A carousel can be added, but the call to action for each section should be clearly stated so users know what to do next.
- Buttons already exist; the text doesn't need underlining, and the buttons themselves shouldn't have any extra decorative lines. Keep it simple and consistent.
2. Visuals and Layout
- The page layout is a bit cluttered, and the corner design isn't interesting enough. It needs to be readjusted to achieve a more balanced overall look.
- The current design doesn't look professional enough and needs further optimization.
- Button styles should be consistent. Underlines sometimes appear and need to be changed to maintain consistency.
Overall, the page should look more professional and unified and improve user guidance.
Class Exercise
The teacher wants us to build a basic webpage first, including:
- Navigation bar
- Carousel
- One row for cards
- Using Bootstrap Grid
Don't rush to add custom styles; let's get the structure up and running first.
I used several key components from the Bootstrap documentation:
Navigation Bar (Component → Navigation Bar): For a clean top navigation bar.
Carousel (Component → Carousel): For a large carousel section with images and titles.
Scale Assistant (Assistant → Scale): Keeps the carousel images in a consistent 16:9 aspect ratio.
Grid System (Layout → Grid): Arranges three cards in a responsive layout.
Card (Component → Card): Displays previews of items with images and descriptions.
Button (Component → Button): Applies outline-style buttons to the bottom of each card.
Utilities (Utility API): Used for spacing, color, alignment, and typography.
Using only these Bootstrap components, I built a clean and responsive webpage structure that perfectly matches the design. The layout adapts well to different screen sizes without requiring custom CSS.
Source file:
WEEK 11:
We have no classes this week. Students with questions can come to the school for consultation.
WEEK 12:
Comments
Post a Comment