![Fueled](https://fueled.com/assets/images/logo.png)

# Frontend Dev Challenge

## Contents
- [Premise](#premise)
- [Submissions](#submissions)
  - [Week 1 – Dark/Light UI Toggle](#week-1)
  - [Week 2 – Public API Consumption](#week-2)
  - [Week 3 – Web Drawing](#week-3)
  - [Week 4 – Loader](#week-4)
  - [Week 5 – A-Frame](#week-5)
  - [Week 6 – Global Navigation](#week-6)
  - [Week 7 – eCommerce UI](#week-7)
  - [Week 8 – Less is More](#week-8)
  - [Week 9 – Recipes Shmecipes](#week-9)
  - [Week 10 – React Buttons](#week-10)
  - [Week 11 – Happiness](#week-11)
  - [Week 12 – React APIs](#week-12)
  - [Week 13 – CSS Houdini](#week-13)
  - [Week 14 – Kitchen Appliances](#week-14)
  - [Week 15 – Animate Text](#week-15)

## Premise

For some time the Design Team at [Fueled](https://fueled.com) have had a fortnightly Design Challenge, whereby a loose brief is given to each member of the team and a two hour window in which to create something fitting. As the frontend team has grown at Fueled, it felt like the right time to start doing something similar… and so was born the Frontend Dev Challenge.

It follows the same format: a loose brief is given to the team on a Friday (with the briefs being decided by any of the team with a suitable idea), between Monday and Wednesday we build our solutions, and then on our weekly team call we each present our submission providing rationale and opening up a discussion – typically people talk about the bits they enjoyed, found tricky, and areas they’d have further elaborated on if they’d had the time.

If this sounds like the sort of thing you’d relish doing and you think you’d be a good fit for the Frontend team at Fueled, then get in touch, [we’re hiring](https://fueled.com/jobs)!

## Submissions

### Week 1

**Dark/Light UI Toggle** Create a toggle to switch between dark and light, or day and night mode.

[Full collection →](https://codepen.io/collection/AMojbZ/)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-1/)

### Week 2

**Public API Consumption** Find a Public API of your choice [from this](https://github.com/toddmotto/public-apis/blob/master/README.md) list and render it however you see fit.

[Full collection →](https://codepen.io/collection/nWOjMd/)  
[Timo’s submission →](https://timo-jj.github.io/#/api-fetch)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-2/)

### Week 3

**Web Drawing** Using only HTML, CSS and JS create a 2D scene of your choosing. You may not use images (this includes inline/encoded SVGs). Bonus points for animation!

[Full collection →](https://codepen.io/collection/XLMjgQ)  
[Timo’s submission →](https://timo-jj.github.io/#/scene)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-3/)

### Week 4

**Loader** Create a loader for an action of your choice, the snazzier the better!

[Full collection →](https://codepen.io/collection/DdVMgr)  
[Timo’s submission →](https://timo-jj.github.io/#/loader)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-4/)

### Week 5

**A-Frame** Explore the A-Frame framework, using the two hours to try out areas of the documentation to create something.

[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-5/)

### Week 6

**Global Navigation** Create a global site navigation element that contains a logo, at least 5 links (of which 2 must have sub items), and a CTA of your choice.

[Full collection →](https://codepen.io/collection/nYzxJj)  
[Timo’s submission →](https://timo-jj.github.io/#/nav)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-6/)

### Week 7

**eCommerce UI** Create a piece of UI for an eCommerce website. This can be literally anything you want as long as it relates to eCommerce.

[Full collection →](https://codepen.io/collection/XRLerr)  
[Timo’s submission →](https://timo-jj.github.io/#/ecom)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-7/)

### Week 8

**Less is More** Build a landing page with a minimalist focus.

[Full collection →](https://codepen.io/collection/XmBkMQ)  
[Timo’s submission →](https://timo-jj.github.io/#/less-is-more)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-8/)

### Week 9

**Recipes Shmecipes** Use the [HTML provided](https://codepen.io/harrietmcmahon/pen/mYPmJN?editors=1000) to stylise this banana bread recipe, you may only make changes to the HTML to add classes.

[Full collection →](https://codepen.io/collection/XgGxBq)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-9/)

### Week 10

**React Buttons** Using React, create a button component that has a minimum of 3 unique props – displaying a range of combinations within the #root component.

[Full collection →](https://codepen.io/collection/DPJKyL)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-10/)

### Week 11

**Happiness** Without changing anything in the HTML, style [this article](https://codepen.io/dope/pen/jogWWW) on happiness.

[Full collection →](https://codepen.io/collection/XwzqYL)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-11/)

### Week 12

**React APIs** Building on [Week 2](#week-2), create a React UI that consumes an open API.

[Full collection →](https://codepen.io/collection/XbozmE)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-12/)

### Week 13

**CSS Houdini** Having seen CSS Houdini demonstrated at JAMstack_conf_london by Una Kravets, explore the Paint Worklets API.

[Full collection →](https://codepen.io/collection/DQqkJb)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-13/)

### Week 14

**Kitchen Appliances** Create a kitchen appliance using just HTML, CSS, and JavaScript.

[Full collection →](https://codepen.io/collection/DKEvzK)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-14/)

### Week 15

**Animate Text** Short and sweet… animate text.

[Full collection →](https://codepen.io/collection/XpWzQo)  
[Blog post →](https://fueled.com/blog/frontend-dev-challenge-week-15/)