It's very rare that you will always start fresh when entering a web project. It's more likely that you will take over someone else's code, or work together to build more features. In today's assignment you will get thrown into an existing React project – the Technigo website!

The project was started by another developer, who made a start building some components, but never got around to finishing. We want you to continue their work by turning the navigation at the top of the page into a "hamburger" menu like you find on other sites.

This assignment is divided into three parts. Pro tip is to start to look through the reading list – it might come useful.

In the "code" folder in this assignment you'll find the code which the other developer left for you. In the terminal, "cd" into that folder and install dependencies by running npm install. Once that's done, you can start the project by running npm start.

Implement a hamburger menu for mobile devices into the existing project. You need to figure out how to place the new feature in the existing project without breaking it.

The hamburger menu should be implemented purely with CSS and on click, it should fold out the menu of the page. You can use a styled checkbox input tag to store the open/closed state of the menu. The example from our lecture on this can be downloaded here

The project is set up with the Technig eslint rules, and your changes should conform to these! Run npm run lint to check your code, or install the "linter-eslint" atom plugin to get atom to run the checks in real-time.

• How to create a menu icon in CSS

Learning how to think as a web developer is learning how to be an expert in problem solving. So whenever you get stuck start with step 1 and continue until problem solved.

1. Google! In English, type in the error message if there is one, search within the language you're using (ie CSS, JavaScript etc).
2. Ask your code buddies in your Company.
3. Ask your fellow students in Slack.
4. Ask Damien. Please note: we are part of a sharing community - share the answer with your fellows.

After completing this assignment you should have knowledge about other peoples coding styles and how to setup someone else's project on your computer. As a bonus you also get practice in using and structuring React projects and improve on your CSS ninja skills.

Done with the main task? Here's some ideas for things to continue with:

1. Make the hamburger menu slide in and out of the page.
2. Animate the lines in the hamburger menu to become a cross when the menu is open, and the normal 3 lines when it is closed.