{Interactive Design}Exercise 2

Interactive Design Exercise 2：Simple Personal Profile Page

8 September 2025- 15 October 2025
LI YUHAN (0379857)


In this lesson, we took our first steps in building web pages through coding. Though it was just a simple introductory exercise, the entire process felt incredibly novel and completely changed my understanding of web development.



During the hands-on practice, I first created a page file named "index.html," then gradually added the basic framework of the webpage. In the <head> section, I filled in the page title, used <h1> and <h2> to set heading levels, wrote two paragraphs of self-introduction with <p>, and even tried using ordered lists <ol> and <li> to list this semester's courses, favorite foods, and movies. Each step felt like gradually piecing together my own little online space.



The feeling was truly magical when I finished writing the code in the text editor for the first time, saved it, and successfully opened it in a browser—plain text suddenly transformed into a fully navigable webpage. Only then did I truly grasp the meaning of "code can build worlds." The teacher also explained the purpose of different tags: <h1> represents the largest heading, <p> is for body paragraphs, and <li> is used to organize list items, making information clearer. At the same time, the teacher emphasized the importance of meticulous coding—every tag must be properly closed. For example, after opening <li>, you must close it with </li>. Otherwise, the entire page layout could become chaotic.





Comments

  1. Shamsul HamimiOctober 22, 2025 at 4:53 PM

    The link to your webpage is not working

    ReplyDelete
    Replies
    1. LiYuhanDecember 19, 2025 at 3:20 PM

      ahh Sorry sir, I just saw your comment. I'll replace the file and put it in the link right now！

      Delete

Post a Comment

Popular posts from this blog

{Interactive Design}Exercise 1

Image
Interactive Design Exercise 1： Website Analysis 22 September 2025- 1 October 2025 YUHAN (0379857) LI  WEBSITE 1 1. Purpose and Goal: This is a recruitment website created for Takara Leben Co., Ltd.  Takara Leben is a Japanese biotechnology company specializing in the fields of regenerative medicine and cell therapy. It can be understood as a "bridge" company that translates cutting-edge bioscientific research into practical medical applications.  This website serves to recruit talent for Takara Leben, assisting individuals in achieving self-actualization while contributing to human health through biomedical advancements.  2. Visual Design and Layout （1）Blendent  and Visual style Launch animation The color palette's profound symbolism aligns with Takara Leben's mission to translate advanced cell and gene therapies into tangible realities for patient benefit. Beyond its efficacy in alleviating anxiety and enhancing focus among job seekers, the color imagery constr...
Read more

Advanced Modeling and Animation (Assignment1-2)

Image
Advanced Modeling and Animation Assignment 1: Create Models for an Interactive Space 7 October2025- 22 October 2025 LI YUHAN (0379857) Design and Concept I started by looking at some images for inspiration, gradually establishing the general look I wanted for the two models and creating a mood board for them. Mood Board Then I conceptualized the specific forms and content of the two models. My idea is to create a mechanical octopus-themed VR attraction called Kraken Core and a drop tower ride styled like a spacecraft launcher named Vector Ascension .Then I sketched them in Procreate to facilitate subsequent 3D modeling. Kraken Core: Its head is a massive holographic projection that moves in sync with the storyline—rising, falling, rotating, and vibrating. Unlike traditional rides offering only a single sensory experience, Kraken Core combines multiple senses to deliver a truly profound immersive VR experience. Vector Ascension: Vector Ascension is a lift-and-spin ride I designed inspi...
Read more

Embedded Systems Course

Image
Embedded Systems Week 1/ Introduction to Embedded System Week 2/ Prototyping Embedded Systems Week 3/ Introduction to Sensor Modules Week 4/ Embedded System Development Life Week 5/ Embedded Systems Development Essentials Week 6/ Producing the Final Assignment Week 7/ Revision of Final Assignment Week 1:   This class deepened my understanding of embedded systems, which integrate hardware and software for specific tasks across various applications, from home appliances to automotive controls. It covered their categorization by generation, performance, and real-time capabilities, highlighting their critical role in medical devices and automobiles. The course also showcased their use in smart offices, such as NFC music walls, smart lights, and door locks, enhancing efficiency while raising privacy and data storage concerns. Overall, it underscored the importance of embedded systems in modern life and the ethical considerations in their design. During the practical class, our teacher i...
Read more