Labels

Interactive Design (Task 1): Exercise 2


6.10.2025 - 24.10.2025 / Week 3 - Week 5
Aw Wen Chia / 0368828
Interactive Design / Bachelor of Design (Honours) in Creative Media / Graphic Design

TABLE OF CONTENTS



1. INSTRUCTIONS

Objective

Create a single HTML file that serves as a basic "About Me" or personal profile page. This exercise is designed to test your understanding of core HTML document structure and fundamental elements.

Task

Create one file named index.html. When opened in a web browser, this file must display a simple page about you correctly.

Your index.html file must include the following elements:
  • Basic Document Structure: Correctly use the <!DOCTYPE html>, <html>, <head>, and <body> tags.
  • Page Title: Add a descriptive title inside the <head> using the <title> tag (e.g., "My Awesome Profile").
  • Main Heading: Use an <h1> tag for your name or the page's main topic.
  • Sub-Heading: Use an <h2> tag to create a section heading (e.g., "My Hobbies" or "Favorites").
  • Paragraph Text: Write at least two descriptive paragraphs using the <p> tag.
  • Ordered List: Create a numbered list (using <ol> and <li>) with at least three items (e.g., your top 3 favorite books, movies, or foods).
  • Unordered List: Create a bulleted list (using <ul> and <li>) with at least three items (e.g., your skills, goals, or contact methods).
Submission Requirement:
Submit your e-portfolio link. Attach the url from Netlify.com to your e-portfolio.

Be creative and fun




2. EXERCISE

My tutor had us follow his directions to create a simple website to get the feel of it. 

Fig 1, Screenshot of the Lecture Tutorial


Since my tutor uses a MacBook and I use Windows, the UI/UX are a little different. However, they lead to the same outcome.

Fig 2, Screenshot of my work in progress


As you can see in Fig 2, I had some problems with my website as I misplaced a couple of symbols and mistyped a few phrases. However, after cross-referencing my tutor's screen and getting advice from my friends, I managed to fix the glaring issues.


Fig 3, Screenshot of my work


Fig 4, Screenshot of my work


I then uploaded the website to Netlify.com to complete this exercise.



After working on it by adding colours and photos in Dreamweaver, it looks much better.





3. FEEDBACK

My tutor said to make sure my background colour is properly contrasted with the text to enhance readability. 





4. REFLECTION

This task was definitely trickier than the first task, but it was still manageable as I was able to follow along with my tutor’s instructions. Step by step, the process became clearer, and it amazed me how simply typing lines of code into my notebook could result in a fully functioning website. Seeing the immediate visual outcome of the code made the learning process feel more rewarding and engaging.

Customising the website was especially enjoyable, as it allowed me to personalise the design using my favourite colours and experiment with different visual elements. Working on the website alongside my friends made the experience even more fun. Seeing the different layouts and creative choices everyone made highlighted how the same instructions could lead to unique outcomes.




Labels:

Comments

Post a Comment

Popular Posts