F1TV Website Remake
My remake of the official F1TV website, focused on responsive design across all screen sizes.
View on GitHub ↗
About
Assignment
Develop two different pages of a website using clean, vanilla HTML, CSS, and JavaScript. The website must include diverse content, at least one detailed micro-interaction, accessibility considerations, and a professional design with both light and dark themes. Additionally, extra focus should be placed on either the surface layer or full responsiveness — I chose to make the website fully responsive.
Solution
This project is a fully responsive recreation of the official F1TV website, built from scratch using only HTML, CSS, and JavaScript. The design adapts seamlessly from an iPhone SE to a 27" screen, ensuring an optimal user experience in both portrait and landscape modes. It includes carefully structured content, interactive elements, and a refined layout that follows modern web design principles. The implementation of a micro-interaction enhances usability, while CSS custom properties provide flexible theme management. The result is a visually polished, accessible, and responsive website that functions smoothly across all devices.
Tools
- Visual Studio Code
