Interactive Design / Task 2 / Working Web Page

16.10.2023 - 24.10.2023 (Week 8 - Week 9)
Elysa Wee Qi En / 0355060 / Bachelor of Design (Hons) in Creative Media / Taylor's University
Interactive Design
Task 2 / Working Web Page

LECTURES

All lectures were covered in Exercises. 

INSTRUCTIONS

Fig. 1. Module Information Booklet

Task 2: Working Web Page

In this task, we had to recreate our prototype design from task 1 in code and actually turn it into a working web page, with links and all. 

Fig. 2.1. HTML coding (22/10/2023)

I started by writing down all my HTML and establishing the different <div=class> and sections. Since the HTML can always be edited later down the line, should I need another container or want to add an <a href>, I didn't worry too much about that for now. 

Fig. 2.2. Beginning CSS coding (22/10/2023)

Next was to begin coding CSS. I began with the background colour of the website and also setting the colour, width, font size etc. of all the text.

Fig. 2.3. Creating various elements in CSS (14/12/2023)

After that it was time for the complicated parts. Such as the profile picture, as I needed to figure out how to create a round border on a round picture. There was also the matter of creating those circles that I had put in my prototype, and the bars to measure my skills. At least in the end, I was able to do a well enough job at these.

FINAL Working Web Page Submission

Link to webpage: 

https://project2-elysaweeqien-0355060.netlify.app/

REFLECTIONS

Experience
To be fair, this is quite a jump in difficulty from my exercise 3 of creating a recipe card. Though that can be considered a fault of my own, since I made my prototype design in task 1 so complicated. However, it did end up working out even if it took me a long time, and I was able to create the layout I had planned. The bug-fixing was frustrating, but it was also kind of fun. I've done some coding in other coding languages before in secondary school, and I enjoyed it then too. It's just something I can be absorbed in, at least until the code isn't doing what I want it to and I get frustrated. But even then, it's all the more satisfying when you accomplish what you want.

Observations
Again, just some simple lines of code can really do a lot. Sometimes, the biggest frustrations and 'mistakes' are fixed with just an extra line of code. It's cool, but can also be frustrating trying to find that one perfect solution to make the website look and act as you imagine. It's quite interesting to see how your website can change from having only pure HTML to having CSS as well. 

Findings
It can be so annoying to code with consideration for different browser sizes. It can be really complicated since some elements tend to stay in place while others move all over the place. It's tricky to be able to use the right commands to get the various elements to do what you want when you resize the window, whether it be resizing themselves or staying in place as they are. At the same time, this is important so that anyone with any device anywhere can view your website as you intend.