Music Browser
The Brief
Music Browser is a fictional music discovery and news platform aimed at music enthusiasts. The "website" is intended to allow users to view articles on new music, discover emerging artists and view trending songs curated by users.
Instructions
This repo is intended as a training tool and skills assessment that mimics a typical workflow. Provided are PSDs for mobile and desktop. You will be expected to use these to build a responsive page, utilizing HTML5, CSS3 (Sass) and JavaScript.
Requirements
- You may use Modernizr and/or Selectivizr, but other libraries (jQuery), frameworks (Backbone.js/AngularJS), or plugins are not permitted.
- You are encouraged to use CSS preprocessors like Sass, but it is not permitted to use any prebuilt grid systems or frameworks (Bootstrap/Foundation).
- You will be required to write JavaScript to allow for functionality changes between viewports (showing/hiding of content and/or navigation elements). Refer to the PSDs to determine where JavaScript functionality is necessary and implement where necessary.
- Comment your HTML, CSS and JavaScript where necessary.
- Write useful commit messages.
Considerations
Design
Your completed page should match the design as closely as possible. The page should be completely fluid, i.e., the page does not break when moving between mobile and desktop breakpoints.
Take into consideration that the PSDs have been designed for retina displays and size your assets accordingly.
Standards Compliance
Ensure that your markup is W3C compliant.
HTML Semantics
Ensure that your markup is semantic.
Accessibility
Ensure that your markup takes into account basic accessibility (WCAG 2.0) standards.
CSS (Sass)
Sass is encouraged when writing your CSS. Try to demonstrate how preprocessors can be used in your development workflow to enforce DRY (Don't Repeat Yourself) principles.
JavaScript
Ensure to write clean, structured JavaScript that you feel would be suitable for a live website.
Build Tools
You may use build tools such as Grunt or Gulp to compile, minify, or other common tasks. If minifying your code, please ensure to also include the source files for inspection.
Browser Support
The page should function and resemble the creative in all latest desktop/mobile browsers.