How to design a website yourself
If you have the time and the interest in it, then nothing is more fun than designing your own website. But what if you’re a beginner and you’ve never done anything like this before? In this blog post I’ll tell you how to get started.
- Download an html-editor
Start by downloading an html editor. It’s a simple program, just like a text editor. The only advantage of an html-editor is that it shows the difference between your text and the html-code much more clearly. Both types of text get a different color. And that way you don’t make a mistake that easily. For the price you don’t have to leave it at that, because there are good, free html-editors for Windows, Mac and Linux.
- Learn about HTML and CSS
HTML and CSS are at the heart of every web page: HTML is used to define the structure of a page and CSS is used for the layout. So if you want to design your own website, you have to learn something about HTML and CSS.
(Most webpages have the extension .php instead of .html. However, they are still just pages written in HTML, just to enable some applications within those pages, the programming language php has been used. On another page I explain more about the difference between html- and php-pages.)
By reading the different pages on this site you can learn a lot about HTML and about designing with CSS. Or take a look at this example of HTML code to see the ‘back’ of a web page. (And if you don’t know what certain terms mean, first watch this video in which I explain commonly used website terms).
What I learned a lot from myself when I started designing websites, is from looking at the source code of pages that I liked, or of which I liked a certain part. The underlying code of a web page can be viewed from any browser. And by looking at how someone else has done something, you get to know a lot about how HTML and CSS work. You always learn most of it by doing and trying things yourself, not by studying a book.
- Make your website responsive
The term responsive means nothing more than that the layout of your website changes depending on the device on which it is viewed. So if you look at a three-column website on a smartphone, those three columns are suddenly collapsed into one column, and the menu may only appear when you tap a button. The templates, for example, are all responsive.
But there are more ways to make a website mobile. Which way is best for your site depends on several factors. But whichever way you choose, with today’s large number of smartphone and tablet users, you can’t get away from making your site as attractive as possible for them as well.
Check and test
What you shouldn’t forget before putting your website online is to check your pages for errors. An error is easily made. Not every mistake is serious, but you want your pages to look good in the main browsers. Always have the pages of your website checked by a so-called validator (and your stylesheet(s) as well).
And finally, there are not only different browsers, but also different browser versions, different operating systems, and different screen resolutions. And together they result in an enormous number of different combinations. The chance that all these combinations consistently produce the same image is practically nil. To find out what your site looks like in the most important combinations of browsers (versions), operating systems and resolutions, you can have an online browser test carried out.