Link to the coursework
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:
- extending the homepage by adding a new block to it.
- adding a new store page that allows users to buy a Karma device using an order form.
- connecting the 2 pages together by adding navigation
You are NOT required to make this page work on mobile devices! ;)
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
- Ask for review from a classmate or mentor, clearly describing what you are looking for
- Make changes based on their feedback
- Review and refactor again next week
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