|
| 1 | +# 10up Front End Engineering Technical Challenge |
| 2 | +Your mission to create a basic web page layout from the attached design. The purpose of this exercise is to test your HTML, CSS, and JavaScript skillset through the lens of maintainability, responsiveness, accessiblity, performance, design integrity, and general attention to detail. |
| 3 | + |
| 4 | +While we are only providing larger screen high fidelity mock ups, we expect you to implement a fully responsive layout using your best judgement. We believe that finely crafted web designs comes to life in the browser, not in static mock ups, and we'd love to see how you approach design implementation choices in the absence of a complete articulation by a visual designer. |
| 5 | + |
| 6 | +Our more senior Front End Engineering roles at 10up also carry an expectation of _basic_ WordPress theming capabilities. If you are seeking a more senior position, please prepare your exercise as a basic WordPress theme that we can activate. We are _not_ looking for each component of the page to be fully editable or custom blocks, or for the ability to create other pages or content beyond the home page. Rather, we expect some basic data to be provided by WordPress (e.g. the title tag), and some more routine content like the navigation menu to be managed by WordPress. The home page content itself can otherwise be assumed to be static. |
| 7 | + |
| 8 | +__Please do not use a starter theme or WordPress' full site editing to complete this exercise.__ While we will sometimes use internal frameworks and starter themes inside 10up, we ideally want to gauge your ability to architect every aspect of the layout. We expect you to include php partials, javascript and css files and represent these files in a way you would for a larger scoped project. |
| 9 | + |
| 10 | +Otherwise, use your best judgement when it comes to any decisions or requirements not defined in this exercise, including potential modules, libraries, or frameworks used to create the interface, so long as you reasonably adhere to modern front end best practices. |
| 11 | + |
| 12 | +Please keep track of your time (at least loosely), as we'd like to understand roughly how much effort went into your outcome and make sure that we aren't overwhelming candidates with our exercises. If you don't have time to finish every aspect of the project, just make sure the parts you do finish are complete and set our expectations – it's perfectly fine to simply describe a few changes / enhnacements you're aware of that you'd work on with more time. |
| 13 | + |
| 14 | +Please include all source and build process configuration files in your submission. |
| 15 | + |
| 16 | +## Fonts |
| 17 | +Montserrat: https://fonts.google.com/specimen/Montserrat |
| 18 | +Cousine: https://fonts.google.com/specimen/Cousine |
| 19 | + |
| 20 | +### Sizes |
| 21 | +- Hero Heading: 64px |
| 22 | +- Content: 20px |
| 23 | +- Buttons: 20px |
| 24 | +- Menu Items: 28px |
| 25 | + |
| 26 | +## Colors |
| 27 | +- #081523 - Content text |
| 28 | +- #01FDAB - Hero eyebrow text |
| 29 | +- #0262F0 - White panel eyebrow text |
| 30 | +- #010203 - Menu and footer background |
| 31 | +- #091523 -> #0E253F - Hero background gradient |
| 32 | + |
| 33 | + |
| 34 | +## Assets |
| 35 | + |
| 36 | +Desktop comps are located in `/designs`, icons are in `/icons` and images are in `/images`. |
| 37 | + |
| 38 | +If you have any questions or get stuck, please reach out to the 10up Recruiting team. |
| 39 | + |
| 40 | +Good luck! |
0 commit comments