Being the first website I built from the ground up, my goal was to reimagine and redesign an existing brand's website. Captivated by the intensity of the Netflix series Formula 1: Drive to Survive , I decided to start with F1 for its global influence, international innovation, acceptance of use for educational purposes, asset/font availability, and presence of public APIs.
I decided to use a dark theme because white text is easier to read on a dark background and chose to embed engaging components. I also used motion and color in the background color splash theme since F1 is flashy and explosive. Colors were also coordinated in the navbar where the text for each driver's name matches their team color, as well as the date elements connected to the timeline on the teams pages.
The project includes interactive components such as the race schedule accordion with cards, shuffling concept car carousel, 3D Sketchfab model iframe embed, hover effects, and more.
Project design: I learned the importance of choosing the layout, framework, and architecture of the project from the start. Being the foundation of future development, these decisions have echoes down the line. Choosing flexbox over grid for the layout was important for making the project dynamic, responsive, and scalable.
I consider this project a work in progress, and plan to continue to play around with responsiveness.
The Formula 1 brand (subsidiary of Liberty Media Corporation), reserves all rights, assets, and intellectual property, and its respective affiliates. This website is a web development project intended for educational and informational purposes only and is not affiliated with or endorsed by Formula 1.
Guidelines for use of the Formula One Copyright for education purposes
"These Guidelines are designed to assist Students, Parents and Teachers as to the use that can be made of the material on the Formula1.com website and are to be read alongside its full Terms & Conditions."
Use of material
One copy can be printed (or one photocopy made of a print-out) of any part of the Formula1.com website for personal, non-commercial use, including for use in private study or research. This means that:
Legal Notices