Web Design - Assignment 2
Seoh Yi Zhen (0328497)
Web Design and New Media
Assignment 2 - Single HTML Web Page
INSTRUCTIONS
Single HTML Web Page (20%) DUE WEEK 5Create ONE (1) HTML page about yourself (not too brief). The file should include basic format (heading, paragraph, list item, etc), hyperlink (internal and external), basic styling (CSS) and images. Students should be able to display the understanding of basic HTML formatting element and CSS within the Web page.
Requirement:
You are required to create an HTML document that consists of all the elements that are discussed or showed in class. The file should well format with headings, paragraph, proper use of list options and hyperlinks.
A clear presentation of content flow must be displayed so that user can easily navigate the page and understand the content.
Submission Requirement:
The file should be in HTML format (.html) and can be open from any modern browsers (Firefox or Chrome).
Compress the file to .zip and upload it in Google Classroom within the given time.
ASSIGNMENT 2
Wireframe
After showing Mr Shamsul my first wireframe sketch, he told me to add more content and to make sure that the text alignment follows the position of the pictures in the portfolio section.
He approved my second draft and helped me with my box model by dividing up the contents into different sections.
Before I began coding, I designed a mockup in Illustrator so that I knew exactly how I wanted my website to look like. I figured that it would make the coding process easier if I already knew what I wanted. It also saved time because I had all my images and icons prepared and compiled together.
Then, I created a simple video in After Effects for my header so that it would look more interesting.
After showing Mr Shamsul my first wireframe sketch, he told me to add more content and to make sure that the text alignment follows the position of the pictures in the portfolio section.
 |
| Fig. 1.1: Draft 1. |
He approved my second draft and helped me with my box model by dividing up the contents into different sections.
 |
| Fig. 1.2: Final wireframe sketch. |
Before I began coding, I designed a mockup in Illustrator so that I knew exactly how I wanted my website to look like. I figured that it would make the coding process easier if I already knew what I wanted. It also saved time because I had all my images and icons prepared and compiled together.
Then, I created a simple video in After Effects for my header so that it would look more interesting.
 |
| Fig. 1.3: Illustrator mockup. |
 |
| Fig. 1.4: Animated header. |
Final Outcome
Link to Google Drive: https://drive.google.com/open?id=1CLOWpQV4KqK4wFiuTTTSs-ArMuYNeD3e
 |
| Fig. 2.1: Header. |
 |
| Fig. 2.2: About. |
 |
| Fig. 2.3: Experience. |
 |
| Fig. 2.4: Portfolio (a). |
 |
| Fig. 2.5: Portfolio (b). |
 |
| Fig. 2.6: Portfolio (c). |
 |
| Fig. 2.7: Contact / Footer. |
 |
| Fig. 2.8: Hamburger menu. |
FEEDBACK
The layout and choice of typography is good. Overall, Mr Shamsul said I did a good job with my website. The only problem is that I left the HTML document untitled.
REFLECTION
Before this semester started, I had not coded a single thing in my entire life. Because of that, I had to learn everything really fast in order to complete this assignment. It was frustrating most of the time when my codes didn't work, but the satisfaction after seeing my finished website was really rewarding. I realized that coding requires a lot of problem-solving skills and patience to deal with all the trials and errors.
Comments
Post a Comment