Front-end developers need to continually look for opportunities to grow stronger and learn to code better. These challenges are designed to test and build your abilities as a front-end developer starting from build systems to complex animation effects and beyond.
A challenge that all front-end developers face is finding the opportunity to learn new development practices and develop on a new platform than their current job allows. While sitting in my home office one day I tried to find a good way to build the skills of my own team through collaboration, code consistency, and overall to teach them how to code better each day by looking for opportunities to grow by finding ways to optimize their own workflows. When I started writing the first few code challenges it became clear that this should be a project that continually grows.
Each week I will release a new code challenge for a full 52-weeks with the intent of growing a particular front-end skill along the way. The added benefit of using Github for this is that it will help you understand the basics of Git through the use of forks, syncing upstream remotes, and so on. While using Git via Terminal is not a requirement it is recommended and will help any front-end developer better understand the benefits and basics of version control.
You will notice that the first challenge is labeled challenge-0 and this is because the first challenge is to create a build system using Gulp, Grunt, or Node directly which will be used for all the other challenges.
Each challenge is designed to test and learn a different aspect of front-end development in on open-source collaborative environment. Take some time each week and complete one challenge, which can be completed individually or as a team to help increase the collaborative environment at your work and promote a stronger development community.
As you progress through each challenge some areas will challenge you to expand your existing knowledge of development and hopefully help you become a better developer. For my own team we are taking the opportunity to code each challenge separately, then coming together as a team to see how each one of us approached the challenge to help us all learn from each other. No one person has the best and only solution, but together we can be better developers.
There are a few requirements for every challenge or constraints aimed to break you out of your comfort zones.
- All code must be written in vanilla Sass (SCSS) and JavaScript. Please DO NOT use any code libraries for the challenges.
- You can use any build system you currently use or you can use a different build system for each challenge. Got a try the all!
- Have fun and learn!
Note: To take the challenge simply fork the repo and start coding. Please do not submit any completed code challenges via a pull request. The point of the challenges is to help you be a better developer and you or your team will be the judge of a success for each challenge.
- Challenge 0 - Construct a Build Tool
- Challenge 1 - Icons
- Challenge 2 - Typography
- Challenge 3 - Colors
- Challenge 4 - Sized Banners
- Challenge 5 - Site Header
- Challenge 6 - Summary Card
- Challenge 7 - Pricing Table
- Challenge 8 - Messaging
- Challenge 9 - Partials
If you have an idea or an area you would like to see covered in an upcoming challenge, please fork the repo and put in a pull request with your challenge. Each challenge will be evaluated based on the following criteria:
- Provide a design composition of what the end result will look like. (No copyrighted material please.)
- A brief explanation of the challenge and a description of any interactions (ex. rollovers, transitions, animations, etc.).
- For interactions, we recommend that an animated GIF be provided showing the interaction to help the challenger know what to build.
- Other requirements needed to meet the challenge outside of the base requirements, such as, specific JavaScript coding methods, use a Sass
@forloop, etc. - A challenge must not be reliant on any code libraries and should be able to be completed using vanilla Sass and JavaScript.
- A challenge is meant to teach and be fun, please do not submit a real work problem that you need to see solved since no completed code will be merged back to this repo.
If there is a challenge that is unclear or contains errors please create an issue and we will get it resolved.