LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / INTERACTIVE DESIGN
Project 02: Working Web Page
Progress
Following the guidelines provided by Mr. Shamsul Hamimi, I began by establishing a project folder. Subsequently, I saved the HTML and CSS files within this designated folder. The HTML file was named "index.html," while the CSS file was named "style.css.
 |
| Figure 1.1 Progress screenshot. |
Next, I proceeded to input all the information and content from my prototype design into the HTML code.
 |
| Figure 1.2 Project 1- prototype design. |
 |
| Figure 1.3 Progress screenshot. |
To include the icons used in my prototype design, I exported them from Adobe XD and saved them in SVG format.
 |
| Figure 1.4 Progress screenshot. |
Figure 1.5, 1.6 Progress screenshot.
Once I had included all the information in the HTML code, I assigned them different classes corresponding to the layout I wanted, which closely matched my Project 1 prototype design.
Figure 1.7, 1.8, 1.9, 1.10 Progress screenshot.
After that, I began styling it using CSS code. I started by searching for the font I used in my prototype design, which is the Garet font. However, I couldn't find it available in Google Fonts. So, I explored other websites that provided the code for this font.
Figure 1.11, 1.12 Progress screenshot.
After finding the font, I began by adjusting the font size from its default setting. The default font size was too large, causing the information to extend beyond the normal screen size. This made it necessary for viewers to scroll to the right in order to see the full information.
 |
| Figure 1.13 Progress screenshot. |
In addition, I rearranged the layout of the web page by using containers to display them in a flex format. I resized the images and containers and adjusted the fonts, background colors, margin and padding for each element. This was done to ensure they aligned with the layout design I created in the Project 1 prototype.
After achieving a satisfactory desktop version of the web page layout, I proceeded to create the mobile version to ensure that the entire web page was responsive and looked good on smaller screens.
To make the web page responsive for mobile devices, I modified the layout by changing some elements to display in block format due to the limited space on smaller screens. However, I retained the use of flex display for some elements that were suitable for this layout. The mobile version's layout may appear slightly different from the desktop version, as I adjusted the arrangement of the information to fit the smaller screen size.
Figure 1.18, 1.19, 1.20, 1.21 Progress screenshot.
Final Working Web Page
Webpage
.png) |
| Figure 2.1 Final web page- desktop version. |
.png) |
| Figure 2.2 Final web page- mobile version. |
 |
| Figure 2.3 Comparison. |
FEEDBACK
Week 09
Mr. Shamsul Hamimi provided feedback on the project, praising the consistency of the layout design with the Project 1 prototype. He also recognized the excellent compatibility of the design across different devices and screen sizes, resulting in a perfect score for the project. No further adjustments or revisions were suggested.
REFLECTIONS
Through this project, I've come to realize the need for more practice to enhance my proficiency in creating web pages using HTML and CSS. Currently, I encounter challenges in web page development, often requiring me to seek assistance from others or search online for solutions when faced with issues. Nonetheless, working on this project has significantly expanded my knowledge of HTML and CSS.
In the course of this project, I also acquired the skills necessary to make web pages responsive to mobile versions. This task was quite challenging, as it involved rearranging various elements to ensure they fit into a more suitable layout for mobile devices. Creating webpages is not a simple task, it requires a substantial time investment to achieve the best results.
Comments
Post a Comment