Maxaro clone

picture of the maxaro clone project

For this school project I had to clone a real website using HTML and CSS. I chose for the Maxaro website since it has a lot of different elements and layout which made it challenging to clone. The website also needed to be fully reponsive which made it even more challenging.

picture of the maxaro clone landingscreen

In the beginning I made a breakdown sketch where I was grouping certain elements with each other. After that I started with coding. This had been the third time I had to develop a website using HTML and CSS.

Besides cloning and making it responsive I also had to add some micro interactions. Therefore I added some animations on hover on certain elements to make the website more dynamic in compared to the orginal site.

picture of the maxaro clone product page

The code had to meet certain criteria, it had to be semantic HTML and we had to use as few classes, id's , and divs as possible. This made me to be more creative while positioning elements. For example, I had to use grid more often for certain layouts, which were easier to code if I could use div's. Besides the code, the accessibility of the website was also important.

During this project I further developed my CSS skills where I learned new topics such as using custom properties, grid, different css properties, and animations. On top of that I also learned to develop responsive website using relative units and media queries, plus I learned where to focus at when I develop a website regarding the accessibility so that any person regardless of injury or disability are able to use my website.

Go up