This challenge will have the intern build a site navigation driven by an AJAX request.
Here are the guidelines for this challenge, please follow closely:
- No javascript frameworks or libraries (e.g. jQuery, Angular, React).
- Only CSS, not pre-Compilers (LESS, SASS) or mixin libraries (Compass, Bourbon, Neat, Foundation, etc.)
- Chrome compliance is all that's required.
- Code must run after the following command.
- Page should look good across desktop devices.
$ npm i && npm start
Nice to haves:
- Adherence to accessibility standards
- GET /api/nav.json - returns a JSON response representing the items in the nav.
- Node.js and npm (You get both when you install Node.js.)
git clone -v https://[email protected]/scm/bd/html_javascript_internship.git
#git clone https://github.com/felipevila/basic-fe-challenge.git
cd basic-fe-challenge
npm install
npm start
Measurements are specified in pixels. Dimensions are fluid unless specified.
- On hover, Primary Navigation reverses color (white/orange).
- On click, if item contains a URL, Primary Navigation navigates to a new page.
- On click, if item contains other items, Secondary Navigation appears
- Menu appears containing Secondary Navigation.
- Translucent mask appears over content, behind menu.
- On click, Secondary navigates to a new page.
- On click outside of menu, menu and mask are hidden.
- Primary Navigation 21/48 HUGE Avant Garde Bold
- Secondary Navigation 16/48 Galaxie Copernicus Book
- Headline (Desktop) 120/132 HUGE Avant Garde Bold
- Body Copy (Desktop) 24/36 Galaxie Copernicus Book
- Headline (Mobile) 44/48 HUGE Avant Garde Bold
- Body Copy (Mobile) 14/24 Galaxie Copernicus Book
- Copyright (Mobile) 12/16 Helvetica Neue Regular
- Endava Orange #ff3f10
- Light Gray #eee
- Translucent Black rgba(0, 0, 0, 0.5)