Challenge Overview
Welcome to the 96hrs AppXpress WordPress New Theme Development Challenge! AppXpress Marketplace is an Appirio newest approach to bring structured approach in developing mobile application.
The goal of this challenge is to update existing appxpress.com theme based on storyboard.
Page Requirements and Instructions :
Overall
- Source can be found here https://gitlab.com/appiriolabs/appxpress
- The click thru is available here: http://invis.io/7B2543OCQ
- Update the main navigation
- Update the fonts and colors
- Update graphics for landing page
- Create new page for Samples
- Update FAQ and FAQ detail page
- Update Get Started Page
- Get clean responsive code for all of these pages
- Updated type/ button/ and color styles. New design use bree font we have Bree webfont license, so refer to Appirio.com
Update the main navigation
- Follow the provided storyboard
- New theme does not have drop down style
- Cart $0.00 goes away on the navigation, and only shows up when user is in the cart
Update Landing Page
- Please refers to 01_Landing_Page.JPG
- Text and graphic should be editable from wp-admin
Create "Samples" Page
- Please refers to 02_Samples.JPG
- Content should be configurable from wp-admin
- Please be sure carousel work fine and configurable easily from wp-admin
Update FAQ and FAQ detail
- Please refers to 03_FAQ and 03_FAQ-Detail.JPG
- URL should be /faq and faq detail should be /faq/{page-slug}
- We're thinking FAQ and FAQ detail are managed page. but we're open to other better solution to manage FAQ's pages
Update Get Started Page
- Please refers to 04_Get_Started.JPG
Responsive view implementation
Responsive view should be implemented even though the storyboard does not have it, please do your best to adjust layout as existing theme work.
Additional Instruction :
Since we're working using git, here are the steps that we typically use:
HTML/CSS Requirements
- Your HTML code must be HTML5 compliant
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors.
- The generated CSS file from LESS file should be validated for errors
- Use the validators listed in the scorecard.
- 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.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Browsers Requirements
- IE9+
- Latest FF Mac & PC
- Latest Safari Mac & PC
- Latest Chrome Mac & PC
- Tablet browsers
- Mobile Phone browsers
Required Wordpress environment and plugins:
- Wordpress 3.9.2 https://wordpress.org/download/
- WooDojo http://www.woothemes.com/woodojo/
- Woo Sidebars http://www.woothemes.com/woosidebars/
- Video Lightbox plugin https://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700
Final Submission Guidelines
General Rules
- Please leverage the native Wordpress and Plugin functions available through their respective configuration dashboard(s) as much as possible. Avoid writing custom code whenever possible.
- We realize there are many reasons where you will NEED TO write custom code. That is ok, but make sure you clearly insert the necessary code comments and document your work.
- We would like to maintain the base theme as the starting point for updating the themes layout to support the mockup designs.
- Please document any additional files created within the theme source files and/or any code updates.
- It is important to utilize the theme's LESS file to generate the necessary CSS styles.
- Since we're working using Git, please submit patch (.PATCH) file, and reviewer will do review using patch file.
Submission Deliverables
- Provide a link to your wordpress staging site of your work, please note that a supplied URL is preferred
- A 1-2 minute video demo of your solution.
- Description of any plugins used outside of the supplied list.
- Description of any custom coding that has been done outside of the supplied theme
- Detailed deployment instructions.
- A WordPress theme is a folder containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types.
- You must include any necessary plug-in files along with the necessary configuration settings.
- Provide a link to your wordpress staging site of your work, please note that a supplied URL is preferred
- A 1-2 minute video demo of your solution.
- Description of any plugins used outside of the supplied list.
- Description of any custom coding that has been done outside of the supplied theme
- Detailed deployment instructions.
- A WordPress theme is a folder containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types.
- You must include any necessary plug-in files along with the necessary configuration settings.