My assignment.html page for linking to assignment items described in Assignment and Report Specifications

This page is the marking guide to your website that your tutor will use to find your elements. Do not name this page anything other than assignment.html (all lower case) or else we may not be able to find and mark your assignment elements. How to use this page:

upload this assignment.html file in your website directory during part 2.3 of Lab 1
later, link this page to your website's index.html page
over time, link each assignment task listed below to its location in your website as soon as you have started it
replace the "notes" paragraph with your notes or delete if you have no notes - your notes will help us understand and mark your site so you should explain things. Maybe you did a task differently from the way we specified it, either because your way is better (tell us) or minimally or not at all to fit in with your site's look and feel (tell us) or ... (also tell us). So, for example, a video might spoil the look and feel. What you do is make one anyway, link to it from this assessment.html page and explain in the Notes why it's not linked to from your public version of your web site. You can style this page as your like, so long as you keep the links to the assignment tasks.
provide details for your best student forums posts where indicated
provide the date you attended the continuous improvement session where indicated
provide link to report where indicated
delete these instructions when you are ready

1.0 Part 1 Tasks

1.2 Your Me and My Passion

About me and my passion

1.3 CSS

This is the main css file for index.html

Notes: other individual css file for other pages are in the pages folder

1.4 Site Map

sitemap

1.5 Source Log

sourcelog

1.6 Feedback Form

feedback

1.7 This Assessment Page

assignment.html This file is assignment.html

1.8 Student Forum Participation

My note on piazza The first best post

My response to the piazza poll The Second best post

2.0 Part 2 Tasks

2.1 Image Map

I use the travel map as the image map for the site mark this one. Specificly, the location of Sydney, Canberra, Shanghai, Vancouver, France and US are clickable.

Advanced Version used in the Pt3 don't mark this one for pt2 This one contains dynamic labels showing the exact location of the clickable area on the map, which is more visually appeal to the visitors.

2.2 Photo Gallery

I build the image gallery with images from my life

2.3b Javascript and 2.4b Well written Javascript

2.3b

The javascript code is used for gallery image

2.4b

The javascript code file itself

My best javascript components is:
#1 pop-up window for the image gallery page:
Feature1: the main body of this js file implements a function for the onclick event that the pop-up window will show the original full-size image in a larger window when the user click on the image. The displayed image in the gallery in the thumbnail image with smaller file size, which allows for faster loading speed. The general workflow of this feature is: getComputedStyle and getPropertyValue will get you the thumbnail directory. Next use split and replace to get the original image directory. Create the pop-up window by createElement and appendChild will append it into the container. Lastly, setAttribute to this element.
Feature2: With the new window of original image being displayed when click the thumbnail images, the onload event is defined to get the width of the pop-up window so that the next/prev button can be placed next to the new pop-up window regardless of large or small width of original image.
Functions like closeImg() is defined so that when you click outside of the pop-up window, this window will be closed. The function changeImg is defined so that the next/prev button will direct to next image or previous image. It makes sure that the next image of the last one will direct to the first image and vice versa.

2.5 Student Forum Participation

My note on piazza The third best post

3.0 Part 3 Tasks

It is recommended that use chrome to open
When the window is small,the footer will be minimized. Hover your mouse over it, it will display in full height.

Do not mark below, these are for my own reference.

The portfolio section for my academic projects. You can view it by clicking PORTFOLIO in the header. It is for my own reference and do not mark this. Refer to Source code on Github
Click CONTACT in the header twice, it will lead you to log in interface. Refer to login css file and login html file. It is for user to leave a comment in blog. It needs some mangement with database and php, so I did not include it for this assignment purpose.

3.1 Reflections

1. what you learn from A approach, and what could do differerntly, what's the mistake...

For your convenience, you can view it at reflection

It is linked to About Me, although I linked it to the About Page, it is not related to my website's overall purpose.

3.2 Alternative CSS

Note that there are two css I design

For the index.html:

I design a alterview view specificly for index.html, you can click the VIEW button in the header of index.html to activate it. It hides More about Me section and displays the new Timeline section instead. It also changed the background image, change fonts, add more text to the first page.
The code is at index alternative code

For the rest page:

I design a generic print friendly version css for all other pages part from index.html. You can click the VIEW button in the header of all other pages to activate it.
The code is at print friendly css code

3.3 Social Networking Button(s)

Refer to the follow section in About Me

Note that the follow button for facebook is no longer supportedcheck here

3.4 Social Networking Feed(s)

The social feeds for linkedin website

3.5 CSS and HTML Validation

The combined validation pdf for all css files

Note that there is no error or warning for css files

The combined validation pdf for all html files

Note that there is error appear in only index.html, all other pages are fine.

Line 286, 305, 325, 346. This error appears four times with the same usage. I deliberately design it for the filp card function in the connection section. Error of div element is child of label tag, The purpose of design this entire structure within a label tag is to make the entire card clickable. Clicking anywhere within the label, including the card content, will toggle the associated checkbox's state. It triggers actions of flipping when interacting with the card. The div element within the label tag is used to contained the information of this person.

3.6 Something Original

Mark

This is the to-do list for myself. It uses advanced javascript that allows you to add and remove things. Play around with it to complete or delete the todo ltems. There is a filter on the right hand side to display the completed items. It supports sycn with the local cache. Refer to todo css file, todo html file and todo js file