Challenge Overview
Competition Details
We have created an HTML prototype for a project called CCCS that we are providing for this challenge. In this challenge we are looking for you to convert this prototype into a Drupal Theme using the Drupal template and content management features.
Make sure all pages (2) in the provided prototype are converted and all the features including responsive functionality is still working correctly as the provided prototype. All pages should look the same after converting to drupal.
Make sure you only use the javascript libraries already used in the prototype. If you need to use something else make sure to check with us in the forums.
Detailed Requirements
1) Page Type: Home Page (desktop and mobile)
- News Ticker: Text (limited), Date, and Link to full content.
- Phone: Text
- Login link and Search box.
- Header: Menu and sub menus (dynamic), Logo needs to be image and replaceable.
- 1st Carousel (Main): Main image carousel, 3 Big button below (text).
- 2nd Carousel: Images and link below
- Upcoming Event: Event headline (image, date text, title link), event list (date text, icon, and title link)
- Blog Articles: Blog newest (image, date, summary of content), blog list (date, summary of content link)
- Video Highlights: 2 Videos (video, Title, subtitle, content)
- Summary Area: 3 Icons and 3 Text
- Tools and Resources: Button and link
- Social Media: Button icons
- Stay Connected: email textbox
- Footer Top: Text and list of images for partners
- List of Links: Link
2) Page Type: Webinar Page (desktop and mobile)
- Phone: Text
- Login link and Search box.
- Header: Menu and sub menus (dynamic), Logo needs to be image and replaceable.
- Title of Page
- Page Category
- Breadcrumbs
- Summary Text
- Category Content: Icon, Title, Link, Summary of category, Type of events, Scheduled Timeline table of event (Date, Time, Location and Sign up Link)
- Right sidebar, Title (webinar calendar), image and Date, icon, details date and title
- Right sidebar, List of event each month (based on content)
- Summary Area: 3 Icons and 3 Text
- Social Media: Button icons
- Stay Connected: email textbox
- Footer Top: Text and list of images for partners
- List of Links: Link
Technology Overview
- Drupal
- HTML
- JavaScript
Documentation
- Prototype is provided in the challenge forum
All About Drupal!
Drupal (official Drupal website) is an open source content management platform. It is customizable, and can be used to organize, manage and publish content. Drupal is maintained and developed by a community of hundreds of thousands of users and developers. A Drupal theme is a collection of files that define the presentation layer.
Drupal theme UI Prototype challenges are similar to regular UI Prototype challenges in many ways, but there are some key differences:
- Drupal theme UI Prototypes are created using PHP, HTML, and CSS (Similar to WordPress Challenges)
- Drupal themes must follow specific rules set by Drupal (such as naming conventions and folder structures).
Getting Started with Drupal
If you're new to Drupal, a good introduction is available on the Drupal.org: Get Started page. Below are some additional Drupal related links you may find useful for competing in Drupal theme UI Prototype challenges:
- The Drupal Cookbook (for beginners) - A guide created by the Drupal community that explains the basics of Drupal and a common Drupal setup. Alternatively, you can watch a video walk-thorough called Drupal Cookbook for New Drupallers.
- Drupal.org Theming Guide - This is the official theme documentation page from Drupal.org. It explains everything you need to know about creating Drupal themes. You'll find links to the latest Drupal.org theming resources on this page.
- Video Tutorials: Drupal Theming Essentials - A set of 13 video tutorials to learn about Drupal themes.
- Installing New Drupal Themes - An article that explains the basics of installing a new Drupal theme. This information is particularly helpful for reviewers since each Drupal theme UI prototype submission will need to be installed during the review process.
Tutorials to Create a Drupal Themes
How to Create a Drupal 7 Theme from Scratch - A detailed tutorial that takes you through the steps of creating a Drupal 7 theme from scratch.
Drupal 7 - How to create a Custom Theme - A shorter tutorial that explains the basics of creating a custom Drupal theme from scratch.
Final Submission Guidelines
Submission Deliverables
- The prototype recreated using Drupal Templates and Drupal Content Management features.
- A deployment document explaining how to deploy the prototype and test it.
Final Submission
For each member, the final submission should be uploaded to the Online Review Tool.