Interactive Design - Project 2 : Working Web Page
Ting Wen Yi / 0361799
Interactive Design/Bachelor of Design (Hons) in Creative Media
Project 2 : Working Web Page
INSTRUCTIONS
Part 2 Working Web Page
- The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
- Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
- Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
- Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
- Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog
PROJECT 2: WORKING WEB PAGE
 |
| Figure 1.1 Recap of CV Design - Week 4 (29/9/2023) |
 | |
|
I placed a recap picture of my CV design in Project 1. I did my best to code it into a webpage. I began with the profile section, and my profile picture was aligned on the left side of the page. My "aside" section on the right covered more than half of the webpage, as my CV was designed that way.
 |
| Figure 1.3 Columns - Week 8 (22/10/2023) |
 |
| Figure 1.4 Skill Level Indicators - Week 8 (22/10/2023) |
I created all my skill level indicators and icons in Illustrator, using the desired colors. After that, I integrated the images into my HTML.
 |
| Figure 1.5 Skill Level Indicators - Week 8 (22/10/2023) |
I encountered a problem where I couldn't align the other skills side by side. I had difficulties with the margin bottom line, as it broke halfway and didn't appear as I desired it to be. When I tried to elongate the line, it ended up looking like a double line instead of one continuous line, similar to the bottom line in the work experience section.
 |
| Figure 1.6 Skill CSS - Week 8 (22/10/2023) |
To solve this issue, I had to create a `div` class and use CSS to gradually position the skills to align with the ones on the left.
 |
| Figure 1.7 Contacts - Week 9 (23/10/2023) |
 | |
|
Inside my rectangle, I had two different colors. Therefore, I applied CSS styles to create two rectangles with the same width. To ensure consistency, I made sure their heights were both set to 70px. This was very new to me, and I attempted to align everything using the "top" and "left" properties. I found this process to be quite complex, so I did some online research to better understand it.
 | |
|
After most of the elements and code were in place, I then added my background picture and set the width to match the viewport. I also changed my rectangles to white.
 | |
|
I also had issues with placing the timeline. I had difficulties doing it. I tried to use an image, but it ruined my spacing and alignment.
 | |
|
 |
| Figure 1.12 Link - Week 9 (23/10/2023) |
I also added clickable links to navigate to my portfolio.
Refinement
 |
| Figure 2.1 Feedback from Mr. Shamsul - Week 9 (24/10/2023) |
Mr. Shamsul's advice was to create divs and containers to make the webpage more dynamic and structured. He suggested organizing the content in a hierarchical manner, like container > main > asides > row > column, to improve the overall structure of the page.
 |
| Figure 2.2 Contacts HTML - Week 9 (24/10/2023) |
To create the left side box inside the div (left aside), I created multiple boxes with different colors because I wanted them to have distinct colors. Although it was a bit troublesome, it allowed me to achieve the look I wanted.
 |
| Figure 2.3 Contacts HTML - Week 9 (24/10/2023) |
From my HTML code, you can see that I created a div with the class "box," followed by a div with the class "column" and then inserted the icon picture. After that, I added another div with the class "column" to position my content.
 |
| Figure 2.4 Skills - Week 9 (24/10/2023) |
With these divs, I was able to resolve the issue of the line breaking for the bottom border, as you can see in Figure 1.9.
 |
| Figure 2.5 Boxing Up - Week 9 (24/10/2023) |
To show a clearer organization of my divs, I've used differently colored boxes to represent the layout of the coded content.
Final Web Page
Final Website Link: Click Here!
 |
| Figure 2.5 Screenshot from Website - Week 9 (24/10/2023) |
 |
| Figure 2.6 Screenshot from Website (Responsive View) - Week 9 (24/10/2023) |
Figure 2.7 HTML Code - Week 9 (24/10/2023)
Figure 2.8 CSS Code - Week 9 (24/10/2023)
FEEDBACK
Week 9: You should create divs and containers to make the webpage. Organizing the content in a hierarchical manner, like container > main > asides > row > column.
REFLECTION
I found this project to be more challenging than I initially thought. I realized that even seemingly small details, like aligning elements, setting up the right margins, and ensuring consistent spacing, could be quite challenging. My choice of a complex CV design in Project 1 turned out to be a bit ambitious, and I had moments of doubt about whether I could successfully implement it. Despite the difficulty, I still enjoyed working with HTML and CSS. This exercise provided me with a valuable learning experience, and I gained more knowledge than what was initially taught.
Comments
Post a Comment