hCard Builder Development Process
-
Write HTML template to build structure, define class and id name, and add SEO elements
-
Use Javascript to implement functions, try to use efficient method to make it work
-
Slice PSD file to measure dimension between different elements of mockup, record color code
-
Apply CSS for UI rendering, adjust HTML structure
-
Add media query for responsive layout
-
Test website by different browsers (Chrome/IE/Firefox) with different versions. Test performance on mobile and tablet.
-
Fix bugs
-
Total development time consuming: aprox. 5hrs
-
I did meet some issues like - need to use style of to replace style of input[type='file'] and user still click 'input' to upload photo. The quick solution is to cover the rendered by a same size/position and transparent so that user can see the but actually click . It's not the best solution but it just works. I tried some other ways like to apply onclick function to or hide , none of them work. I give this example to say when I meet problem, my solution is to looking for different ways then find out the best I can do.
-
There are definitely improvement spaces on my work and I'm still learning and doing some research to make it better.