DanielBabcock / hca-uxcoe-prototype

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HCA User Experience Center Of Excellence | Front End Design Exercise

Objective

The purpose of this exercise is to get a basic understanding of your skill level, how you organize your code, and how you make coding decisions.

Instructions

Please build the design comp provided (design.png) into a functioning, responsive web page using our requirements from the Build Page Checklist section below. Feel free to take your own liberties as far as interactions/animations, and making the site responsive.

Colors, Typographic styles, and some component styles have been taken from the HCA Design System. Please use this resource for direction: http://hcadesignsystem.com/

Please do not use any external links (including CDN's).

We understand that in development, there are many schools of thought when it comes to coding best practices and that those ideas are constantly evolving. No need to overthink if you are coding “the right way.” We are looking for standard web best practices and the ability to explain coding decisions made.

Feel free to use placeholder text (such as your favorite version of Lorem Ipsum) and images (such as http://placehold.it/).

Feel free to add comments within the code or attach a text document to explain any decisions made that may be of interest.

Build Page Checklist

Please include the following items in your code:

  • Latest Bootstrap library

    • Use of grid
  • Multiple headings to show use of the HTML header hierarchy

  • At least one button

  • At least one glyphicon (the icons available in Bootstrap) and add a hover effect "Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from." https://getbootstrap.com/docs/4.3/extend/icons/#more-options

      Daniel: To get around this I downloaded fontawesome and referenced it's all.js file
      so I wouldn't be using external links.
    
  • Some content in an aside or sidebar element

  • An address and phone number (doesn’t have to be real contact information)

  • Use the following features of the LESS or SASS languages:

    • Variable
    • Mixin
    • Import
  • Trigger a bootstrap modal using javascript
  • Inject content to DOM Elements using javascript i.e Lorem Ipsum

Exercise Submission

Completed services should be submitted in one of two ways:

  • Online repository (such as GitHub or BitBucket): create a repository under your account named "hca-uxcoe-prototype"
  • Zip files (where files are all connected and can be viewed in browser from an index page); so if libraries are used, include them in the submitted zip file.

Submit the repository link or zip file to the same email address that sent you the test.

Thank You

Thanks for taking the time to complete this exercise!

About


Languages

Language:CSS 80.1%Language:JavaScript 17.2%Language:HTML 2.7%