Frontend Dev Challenge
Contents
- Premise
- Submissions
- Week 1 – Dark/Light UI Toggle
- Week 2 – Public API Consumption
- Week 3 – Web Drawing
- Week 4 – Loader
- Week 5 – A-Frame
- Week 6 – Global Navigation
- Week 7 – eCommerce UI
- Week 8 – Less is More
- Week 9 – Recipes Shmecipes
- Week 10 – React Buttons
- Week 11 – Happiness
- Week 12 – React APIs
- Week 13 – CSS Houdini
- Week 14 – Kitchen Appliances
- Week 15 – Animate Text
Premise
For some time the Design Team at Fueled 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!
Submissions
Week 1
Dark/Light UI Toggle Create a toggle to switch between dark and light, or day and night mode.
Week 2
Public API Consumption Find a Public API of your choice from this list and render it however you see fit.
Full collection →
Timo’s submission →
Blog post →
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 →
Timo’s submission →
Blog post →
Week 4
Loader Create a loader for an action of your choice, the snazzier the better!
Full collection →
Timo’s submission →
Blog post →
Week 5
A-Frame Explore the A-Frame framework, using the two hours to try out areas of the documentation to create something.
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 →
Timo’s submission →
Blog post →
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 →
Timo’s submission →
Blog post →
Week 8
Less is More Build a landing page with a minimalist focus.
Full collection →
Timo’s submission →
Blog post →
Week 9
Recipes Shmecipes Use the HTML provided to stylise this banana bread recipe, you may only make changes to the HTML to add classes.
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.
Week 11
Happiness Without changing anything in the HTML, style this article on happiness.
Week 12
React APIs Building on Week 2, create a React UI that consumes an open API.
Week 13
CSS Houdini Having seen CSS Houdini demonstrated at JAMstack_conf_london by Una Kravets, explore the Paint Worklets API.
Week 14
Kitchen Appliances Create a kitchen appliance using just HTML, CSS, and JavaScript.
Week 15
Animate Text Short and sweet… animate text.