The non-profit association Front End Development South Africa (FEDSA) organises mentoring sessions for aspiring developers. As part of this programme, I worked on a project to build the front page of a fictitious furniture company.
Stack used: HTML - CSS - JavaScript - Figma - Netlify
There were detailed instructions for the assignment, in the form of a kanban board with cards for each feature.
- The design was given in the form of a Figma file - see a PDF version of it in the root folder of this project.
- The page had to be built mobile-first, with media queries to adapt the design to larger screens.
- The product data is rendered dynamically, based on an API fetch to the 'backend' of this fictitious company.
- Clicking the shopping basket of one of the items updates the cart total at the bottom of the page.
- Clicking the heart icon on one of the items updates the icon to show as liked.
- I used the kanban board to track my progess on the project, creating a new branch for each feature and submitting pull requests to the Github repo upon completion.
You can view this project live at: https://ricca.netlify.app/. To play around with the code yourself, follow these steps:
- Open Git Bash.
- Change the current working directory to the location where you want the cloned directory.
- Type
$ git clone https://github.com/tamiragun/Ricca.gitand hit enter. - Open the index.html file in your browser.
Huge thanks to Martin Kruger (@martink-rsa on Github) for putting together the project, the instructions and demos, and for his in depth code review after I finished the project. Thanks also to FEDSA for the mentoring series.