NAME OF PROJECT
PressEnter Task
LANGUAGES USED
HTML, CSS & JavaScript
DESCRIPTION
A re-creation of a Figma design/ Official PressEnter site as part of the interview process
The Process
Making it to the second stage of interviews with PressEnter marked a significant milestone for me, signifying that I passed the initial interview with their HR. Balancing this task with my full-time job was a bit of a juggle, squeezing in work on the project before or after my shifts, especially given the varying schedules I was dealing with at the time. Unlike the one I had with Betsson, the coding task for PressEnter was on a second stage.
Most part of the project was completed between the 10th and 11th of February, were on the 11th I started the Footer. On the 12th, I finished the Footer and then started implementing the JavaScript functionalities, linking, key requirements that had to be done, as well as documenting the process. On the 13th, I then went through all of the project once more, testing it out, and finalised the last bits and submitted it.
Outlined below are the specific requirements of the task, all of which I successfully fulfilled. Additionally, I took the opportunity to refine certain styling and design elements, whilst bouncing between the Figma design and their official site;
- Responsive layout on different devices, featuring a hamburger icon/menu for mobile and a sticky header
- Internal hover effect on the three banners overlapping the hero image
- Implementation of a simple carousel using the Owl Carousel library
- Creation of a pop-up displaying the device time upon clicking the blue "learn more" button
The Design
The design goal was to replicate the Figma design to at least the blue "learn more" button, the rest of the design wasn't a "must to be done", however, knowing myself, and also the importance of such project (any project really), I couldn't leave any stones unturned. My goal was to fully complete the design, bouncing off with their official site, making it fully responsive, interactive with all links redirecting the user to the respective page, and as well as completing all of the required features.
I studied the official site and the Figma design carefully to locate any improvements that I could make from my end, which I have indeed done by keeping the PressEnter logo in-front of the user's eye in the mobile menu, and added an extra zoom in feature to the values section in order to give it a bit of extra importance.
The Challenge
Juggling this task alongside my full-time job presented the biggest challenge, requiring me to maintain focus and give my all to both responsibilities. I had a few learning steps to take especially the Carousel section, Mobile menu,Zoom in feature, Pop-up feature, and proper sizing for the images in the "Life" section.
Despite these challenges, I'm pleased with the outcome—a nearly identical replica of the Figma design. Conducting thorough research for the Carousel section and Mobile menu, as well as gathering most of the necessary assets beforehand, gave me an advantage.
The zoom in feature was straightforward to do, even though I had never done it before. With a nice touch by PressEnter providing the CodePen for the specific feature, I swiftly understood the code and implemented it with mine. For the pop-up feature showing the device time the user is on, I prompted ChatGPT with the feature that I wanted and after a few trial and errors, and tweaks here and there, I managed to find what I wanted.
Lastly, the images were a bit of a challenge due to them initially having different sizes, but after trying to structure and implement the photos in a few different ways, I managed to make it work and made the photos nicely sized.
Overall, although I didn't secure the position, I received valuable feedback on my work. Moreover, progressing to the third stage, where I receive a definitive yes or no, felt like a significant achievement for me.