If you want to be considered as a candidate for front-end developer at Agiledrop, you will have to complete the following tasks.
- Since all our front-end developers work locally, you will have to be able to install Drupal site on your computer. You can use MAMP (OS X), WAMP (Windows) or any other tool that you're used to.
- You must have a basic knowledge of GIT.
- We probably don't have to tell you that you must know CSS and Javascript.
Your first task is to set the page locally:
- Clone the code to your computer.
- Install database which is in root folder of the repository to your machine. You can use Phpmyadmin or any other tool you use, to do that.
- Copy the file sites/default/example.settings.local.php to sites/default/settings.local.php. Update the file with the information for your database. Read the comment at the top of that file if you need better instructions.
If you did everything right in previous steps the page should be opening on your localhost.
Now it's time to begin the real work. Below are the tasks that you should accomplish. The basic theme (called adchallenge) is already there and is enabled on the page. If you are not familiar with creating themes in Drupal, then you should check this page first. It will help you understand what goes where.
We would like you to use Sass for styling. It doesn't matter how you compile it to CSS, as long as we have Sass files as an end result as well.
Oh, and the last thing - the username and password for the Drupal account is admin/admin, you can login by going to /user.
- Style the front page using this design. You don’t have to be logged in into Figma account, but we recommend that you create a free account. When you are logged in, you can use css inspector to get accurate elements properties.
- The content might not be completely the same as in design. Don't mind about it, use the one that is in the provided database. Just make sure it looks the same as in design.
- Header should be styled in a way that when you scroll down it sticks to the top of the page and is visible all of the time. Clicking on links in the main navigation should take you to the appropriate section on the homepage using “smooth scroll” animation. When the page is scrolled to this section, the correct link must be highlighted (active link).
- Please have in mind that web page should look OK on mobile devices.
- We will review web page in the latest modern browsers (Chrome, Firefox, Safari and Edge).
- After you're done push only the theme folder to a new repository.
- Send us a link to your new repository you created on your Github account. We will review your code and get back to you.