https://luckytiger18.github.io/front-end-dev-test.io
Congratulations on making it to the testing phase of the hiring process! For this part, we would like to learn about your creativity, how well you code, and how well you follow instructions.
You will need to have knowledge of some key things before you start:
- how to run a local server
- how to connect your markup to your scripts and styles
- front end web development
We have supplied an optional development server and some development dependencies for this project, but feel free to use the development framework of your choice (e.g. create-react-app, vue cli, etc). You are not required to use the codebase provided in this repository, but feel free to use it! If you choose to use this codebase, you can run the development server using the commands found below:
npm install npm start
NOTE: You will need node and npm on your machine if you choose to use the supplied server, also for hosting you will need to set it up yourself.
The goal of this project is to create a client website that has some key features requested by the client (i.e. Rooster Grin as the client).
Please clone this repo and submit a link to the new project's repo along with any instructions for viewing the final product. It is not required to host this project anywhere, but it would be nice to view your project via a link rather than having to run the build locally.
A .jpg of the mockup and the assets are in the provided .zip folder.
Please read through ALL the requirements before starting your project
Below are the design requirements:
- Mockups are followed
- Carousel in last section
- Attention to detail
- Mobile Responsive
- Animations
Though the main requirement is to follow the mockups, we don't require that it to be pixel perfect. We encourage you to be creative as well with this test, you have some design freedom with the assets provided and feel free to add as many animations as you like. We usually face a lot of ambiguity when developing and designing for our clients so we have left some things up to you to see how you design.
Below are the technical requirements:
- Modular and concise code
- Fully functional capabilities of built features
- We should not be seeing errors when we click on buttons
- Understanding best practices of web development
- Naming conventions and styling
- Best use of images and assets
- Use of a grid system
As for the technology that you should use its up to you. 😎
These required features are requested specifically by the client and should be implemented.
- Fade In Effect for the hero title
- Subtle animation on the four icons
- Fully Functional Site
- Use of dev server
- Front end framework
- Dynamic backend from a CMS
-
What you technologies you used and why (if you only used html, css, and js please explain any templates or frameworks you may have used i.e. bootstrap)
- For this project, I simply used HTML, CSS, Bootstrap, and JS. I decided not to use a larger framework just to keep it simple. For larger projects, I would look into using something like React.
-
Any struggles you faced when developing with technology you chose
- For the most part it was getting familiar with Bootstrap grid system and getting items in the right place. This didn’t allow me enough time to deploy a production-grade http server like Express.js. Instead, I deployed the raw files with github pages.
-
What you enjoyed the most and why
- What I really enjoyed was adding animations to the icons. I was able to make the border wobble when you hover over the icons. I really enjoyed the experience learning the grid systems and implementing a client’s idea. Thanks again!
If you have any questions please feel free to email me (Matt) at matt.sprague@roostergrin.com