🎁 build

Iterating on your product, adding new features and expanding your codebase

Building your project πŸ”—


Why are we doing this?

Thinking back to Fundamentals, we develop products through iteration. We don’t build everything all at once, we add features over time. So let’s embed that practice now by:

  1. extending the homepage by adding a new block to it.
  2. adding a new store page that allows users to buy a Karma device using an order form.
  3. connecting the 2 pages together by adding navigation

You are NOT required to make this page work on mobile devices! ;)

Stretch goals

The radio buttons and checkbox in the design require some advanced CSS to follow the design while still using the native functionality of these inputs. Try and give it a go, but don’t lose sleep over it if you don’t manage! This is challenging and will require some research.

Maximum time in hours


How to submit

  • Remember to commit and push your code often. Don’t git add . Make sure you know what you are putting in your codebase.
  • Once you’re ready for review, do a final push and create a Pull Request.

Note: If you’ve added your code to the same branch you were using last week, then it will just update your original Pull Request and you won’t need a new PR.

How to review

  1. Ask for review from a classmate or mentor, clearly describing what you are looking for
  2. Make changes based on their feedback
  3. Review and refactor again next week

Anything else?

You’ll find the designs at the following Figma links:
HOMEPAGE - New section: https://www.figma.com/file/BPtLAPr1HhwQdNfxGyFouo/Karma-design?node-id=23%3A0
STORE - New page: https://www.figma.com/file/BPtLAPr1HhwQdNfxGyFouo/Karma-design?node-id=858%3A3

You can apply for a free Figma for Education account using your trainee subdomain email.

  • 🎯 Topic Iteration
  • 🎯 Topic Requirements
  • πŸ• Priority Mandatory
  • πŸ¦‘ Size Large
  • πŸ“… HTML-CSS
  • πŸ“… Week 2