Whoa the first term is really on a roll now. I'm mainly spending my time coding for my courses and trying to enjoy London now and then, but luckily I've found some time to write a new post. Since this blog started out as just a part of my project of building a website from scratch, I thought it might be interesting to share my experience of building a website with you and tell you what I learnt and give you tips about things that might come in handy if you would like to make a website yourself.

1. Use a good text/code editor
If you've never coded before you might not know at first how to save all of your files or you might just be using word, but a good code editor is key. I'm using Sublime and I'm really satisfied about how it works. The main pro to this editor is that it adds colour coding to your code that's specific for the programming language you're using. So it's a lot easier to distinguish between different types of elements and thus makes it easier to read and edit your code. When coding a website you'll mainly be writing HTML and CSS and I'd recommend saving those different types of files separately so the colour coding is different for the HTML and CSS parts.

2. Make sketches
Making sketches of how you want each page of your website to look like will help you organise your code. First of all, it will help you focus on what you need to do for each page. And second of all, it will prevent you from losing control over what you still need to do because you can compare what you already have to your sketches. Here is an example of a couple of sketches I made when coding my page:



3. Use the web
I do think that the best way to learn coding is by doing it yourself. However, you don't always need to reinvent how certain things are done. I made my website during the summer holidays so I had all the time in the world to figure out how to add different elements to my website. But looking back I do admit that I could have saved quite some time on a couple of things. For example, I made the social network buttons on the bottom of my page by saving each image separately, then uploading them to photobucket so I could add a link to each of them and they would be visible on my site. When I started on the new design of my website I came across font awesome. Font awesome is a font made up of all sorts of icons such as social network icons, which you can edit like any font. So it's a lot easier to add and edit them than images of icons. If only I'd known about it before..

However, you do have to be careful when it comes to copying code from the Internet, because (especially in HTML and CSS) elements have specific names that you have to come up with yourself, and using someone else's code might completely mess up parts of your code that were right before because this person used different names. The best way of using someone else's code would be by figuring out how their code works and then re-writing that code into your own project with your project's specific names.

4. Phone & tablet compatibility
When designing your website you have to keep in mind what devices you want your website to be viewed on. At first, I only checked whether my site looked good on a desktop, assuming that it would be fine on tablets and phones as well (bit naive..), and so when my site was done and I checked what it looked like on my phone I was surprised about how messed up it was. And I spend quite some time to fix it. So make sure you add code to make your website compatible for phone and tablet right from the beginning. This is the code I used to adapt my page for tablets:



5. Make notes
Every time I came across a problem on my website I made a note of that and also wrote down how I solved the problem in the end. I recommend doing this, because you will learn from these mistakes and if you have a similar problem later on you can use the solution you wrote down. You might not think this necessary, but trust me, you will forget how you coded certain elements and might find yourself solving a problem you did before.

I certainly learnt a lot while doing this project and I hope you find these tips helpful if you plan on designing a website yourself. Feel free to ask me any more questions you might have about making your own website or coding in general :)

XOXO
Merel

Follow me on: Bloglovin - Instagram - Twitter