Challenge Overview
Welcome to the Healthy Islands Vision Responsive Website UI Prototype Challenge!
The goal of this challenge is to build an HTML prototype of the “parent” and “child” site of the HI Vision portal that are based from the provided storyboard and description outlined below. The output of this HTML prototype challenge will be using as input for WordPress development.
- The provided storyboard is for Desktop and Mobile layout. Tablet layout should follow the Desktop layout.
- Logo should be image tag (not via CSS background). Ideally, it should be similar to WordPress custom logo code markup. Example output is like this:
- Use img tag for image content. Some of these images are the banners and thumbnails for news and events.
Storyboard: D01_1 Parent.psd
Main Navigation
- link the nav items to their respective pages.
- “Our Work” nav will be pull down menu that displays. See D01_5 Parent.psd for specific style of the pull down menu.
-- Link all nav to Child Home page except for the Child Regional Meetings which will be linked to the Parent Regional Meetings page.
-- Background images of each nav item should be via image tag and not via CSS as this will be dynamically set when implemented in Wordpress.
-- The images should have NO special effects that is implemented in the storyboard but instead use overlays to achieve the effect in CSS. I think the closest way to achieve this is by doing 2 overlays. 1st top layer will have gradient with 10% opacity, and the 2nd top layer will have a solid color of #00b0ca with 25% opacity.
Top section carousel
- Background image are again should be via image tag and not in CSS. Apply the gradient effect in CSS and not in image.
- Read More button leads to Parent News & Event page.
News & Events and Highlights section
- Images, titles, and read more should be linked to Child News Details page.
- More News & Events link to Parent News & Events page.
Our Work section
- Implement the same approach in “Our Work” pull down nav for each image tiles here.
- Each tile should be linked to Child Home page except for the Regional Meetings which will be linked to the Parent Regional Meetings page.
Our Members
- Map is image based.
- More About Our Members links to Parent Our Members page.
The rest are dead links.
2. Parent News & Events page
- Storyboard: D01_2 Parent.psd
- Link each item's’ title, image, and read more to Child News Details page.
- More News & Events will load a partial HTML elements via AJAX.
3. Parent Our Members page
- Storyboard: D01_3 Parent.psd
- Map will be image content
- Country list in the sidebar are dead links for now.
4. Parent Our Works page
- Storyboard: D01_4 Parent.psd
- Breadcrumbs and content links are dead links
- Top image and thumbnails are image content
5. Child Home page version 1
- Storyboard: D02_1 Sub Web.psd
Navigation (applicable to all child pages)
- The scope of the navigation is limited to the child pages only.
Top section
- This section will be carousel, its pagination is located at the right side of the page.
- Image effect should be applied in HTML/CSS and not directly as rasterized image. The goal is we can put in any normal image and the effect will still show the same.
- Learn More button can be dead link for now.
Explore More section
- Latest News tile leads to the Child Latest News page
- Locums & Vacancies tile leads to the Child Locums & Vacancies page
- SCS Schedule tile will be dead link
Latest News section
- Thumbnails and Read More links leads to the Child Latest News Details page
- “More News” button will load 3 more content via AJAX. You need to simulate this functionality with dummy content.
Footer
- Top section logos will have links, use dead links for now
- Map will just be an image, the “View larger image” will NOT be part of the image and should have an external link (can be dead link for now).
5.1. Child Home page version 2
- This can be similar to the version 1 except to the layout and content in “Explore More” section and the Footer top section where it says “Pacific NCD Network Partners” before the footer as seen in D03_1 Sub Web.psd.
- Links can be dead links, what’s important is the additional style and structure of the two sections mentioned above.
5.2. Child Home page version 3
- This is again similar to the version 1 except for the layout and content in “News & Events”, “Useful Links”, and Footer top section as shown in D04_1 Sub Web.psd
- Links can be dead links, what’s important is the additional style and structure of the sections mentioned above.
6. Child Latest News page
- Storyboard: D02_2 Sub Web.psd
- Main content thumbnails, titles, and Read More links leads to the Child Latest News Details page
- Sidebar links can be dead links for now
- “More News & Events” will load additional content items via AJAX. Please simulate this functionality too.
7. Child Latest News Details page
- Storyboard: D02_3 Sub Web.psd
- This page is straightforward, prototype this page as shown in the storyboard.
8. Child Locums & Vacancies page
- Storyboard: D02_4 Sub Web.psd
- This is another straightforward page, prototype this page as shown in the storyboard.
- Left sidebar links can be dead links
9. Child The Team page
- Storyboard: D02_5 Sub Web.psd
- User roles are not link
- Emails are email links (this is applicable to all email links across all pages of the parent and child pages)
- Contact Info and Biography are accordions and can be expanded or collapsed at the same time. By default they are both expanded.
10. Child Contact Us page
- Storyboard: D02_6 Sub Web.psd
- Map is an actual Google Map embed
- No need for form validation
11. Child Regional Meetings page
- Storyboard: D03_2 Sub Web.psd
- For this page, you can use the page “Child Home page version 2” as your base
- The entire tile of each item in the three column section are clickable, use the same style technique mentioned in the Parent Home page for the image thumbnails.
12. Child Members page
- Storyboard: D04_2 Sub Web.psd
- For this page, you can use the page “Child Home page version 3” as your base
- Sidebar links are dead links
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS
- You are allowed to use SASS/SCSS or LESS CSS Pre-Processor.
- You are allowed to use Bootstrap.
- Use Media Queries to load different styles for each page and do NOT build a different page for different device/layout.
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All CSS naming should not have any conflicts.
- As possible use CSS styles when creating all styling whenever possible, avoid image usage.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use jQuery.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons used in CSS for your submission.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chome & Safari browser in Mobile Phone
The goal of this challenge is to build an HTML prototype of the “parent” and “child” site of the HI Vision portal that are based from the provided storyboard and description outlined below. The output of this HTML prototype challenge will be using as input for WordPress development.
Final Submission Guidelines
Important Notes:- The provided storyboard is for Desktop and Mobile layout. Tablet layout should follow the Desktop layout.
- Logo should be image tag (not via CSS background). Ideally, it should be similar to WordPress custom logo code markup. Example output is like this:
<a href="./index.html" class="custom-logo-link">
<img src="./path/to/logo.png" class="custom-logo" alt="logo">
</a>
- Do not put class names on p tags that are intended for paragraph text copy, wrap them in div tag and style it from there. If necessary you can use nth child or nth-of-type to style the p tag.- Use img tag for image content. Some of these images are the banners and thumbnails for news and events.
Page Requirements
1. Parent Home pageStoryboard: D01_1 Parent.psd
Main Navigation
- link the nav items to their respective pages.
- “Our Work” nav will be pull down menu that displays. See D01_5 Parent.psd for specific style of the pull down menu.
-- Link all nav to Child Home page except for the Child Regional Meetings which will be linked to the Parent Regional Meetings page.
-- Background images of each nav item should be via image tag and not via CSS as this will be dynamically set when implemented in Wordpress.
-- The images should have NO special effects that is implemented in the storyboard but instead use overlays to achieve the effect in CSS. I think the closest way to achieve this is by doing 2 overlays. 1st top layer will have gradient with 10% opacity, and the 2nd top layer will have a solid color of #00b0ca with 25% opacity.
Top section carousel
- Background image are again should be via image tag and not in CSS. Apply the gradient effect in CSS and not in image.
- Read More button leads to Parent News & Event page.
News & Events and Highlights section
- Images, titles, and read more should be linked to Child News Details page.
- More News & Events link to Parent News & Events page.
Our Work section
- Implement the same approach in “Our Work” pull down nav for each image tiles here.
- Each tile should be linked to Child Home page except for the Regional Meetings which will be linked to the Parent Regional Meetings page.
Our Members
- Map is image based.
- More About Our Members links to Parent Our Members page.
The rest are dead links.
2. Parent News & Events page
- Storyboard: D01_2 Parent.psd
- Link each item's’ title, image, and read more to Child News Details page.
- More News & Events will load a partial HTML elements via AJAX.
3. Parent Our Members page
- Storyboard: D01_3 Parent.psd
- Map will be image content
- Country list in the sidebar are dead links for now.
4. Parent Our Works page
- Storyboard: D01_4 Parent.psd
- Breadcrumbs and content links are dead links
- Top image and thumbnails are image content
5. Child Home page version 1
- Storyboard: D02_1 Sub Web.psd
Navigation (applicable to all child pages)
- The scope of the navigation is limited to the child pages only.
Top section
- This section will be carousel, its pagination is located at the right side of the page.
- Image effect should be applied in HTML/CSS and not directly as rasterized image. The goal is we can put in any normal image and the effect will still show the same.
- Learn More button can be dead link for now.
Explore More section
- Latest News tile leads to the Child Latest News page
- Locums & Vacancies tile leads to the Child Locums & Vacancies page
- SCS Schedule tile will be dead link
Latest News section
- Thumbnails and Read More links leads to the Child Latest News Details page
- “More News” button will load 3 more content via AJAX. You need to simulate this functionality with dummy content.
Footer
- Top section logos will have links, use dead links for now
- Map will just be an image, the “View larger image” will NOT be part of the image and should have an external link (can be dead link for now).
5.1. Child Home page version 2
- This can be similar to the version 1 except to the layout and content in “Explore More” section and the Footer top section where it says “Pacific NCD Network Partners” before the footer as seen in D03_1 Sub Web.psd.
- Links can be dead links, what’s important is the additional style and structure of the two sections mentioned above.
5.2. Child Home page version 3
- This is again similar to the version 1 except for the layout and content in “News & Events”, “Useful Links”, and Footer top section as shown in D04_1 Sub Web.psd
- Links can be dead links, what’s important is the additional style and structure of the sections mentioned above.
6. Child Latest News page
- Storyboard: D02_2 Sub Web.psd
- Main content thumbnails, titles, and Read More links leads to the Child Latest News Details page
- Sidebar links can be dead links for now
- “More News & Events” will load additional content items via AJAX. Please simulate this functionality too.
7. Child Latest News Details page
- Storyboard: D02_3 Sub Web.psd
- This page is straightforward, prototype this page as shown in the storyboard.
8. Child Locums & Vacancies page
- Storyboard: D02_4 Sub Web.psd
- This is another straightforward page, prototype this page as shown in the storyboard.
- Left sidebar links can be dead links
9. Child The Team page
- Storyboard: D02_5 Sub Web.psd
- User roles are not link
- Emails are email links (this is applicable to all email links across all pages of the parent and child pages)
- Contact Info and Biography are accordions and can be expanded or collapsed at the same time. By default they are both expanded.
10. Child Contact Us page
- Storyboard: D02_6 Sub Web.psd
- Map is an actual Google Map embed
- No need for form validation
11. Child Regional Meetings page
- Storyboard: D03_2 Sub Web.psd
- For this page, you can use the page “Child Home page version 2” as your base
- The entire tile of each item in the three column section are clickable, use the same style technique mentioned in the Parent Home page for the image thumbnails.
12. Child Members page
- Storyboard: D04_2 Sub Web.psd
- For this page, you can use the page “Child Home page version 3” as your base
- Sidebar links are dead links
Code Requirements
HTML / HTML5- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS
- You are allowed to use SASS/SCSS or LESS CSS Pre-Processor.
- You are allowed to use Bootstrap.
- Use Media Queries to load different styles for each page and do NOT build a different page for different device/layout.
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All CSS naming should not have any conflicts.
- As possible use CSS styles when creating all styling whenever possible, avoid image usage.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use jQuery.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons used in CSS for your submission.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chome & Safari browser in Mobile Phone