For a school assignment, I was challenged to recreate two pages in 10 weeks of an existing website using only vanilla HTML, CSS, and JavaScript. I chose to recreate the World of Warcraft website, specifically the Dragonflight page and the homepage. The goal was to improve my skills in responsive web design, accessibility, and JavaScript.
Development Progress
Initial Design
I started by analysing the original website to understand its structure, layout and visual style. I broke the page down into smaller sections and recreated the structure using semantic HTML. For the styling, I used CSS and custom properties to keep colours and other values consistent throughout the project. My goal was to recreate the original design while keeping the code structured and understandable.
Development
During development, I focused mainly on responsiveness and accessibility. I used a mobile-first approach to make sure the website worked well across different screen sizes. I also added a small micro-interaction to the Dragonflight page using JavaScript. This gave me the opportunity to experiment with adding interaction to an otherwise static replica.
Results
The final result is a responsive and accessible recreation of the original website, including both the homepage and DLC page. I focused on keeping the visual style consistent while making sure the pages worked well on both desktop and mobile. I also used semantic HTML and accessibility features such as meaningful alt texts to make the website more accessible.
Reflections
This project helped me improve my understanding of responsive design, semantic HTML and CSS structure. I also became more comfortable using JavaScript to add small interactive elements. It taught me how important consistency is when recreating an existing design, while also giving me more confidence in building layouts that work across different devices.