View Live
Mock up of website
example set of used things
Project 2 (Requirements)

  1. Create a template for the site that contains the following pages and sub-pages (minimum of 6 pages and sub-pages and then a set of sub-sub-pages):
    • A Homepage that matches the mock-up.
      (See Picture)
    • Sub-pages that feature the content contained in each bucket with sub-navigation that leads to more pages in that folder. You can review the current site (https://www.baptistcommunicators.org) for content for each of these sub-pages. You should choose one of these sub-pages and develop out the content for it.
      • About
      • Membership(includes a responsive video embed)
      • Awards
      • Workshop
      • Fall Forum(sub-pages include multiple responsive video embeds)
  2. Each page should contain unique title tags and unique keyword and description meta tags. Link to ONE external CSS file that contains your customized styles in addition to the Bootstrap CSS file. Make sure that you link to all three Bootstrap JavaScript files below the footer.
  3. Each page should include a consistent design and navigation in the header (Bootstrap navbar) and footer (Bootstrap grid). Use the bolded text above for navigation (except for Home - link from main BCA logo). Make sure that you apply the active class to the navigation element when on those pages. Feel free to include sub-pages in a drop-down, if desired.
  4. Each page's content area/sub-navigation should use HTML5 structuring tags (section, article, aside, etc.) and be based upon the Bootstrap 12-column grid - so all content should appear within a column that is contained within a row.
  5. Use the Google Font family of Muli (Links to an external site.) to match the selected fonts for each heading level and paragraph text. Make sure that you use the Customize feature on Google Fonts to get each font style listed in the graphic above. Use the @import feature to add these fonts to your external style sheet.
  6. Create a Contact Us page linked from the footer that includes a form (make sure that you include an action and a method). It should employ client-side validation (includes CSS color-coding for inaccurate values), and it should use Bootstrap’s Horizontal form layout (Links to an external site.) with the following fields:
    • Fieldset with the legend “Your Information”
      • Last Name (max size: 50; required; text)
      • Email (max size: 50; required; email)
      • Phone (max size: 50; tel; use regular expression)
      • Organization Type (values include National Agency (pre-selected), State Agency, Association/Church, Educational Institution, Freelancer; radio)
    • Fieldset with the legend “Request Details”
      • I'm interested in the following: (values: Membership, Annual Workshop, Fall Forum, Awards Competition, Scholarship; drop-down with size of 5 and multiple selection)
      • My interest level (1-10; starting value of 5; range)
      • Question (required; textarea)
    • Digital Signature (max size: 50; required; text)
    • Submit Request (submit)
  7. This site should be designed for the mobile web. Your design will be viewed above and below the following breakpoints: 576px, 768px, 992px, 1200px. All items should be viewable within the viewport at each size. Responsive Bootstrap navbars should be used, and any tables used should be fully visible within the viewport at all levels. Use the responsive table technique described at the end of the Tables tutorial that utilizes data-tables for the New Members table required for this project (see number 9).
  8. Throughout the site, I’d like to see at least one example of a shadow (box or text), a gradient (linear or radial), a transform (2D or 3D), a perspective, and a filter.
  9. Create a table for New Members that will be a sub-page of Membership. You should get the content from http://www.baptistcommunicators.org/membership/new-members.cfm (Links to an external site.). The table should have an accurate summary, a caption, a colgroup with at least two cols, and row groups (thead, tfoot, and tbody). Make sure that you mark table headers and table cells correctly.