Overlay replica website Mock-up of World of Warcraft on computer and mobile
HTML icon CSS icon JavaScript icon

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, as they are visually appealing and offer a good mix of content. The goal of this project was to improve my skills in responsive web design, accessibility, and JavaScript.

Development Progress

Analysis of the code of the replica website

Initial Design

I started by analyzing the original website to understand its structure and visual style. Based on this, I created a semantically correct HTML structure.

For the visual styling, I used CSS and applied custom properties to maintain consistent colors and styling throughout the project. This approach ensured the website looked professional and aligned with the original design.

First design of the replica website with code

Development

The development phase focused heavily on responsiveness and accessibility. I used a mobile-first approach to ensure the website worked well on various devices, from an iPhone SE to larger desktop screens.

For the structure of the pages, I used a combination of Flexbox and Grid. These techniques allowed me to create a clear and flexible layout. By adapting the rows in the code for smaller screens, I ensured that the content was neatly rearranged on smaller devices.

Additionally, I implemented a micro-interaction on the Dragonflight page using JavaScript. This gave me the opportunity to practice working with interactive elements and further improve my JavaScript skills.

Results

Results of homepage and dlc page of the replica website

This contains the website:

  • Responsive and accessible
  • Includes two pages:
    • Homepage
    • DLC page (Dragonflight)
  • Visually appealing and user-friendly
  • Well-structured layout

Reflections

I am particularly proud of my improved understanding of responsive design and my ability to implement JavaScript for interactive elements. This project taught me a lot, including the importance of semantic HTML, design consistency, and focusing on accessibility.

While I am happy with the result, I see areas for improvement, such as refining my CSS layouts for larger screens and experimenting with more complex JavaScript interactions. Nevertheless, this project has laid a strong foundation for my continued development in front-end web development.