Register
Submit a solution
The challenge is finished.

Challenge Overview

CHALLENGE OBJECTIVES
  • Wordpress Theme Build
  • Focus on Desktop only, but need able to support responsive on the next challenge
  • Create some new pages based on existing page template with different content

PROJECT BACKGROUND
The primary objective of this challenge is to create a wordpress theme based on the provided storyboard design and requirements outlined in the Challenge Details section.

TECHNOLOGY REQUIREMENTS
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, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, it's categories, and more.

Theme Build References:
Tutorial- Building Custom WordPress Theme:
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme
https://wpdesigner.com/so-you-want-to-create-wordpress-themes-huh/

The WordPress Codex (a guide to template tags)
http://codex.wordpress.com/

Wordpress Developers
https://www.smashingmagazine.com/2012/08/how-to-become-a-top-wordpress-developer/

GENERAL REQUIREMENTS
  • The following list are required as part of this challenge submission
  • Provide ALL installation step by step, create details notes needed for your WordPress Theme
  • Your Wordpress theme need support responsive on desktop, tablet and phone layout
  • For tablet, use fluid width based on phone layout
  • Your pages must match the colors and structure of the provided storyboards.
  • Ensure your pages display correctly in all browsers.  It is your responsibility to make sure the pages display correctly.
  • Ensure you submission clear of HTML and CSS Validation error and warning.
  • Create a Theme based on the provided Storyboard PSDs and existing WordPress Theme.
  • Embedded provided fonts using media query
  • All content (headings, footer, text, etc...) should be dynamic and editable via the WordPress Admin backend.
  • There are some images that should be considered as content, make sure they are not css backgrounds nor hard coded in the template.
  • DO NOT just create static HTML/PHP templates and have them served up by WordPress - you much create the Admin functionality
  • Only use custom fields when appropriate. Do not over use them. It is advisable to use Custom Field Template plugin if in case you use custom fields. We want it to be easy for a non-technical editor to update content on the pages, so as much as possible the pages that are relatively simple content should be editable by updating the page content.
  • A user should be able to edit the site without the need of an Super Admin privileges

INDIVIDUAL REQUIREMENTS
1. Landing Page
Screenshot: 01 - Acme Inc Hub home.jpg
  • Background image need cover whole browser screen
  • You can use parallax effect when scrolling the main content area
  • You can set main content area to use min-width on desktop layout and make it appear on center alignment
  • Client logo need always take user to the landing page
  • Header bar need to be fixed on top
  • Header and footer navigation should utilize the built-in menu of wordpress
  • Create active/inactive state when user navigate to any pages
  • Menu on header bar need support sub-menu
  • When user scrolling the page, menu navigation need use different color and remain fixed on header bar (Screenshot: 02 - Acme Inc Hub menu scroll down.jpg)
  • When reach the top of page, need revert back to the original color.
  • This is example sub-menu on Our Services (Screenshot: 03 - Acme Inc Hub menu displayed.jpg)
  • Need able to set the icon, text and url for each sub-menu

Required sections need to build:
  • Welcome Graphic
    • Need way to upload background image
    • Need able to edit Welcome message & Description
    • Need able to set url/link for the Watch Video or Contact Us buttons
    • Watch video need load the modal window
    • Contact us button should scroll user to correct section below
  • Our Services
    • Need able to modify the title and set url/link for the action buttons
    • Need way to replace/upload icon
    • Need able to add more link
    • Click this need scroll to the related section below
    • Use smooth animation
  • Cyber Fusion
    • Need able to change title and description
    • Need able to change title and description alignment
    • Need way to upload background image
    • Need able to add/change icon, description, rating star, rating number inside the boxes
    • Need able to set number of boxes need displayed in section
    • Need able to set the alignment of the boxes to left or right side
    • Solutions, Enterprise Command & Service Capability
    • Basically all these sections need use same component like Cyber fusion
    • On your submission re-use same component that follow storyboard content
  • We value your feedback
    • Need able to set feedback title
    • Need able to set user image, photo, section, star rating, rating number.
    • Feedback can use WYSIWYG editor
    • Need display 3 boxes at a time
    • Need able to set auto slide, time before transitions
    • Dot marker on the bottom need auto-calculate number of slideshow page
  • Contact us
    • Build this form to be able to send data to Wordpress
  • Footer
    • Need able to change the client name
    • All social icons need to be centered and need able to set the url
    • Footer links placed below social icons
    • Need able to edit copyright text


2. BISO Hub Page
Screenshot: 04 - BISO Hub page.jpg
  • This is example look and feel for Our Services detail page
  • We need make all component re-usable when create another pages

Required panes/sections need to build:
  • Welcome Graphic
    • On top need quickly change the sub-page using dropdown menu
    • Need able to change page icon, title, description
    • Watch video need load the modal window contains the video url
    • Write feedback button should scroll user to correct section below
  • Our Mission
    • Content can use WYSIWYG editor
  • Who we are
    • Need able to change title and description
    • Need able to title and description alignment
    • Need way to upload background image
    • Need able to set the alignment of the boxes to left or right side
    • Content can use WYSIWYG editor
  • What we do
    • Need able to change title and description
    • Content can use WYSIWYG editor
    • Need way to change background color
    • Need able to change the icons and title
  • How we do it
    • Basically this section need use same component like Who we are
  • Questions & Enquiries
    • Need able to set the all email links
    • Click each links need open the email app
  • Feedback on BISO Services
    • You can re-use same component like on the homepage
  • Ask us anything or write feedback
    • You can re-use same component like on the homepage


3. Create another pages based on spreadsheet
Spreadsheet: https://docs.google.com/spreadsheets/d/1HE7FBrDUS3DNv78GI7xLWBghUiWTMJLAUw-EF1WzCJI/edit?usp=sharing
  • Create all pages based on all tabs inside the spreadsheet above
  • Make sure all links from the sub-menu navigation take to correct pages (Screenshot: 03 - Acme Inc Hub menu displayed.jpg)
  • In some page we need use different images and icons. Please use the separate images and icons from here: https://drive.google.com/open?id=178fQs0ypMhcq2FmUTVuiLtPyjPIN_3oU
  • We will re-use the same layout like BISO Hub page
  • IMPORTANT: Use same title like on spreadsheet.
Required pages are:
  • Cyber Fusion
    • Cyber Fusion Center
    • BISO Hub
    • Security Education & Awareness
    • Security Engineering
    • Security Services
  • Solutions
    • Cloud CoE
    • Workforce Experience
    • Architecture & Design
    • Crowdsourcing
  • Enterprise Command
    • Enterprise Command Center
    • Technical Assurance
    • Service Integration
    • Data Center Services
  • Service Capability
    • Comms & Capabilities
    • Transformation Office
    • Project Services
    • GSE (Op Ex)
    • IT CH


Final Submission Guidelines

FORM FACTORS
Please make sure your design supports these form factors:
  • In-scope
    • Desktop
  • Out of scope
    • Tablet portrait and landscape
    • Mobile landscape

BROWSER REQUIREMENTS
  • IE11+
  • Latest Google Chrome (Windows & Mac OS)
  • Latest Safari (Windows & Mac OS)
  • Latest Firefox (Windows & Mac OS)

ENVIRONMENT REQUIREMENTS
  • localhost
  • Azure Site

DEVELOPMENT ASSETS
Design Source on Gdrive: https://drive.google.com/open?id=1XmrlRmQa7GrEl5YvtvRoQ1zX_SotpDGt
Images & Icons: https://drive.google.com/open?id=178fQs0ypMhcq2FmUTVuiLtPyjPIN_3oU
MarvelApp Handoff: https://marvelapp.com/bj4e7ae

TECHNOLOGY STACK
The following technology stack will be used as part of this challenge.
  • PHP
  • HTML
  • CSS
  • JavaScript

SCORECARD REVIEW
FINAL DELIVERABLES
  • All original source code.
  • A brief write up explaining how to build, configure and deploy your code on Azure
  • Provide sample url of your application demo on Azure

ELIGIBLE EVENTS:

Topcoder Open 2019

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30092105