NAME OF PROJECT
Betsson Task
LANGUAGES USED
HTML, CSS & JavaScript
DESCRIPTION
A re-creation of the official Spanish Betsson site as part of the interview process
The Process
Taking on this task marked my first interview assignment, which brought both intrigue and a bit of stress. With a design blueprint and a real-world deadline in hand, I set out to recreate the official Spanish Betsson site. Over three days, totaling roughly 24 hours, I carefully coded, documented, and tested the project to ensure completion within the given timeframe.
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, primarily focusing on enhancing the header section:
- Cookies Pop-up
- Slider for the hero section
- Hover effect on the games section
- Log in pop-up
The Design
The design goal was clear: replicate the Spanish site while also allowing room for redesign where needed or beneficial. My approach involved a systematic, section-by-section development process, tackling both HTML and CSS components of each segment before moving forward. This approach provided a clear view of the evolving project during coding, allowing for precise control over responsiveness. Notably, every link within the project is directly linked with the primary URL of the official site.
For the payment methods section, I seamlessly linked each method with the log-in pop-up trigger, recognizing that users would typically need to log in to their accounts to make deposits. Additionally, the log-in pop-up includes an error prompt for failed log-in attempts.
The Challenge
I had a few challenges in this project, mainly being the slider effect, Cookie and log-in pop-ups and the mobile menu. Given my prior experience primarily in personal projects, these aspects demanded a "learn-as-you-go" approach. Notably, I opted for an accordion menu for the mobile section to condense the menu, acknowledging the constraints of a tight deadline.
Despite initial apprehensions, I successfully navigated the intricacies of implementing pop-ups, while also identifying areas for potential enhancement, such as the slider section, which I later addressed through exposure to a JavaScript library featuring an improved sliding feature.
This project has highlighted areas where I can enhance my skills, particularly in creating mobile menus. By incorporating more mobile menus into my personal projects, I aim to build confidence in this aspect. Subsequently, in a subsequent project, I successfully implemented a mobile menu, which was a rewarding experience.
Overall, I received positive feedback from the engineering team lead regarding my clean and well-structured code. They appreciated my ability to fulfill all requirements and ensure responsiveness throughout the project, as well as the well documented project.