Starting Website Recreate Series
Tags: beginners, css, ui, series
Published: 2020-02-14 18:26:12

---
title: Starting Website Recreate Series
published: true
description: Series to recreate the front end of websites, aimed at beginners
tags: beginner,css,ui,series
series: Website Recreate Series
---

#tl;dr
In this series I will try to recreate some websites,that I find to be fancy, without the use of any css or js framework (_whenever possible_). The main goal is to help beginners understand that they don't always need a framework to make websites work. As a side-effect I hope to improve my understanding as well.

#Disclaimer
This is not a rant about any framework and I am not against the use of frameworks. I just want to let beginners know, that they don't always need to load a whole framework to make a website responsive or just to add a carousel. Below I use Twitter Bootstrap as a framework example, because that was the one that I used when I started with web development. I use frameworks in my every day work and I now know that one could create very unique sites with them.

#The Beginning
When I started my web development journey I found that, for me, the best way to learn was through practice. I started with viewing websites that I found beautiful and tried to recreate them. The first step I took was to import twitter bootstrap to everything,  because how else was I supposed to make the website responsive 😅? The next step was to go through the documentation of bootstrap and try to find similar components to what I wanted to build (e.g. a Navbar), put the code in and try to modify it to look similar to what I was trying to achieve. 

This process, while it kind of worked, it rarely achieved the exact same look and feel as the Goal website. The recreated site always had that Bootstrap-y look, though that was my rookie mistake of not actually modifying the bootstrap components good enough. 

Another flaw of this process was that even for small sites e.g. a simple one page site, I always used Bootstrap (and jQuery) and bloated the site with thousands of unused lines of css and js.

Last but not least, the most important downside of this process was that I didn't actually learn css and its power. I learned to use Bootstrap and make small tweaks (change the colors or the width of something). I let the framework handle all the magic and then the sites lost their magic. They all looked similar to each other.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nl1hffun21rcko95sh51.png)
<figcaption>Site wireframe example</figcaption>
Whenever I saw something that I liked on the web my first thought was: can default Bootstrap do that? If the answer was no, then I used the next similar thing to it. Eventually I stopped thinking like that and started to read more about CSS and how to use it effectively. 

Of course I make use of frameworks in my work. I just try to think if it is really needed,  before adding one to a site. While there is no reason to reinvent the wheel, there is also no reason to having unused code and dependencies diminishing your site’s performance.

The first website that I will try to recreate is Spotify ([open.spotify.com](open.spotify.com) to be exact). 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/os3h5alf3i2obmcqg5mi.png)
<figcaption>Open Spotify UI</figcaption>
I won't actually do any backend and I will not handle audio files (play, pause etc). The goal is to recreate the front end(the looks), the components will be there but the functionality might not. 

Thank you for reading through this long post, this is the first series that I create. If you have any suggestions about the websites you want to see recreated leave a comment. I am by no means a frontend expert, but I will do my best to recreate them. There are multiple ways to achieve a UI, I will use the one that I see fit. If you think that my decisions are not optimal for any reason then please leave a comment about it.