Your assignment for this challenge is to build an HTML page for a given mockup and style it with CSS. For this, you team up with a colleague.
Once you've finished, compare and discuss your result with the other teams and learn from each other.
That's about it. Simple, isn't it?
And to be clear, there's no hidden agenda here, no rabbit along the way. I just think it's interesting to see how other front-end developers build and style pages and organize their code. And I bet, no matter your personal skills, you can learn from this challenge as well.
The challenge is divided into several iterations (currently 4). At the beginning of each iteration the assignment is provided. Every iteration you will get new requirements for the page you're building. Some changes are small, others may have more impact on your architecture or the visual end result.
Next to your job to build a page, you should also need to document:
- your workflow
- important decisions in your architectural design
- the tools you're using (e.g. editor, browser extensions)
- sites you think that are worth mentioning
- etc.
The total amount needed to finish each iteration surely depends on you skills and the quality you try to achieve, but we think 3-4 hours for each iteration would be feasible.
After completing the challenge, we have scheduled a final event where every team will present her product. Tell us about what you have learned (or what you haven't) and the stuff you documented (see above) in about 15 min.
Finally we discuss each other findings and who knows, maybe we can come up with some best practice, reusable components or lessons learned you will apply in your next project.
If you think you need some more challenge, you can define your own goals. This can be anything that is related to this challenge, for example:
- Try to implement something you always wanted to use
- Write unit tests for CSS
- Create/generate a styleguide
- Analyze the loading speed of your page
- etc.
Define the goals in a clear way and include them in the final presentation.
Remember that extra goals are extra, so make sure you finish the assignments anyway and don't swap them with your own goals.
- Team up with a colleague or work alone (although the latter is not encouraged). It's not relevant what skills any of you've have, as long as you how to build a page in HTML and CSS.
- Use the tools you prefer. As long as your product ends up as a web page, anything is allowed.
- Make sure you're in the office when you work on your assignment. This is important because we think this is a good way to share as much knowledge as possible. It's a challenge, no competitions and you're even encouraged to help others or ask others to help you.
- When you love to join, but you're not able to attend (some or all events), please contact you team coach.
- Only start with the next iteration, when you've finished the current one. Although you might have access to all iterations, it's fair to pretend you're working for a customer that changes requirements along the way you're currently not aware of.
- Put your project up on GitHub.
- Working 'pixel perfect' is allowed, but not required. Rather be consistent.
Spoiler alert: this paragraph contains links to the actual assignments. Make sure you only click them when you're asked to start working on them. Only then you have just enough information to succesfully build a realistic product.