Web Design & Development
Project Web
Front-End Development - Recreate website a website using semantic code
Year :
2022
Industry :
Front-end Development
Client :
HvA
Project Duration :
1 month
Problem :
This project was part of the Front-End Development course, where the goal was to recreate two pages of an existing website using only self-written code. The focus was on developing technical skills in HTML, CSS, and JavaScript, while understanding how complex interfaces are structured and implemented.
A key challenge was to accurately replicate both the visual design and interaction behaviour of a high-quality, production-level website. In addition, the project required either adding new functionality or improving responsiveness, which meant translating static layouts into flexible and accessible web experiences.
Solution :
I selected Overwatch by Blizzard Entertainment because of its strong visual identity and variety of interactive components. I chose two pages that contained diverse content structures, including dynamic layouts, multimedia elements, and navigation patterns.
My focus was on building a fully responsive experience. I implemented flexible layouts using CSS Flexbox, ensuring consistency across different screen sizes. Where possible, I prioritised CSS-based solutions over JavaScript to optimise performance and maintainability. For example, I simulated slideshow behaviour using layout and animation techniques in CSS rather than relying on script-heavy solutions.
I also developed an animated mobile navigation menu and ensured accessibility considerations such as readable contrast, semantic structure, and keyboard-friendly interaction.
Challenge :
One of the main challenges was managing complexity at both the layout and code level. Replicating a professional website required structuring large CSS files, maintaining consistency, and avoiding technical debt.
Another challenge was balancing accuracy and practicality. Some interactive elements were originally implemented with JavaScript, but I explored alternative approaches to better understand layout systems and performance trade-offs. This process strengthened my problem-solving skills and deepened my understanding of responsive and scalable front-end development.
Summary :
This project strengthened my technical foundation in front-end development, responsive design, and accessibility. I gained practical experience working with Flexbox, managing complex CSS systems, and building adaptive layouts.
Most importantly, it improved my ability to analyse existing digital products, reverse-engineer interaction patterns, and implement scalable solutions—skills that are directly applicable to UX and interaction design.
More Projects
Web Design & Development
Project Web
Front-End Development - Recreate website a website using semantic code
Year :
2022
Industry :
Front-end Development
Client :
HvA
Project Duration :
1 month
Problem :
This project was part of the Front-End Development course, where the goal was to recreate two pages of an existing website using only self-written code. The focus was on developing technical skills in HTML, CSS, and JavaScript, while understanding how complex interfaces are structured and implemented.
A key challenge was to accurately replicate both the visual design and interaction behaviour of a high-quality, production-level website. In addition, the project required either adding new functionality or improving responsiveness, which meant translating static layouts into flexible and accessible web experiences.
Solution :
I selected Overwatch by Blizzard Entertainment because of its strong visual identity and variety of interactive components. I chose two pages that contained diverse content structures, including dynamic layouts, multimedia elements, and navigation patterns.
My focus was on building a fully responsive experience. I implemented flexible layouts using CSS Flexbox, ensuring consistency across different screen sizes. Where possible, I prioritised CSS-based solutions over JavaScript to optimise performance and maintainability. For example, I simulated slideshow behaviour using layout and animation techniques in CSS rather than relying on script-heavy solutions.
I also developed an animated mobile navigation menu and ensured accessibility considerations such as readable contrast, semantic structure, and keyboard-friendly interaction.
Challenge :
One of the main challenges was managing complexity at both the layout and code level. Replicating a professional website required structuring large CSS files, maintaining consistency, and avoiding technical debt.
Another challenge was balancing accuracy and practicality. Some interactive elements were originally implemented with JavaScript, but I explored alternative approaches to better understand layout systems and performance trade-offs. This process strengthened my problem-solving skills and deepened my understanding of responsive and scalable front-end development.
Summary :
This project strengthened my technical foundation in front-end development, responsive design, and accessibility. I gained practical experience working with Flexbox, managing complex CSS systems, and building adaptive layouts.
Most importantly, it improved my ability to analyse existing digital products, reverse-engineer interaction patterns, and implement scalable solutions—skills that are directly applicable to UX and interaction design.
More Projects
Web Design & Development
Project Web
Front-End Development - Recreate website a website using semantic code
Year :
2022
Industry :
Front-end Development
Client :
HvA
Project Duration :
1 month
Problem :
This project was part of the Front-End Development course, where the goal was to recreate two pages of an existing website using only self-written code. The focus was on developing technical skills in HTML, CSS, and JavaScript, while understanding how complex interfaces are structured and implemented.
A key challenge was to accurately replicate both the visual design and interaction behaviour of a high-quality, production-level website. In addition, the project required either adding new functionality or improving responsiveness, which meant translating static layouts into flexible and accessible web experiences.
Solution :
I selected Overwatch by Blizzard Entertainment because of its strong visual identity and variety of interactive components. I chose two pages that contained diverse content structures, including dynamic layouts, multimedia elements, and navigation patterns.
My focus was on building a fully responsive experience. I implemented flexible layouts using CSS Flexbox, ensuring consistency across different screen sizes. Where possible, I prioritised CSS-based solutions over JavaScript to optimise performance and maintainability. For example, I simulated slideshow behaviour using layout and animation techniques in CSS rather than relying on script-heavy solutions.
I also developed an animated mobile navigation menu and ensured accessibility considerations such as readable contrast, semantic structure, and keyboard-friendly interaction.
Challenge :
One of the main challenges was managing complexity at both the layout and code level. Replicating a professional website required structuring large CSS files, maintaining consistency, and avoiding technical debt.
Another challenge was balancing accuracy and practicality. Some interactive elements were originally implemented with JavaScript, but I explored alternative approaches to better understand layout systems and performance trade-offs. This process strengthened my problem-solving skills and deepened my understanding of responsive and scalable front-end development.
Summary :
This project strengthened my technical foundation in front-end development, responsive design, and accessibility. I gained practical experience working with Flexbox, managing complex CSS systems, and building adaptive layouts.
Most importantly, it improved my ability to analyse existing digital products, reverse-engineer interaction patterns, and implement scalable solutions—skills that are directly applicable to UX and interaction design.