Get Better at HTML and CSS by Cloning these 10 Minimalist-ish Websites
Tags: html, css, beginners
Published: 2020-01-12 02:07:47


Practicing may not make you perfect but certainly it makes you closer to being.
Here I bring a list of 10 minimalist websites to be cloned. The focus here should **not** be the animation, rather you should reason about grid, layout, positioning, color choice, and typography.


## Let's go

### WIBE

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6x4vdbv7lexj9jw6m4hq.png)

Let's start by cloning [Wibe](https://www.wibe.in/). It is a simple yet quite beautiful website. Even after not paying attention to the animations and transitions, it's typography and grid makes it stunning.

### Syndicut

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sstf3kwpye1e4dlzv2zm.png)

The next on the list. Even though it takes a little bit longer to load, [Syndicut](http://www.syndicut.co/) is one of the best on the list. It plays with the image grid while showing a big text right on our face. Hint: use the CSS grid.


### Andstudio

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/61wzoxivgxo1z5ukttoi.png)

It looks a little bit with the first one, but [Andstudio](https://andstudio.lt/) is a little bit more complex. Andstudio plays with text orientation and its position on the website.

### Portfolio

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sfevtqgo8xyw3s3sbtx6.png)

This is [Jesus Sandrea](https://jesussandrea.com/) portfolio. By now I think you started to see a trend. Those minimalist websites use typography, grid, and black/white colors to show the message. Sometimes they want us to picture the text content, another the images.

### [Olivier Photography](http://www.olivierophotographie.fr/)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xo3lsx23u7cx3iomyo1n.png)

This one is quite simple, but with plenty of animation. Maybe he trusts a little bit too much on text than images, but his website is quite powerful.

### 2Che

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ji8xmqbd5h60engbk65w.png)

Starting with some color other than white and black, [2Che](http://www.2che.com.hr/) plays with image positioning and strong text. It may not be that minimalist, but I liked the doggo photo at the end.

### Guillaume

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0ro2g5acjrmg26ov6nnr.png)

Back to black and white, [Guillaume](https://guillaumetomasi.com/)'s website is another one that plays with text over the image. I'm still stuck on the infinity scroll effect though.

### [Shohei Takenaka](http://shoheitakenaka.com/)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/12e3bh8kr2bbru6nifv4.png)

It is incredible how a little bit of black, white, and good typography can make your website look beautiful. Of course that in this case, her photos make her website look stunning

### Peiying

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f2iu03yzoo5n0nxz8hdk.png)

We are close to the end of our list. [Peiying](https://pfeng.cc/)'s website is another example of how playing with text positioning and orientation can make your website interesting. Her website is more focused on the text content, but the images are well positioned, especially in the title's background.

### 00F Agency

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/umytq2kkgu876fabw2zy.png)

Last but not least, [00F Agency](https://00f.agency/en/) have a "blueful" website. In addition to the colors, the website also plays with the name of the color in hex! If anyone finishes this one, please comment below!


## Conclusion
I know that even though minimalist-ish, those websites demand quite some time to finish. Personally, I am posting on Codepen what I'm accomplishing to do. It is really fun to discover new font-family, new ways of organizing our grid and text transformation.

I hope you have fun as much as I am having to clone those pages.


Do you know any other Minimalist website that would be fun to try to clone? Please comment below.

## Lets Talk [@camfilho](https://camfilho.github.io/)
If you cloned one of them, shoot out a tweet to me. I'm going to be glad =)