Your knowledge of semantic HTML, CSS3, Vanilla Javascript, Git/Github, responsive design, and of course how do you turn designs into code. Solutions using Yarn, preprocessor Sass, and ES6 are preferred but not required (no pressure, but we'll love to see that in our code).
- Code a template using the following as a reference: https://ptonella.github.io/frontend-dev-challenge/template/
-
Don't worry if you don't code all the components of the template. We'll evaluate the quality and organization of your code - even if it's incomplete.
-
Try to write your best code, clear and easy to read. Remember: you'll be questioned about it in the interview.
-
Try not to spend over 8 hours in this test.
-
You should not use Bootstrap, jQuery, React, or other frameworks for this challenge. Use only HTML, CSS and Vanilla JS. Third-party libraries are allowed, when necessary.
-
The font-family used in the template is Nunito.
-
The icons are from FontAwesome.
-
The Javascript challenge is composed of three modules:
-
Notes: You need to build a note delivery system with a char count/limit of 1000 char per message. The notes can be sent public or private. Public notes will be seen by any user and private messages will be seen only by the recipient. The public tab is selected by default. To send a public note select the public tab, write the message, and hit send. To send a private message select the private tab and write the message. It's necessary to add a username to the message (@userName). The private message cannot be sent without a username on it. Plus: Make the notes persist on the page, even if the user reloads the page.
-
Database Images: These imagens should be loaded from the API found at this URL: https://picsum.photos/. You can choose between display random of specific images. Note that you should also add the corresponding author name below each picture.
-
DataTables: The table is using a third-party library called
DataTables. You have to load the data inside the table using the tables.json file, located on the root project.
-
- Fork this repository to your GitHub account;
- Read the README carefully. All the information you need to start working on is there. But if you have any questions feel free to reach out to us;
- When you're done open a pull request with your project. Remember to add instructions on how to run the project, if necessary;
- If you think it's useful, publish the project on GitHub Pages and send the link along with the PR.
- This template was downloaded for free and the code was adapted to our needs.