Challenge Overview
Welcome to "96 hrs AppXpress Wordpress - Marketplace Responsive Update pt. 2 ". In this challenge we need your help to update existing appxpress.com pages.
The goal of this challenge is to update existing Stories and About page theme based on storyboard.
Page Requirements and Instructions :
Overall
- Setup instruction is provided in forum, please use also use attached wordpress zip file due to github permission
- Since Storyboard PSD file too big, please download it on google drive and link is provided in forum
- Since source on github could not be accessed, please downloaded Latest wordpress theme source in forum
- Header, main navigation, and footer should be as existing theme. We will update them on next phase
- Premium (purchased) font on storyboard, (i.e : Myriad Pro) should replaced with existing web font
- All content should be editable in wp admin
- Responsive view should be handled on client side (css media queries) as existing page work
- All images should be treated as content and not a CSS image background
- Footer text and icon links should be editable in wp admin
- the solution will work responsively across devices and honor the existing framework installed with the theme
- the page requirements are relatively not hard, please note to pay attention to the submission deliverables below
01. Stories Page
current page : none
Storyboard : 03A-stories-desktop.psd, 05.Stories-Tablet.psd, 05.Stories-Mobile.psd
- Featured story should be managed easily from wp-admin, you may manage this as a category
- Please add new custom post type to manage the stories
- Please add pagination below story list. it is not exist in storyboard, so please create a looks and feel buttons
- Get started button should link existing get started page
02. About Page
Storyboard : 04-JM_About-Desktop.psd, 06_About-Mobile.psd, 06_About-Tablet.psd
- Any text, including heading should be managed from wp-admin
- Any graphic (including as background) should managed from wp-admin
- Any graphic (i.e : smartwatch image) which as background should be fluid any screen resolution in order to prevent cut off effect if screen width bigger than 1200px
- Icons (gear, box, gallery icon) can be hardocoded in template as existing
- Get started button should link to existing get started page
- Learn more button should link to sub page
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
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
- Tablet browsers
- Mobile Phone browsers
- Latest Safari Mac & PC
- Latest Chrome Mac & PC
- Latest FF Mac & PC
- IE9+
Final Submission Guidelines
- A zip file contain a wordpress theme, exported data, and deployment guide
- 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.