Making your own website was already easy more than 15 years ago, I know it, I made my first when I was 10 years old! Since then, it’s only been getting even easier, with amazing tools like WordPress or Wix.
However, easier is not always better, and with more complex solutions will also come many benefits, like greater availability of plugins or just more freedom in the design, the features, and will usually cost less. Let’s see the different available options.
Using a site builder
I already mentioned them in the introduction, site and blog builders like WordPress and Shopify are very popular nowadays, with WordPress running 36% of all the websites on the internet (over 600 million websites!). They allow any user to create a website and start writing content or even selling products, requiring no technical skills.
Those solutions are great for people that do not what to pay someone to make their website or invest time themselves in the technical aspects, and you will have a wide range of features and price tags available, with even plenty of free options. In this article I will present a selection of free and paid options that I have used and trust, or that are at least industry standards.
Usually how those site builders work is that you will create an account on the service, like WordPress.com, and after a quick sign-up, you will have a default website, and easy-to-use customization options to personalize the default design or install a new theme in some cases, and then you’ll be able to add content using a text editor directly on the website.
Here are a few options, both free and paid:
- For blogs and basic websites, you can signup on WordPress.com and create your blog in a few clicks. You have both free and paid options, but I would only recommend it for the free tier, as we will see equivalent but way cheaper options in the next part of the article. If you want to use it, but with a custom domain instead of “yourbrand.wordpress.com”, I would recommend buying it elsewhere as it will be cheaper.
- Wix.com is a good option for pretty much any presentation website, especially for a business. It is even easier to use than WordPress (but less customizable, so keep that in mind) and will provide you many templates to choose from to create a website adapted to your brand. If you plan to use it for your business, I would recommend buying a paid plan (the “Unlimited” and “Business Basic” plan will be plenty enough), as it will look unprofessional if you don’t have a custom domain name and Wix ad banners on it.
- When it comes to e-commerce websites, where you plan to sell your product through your website, Shopify is the absolute reference. It is a quite expensive solution (at least $29 per month, plus a commission on each sale), and I tend to think that all their websites look pretty much the same, but it comes perfectly adapted to that type of business and it will be easy to setup. Prestashop (developed initially as an end-of-studies project from someone in the school where I studied) is a potential alternative, which I believe provides more flexibility but requires more involvement.
An endless amount of other options is available online, but those are the most known ones, and also the best in my opinion. You might hear about Drupal and Joomla too for example, but I don’t think they stand against the competition anymore (and I still have nightmares of working with the former during an internship).
Self-hosting a site builder
We’ve seen the easiest option, which is to leave all the technical aspects to a 3rd party company, but let’s add some complexity.
From the platforms I mentioned earlier, both WordPress and PrestaShop offer you the possibility to download the source code, and then host it yourself wherever you’d like. This option allows you a greater level of customization, and reduced costs compared to the paid solutions that they provide, but comes at the expense of ease of installation.
The way it works is that you will have to pay a hosting service to provide you with a server, or a piece of a server, where you will put your source code, and it will be served to the internet from there. It is still relatively easy if you have some experience with computers and can follow a tutorial (there are plenty available online), but hosting companies are offering more and more some 1-click installation of the most popular CMS (Content Management System, like WordPress) when you buy a hosting with them.
The benefits you have when self-hosting one of those programs is that you have access to more functionalities, for a cheaper price than what you would have to pay on the official service provider. For example, WordPress.com will make you pay a whopping 250€ per year for their most basic option, when the cheapest option on HostGator.com will cost about 32€ per year with the same features (probably more). If you are in Europe, I highly recommend OVH, I have been using them for many years now, and they are extremely cheap compared to the competition, while still providing the highest quality of service.
As an example, I am hosting my blog MindFlash myself, which allows me to install any WordPress plugin or theme that I want without having to pay extra. The only difference with what I presented is that I have a dedicated server, a computer in the cloud, that I had to install and configure (setup the programs used to handle HTTP requests, the database, etc.) myself from scratch. This gives me a lot more flexibility in terms of what I can do (I can install a Minecraft or a Plex server, for example), but it is way harder to manage.
Programming your basic HTML & CSS website
Let’s start to dive into the real part of this article: programming! Well, almost, because HTML & CSS are not programming languages, but markup and styling languages, used respectively to build the structure and the style of a website.
That said, I still think HTML & CSS is the best way to get a taste of what programming looks like. It is a very gentle introduction to how things work on the computer, and a very rewarding learning experience: every few keywords that you type will give you an instant visual result. It is also a very valuable skill that can become useful in any career, for example to make your own personal resume website!
Check out this small excerpt of HTML code, taken from my online CV:
<h2 class="display-5 mb-4">Skills</h2>
<dl class="mb-4 indented">
<dt>Most used languages:</dt>
<dd>Java, PHP (Laravel), Angular, HTML & CSS</dd>
<dt>Mainly interested in working with:</dt>
<dd>Java, PHP, Angular, C#, C++</dd>
</dl>
The web is filled with tutorials teaching you how to make your first website with HTML & CSS. So much so that I would recommend avoiding any paid option, since you will find free equivalents of the same quality. When I was around 10 years old I learnt from the French website OpenClassrooms, and it is now offering an HTML & CSS tutorial in English, so this will be my recommendation.
Make sure to check out my article about the proper way to learn as a beginner programmer when you start diving into the tutorial, and really put emphasis on the practice! Also keep in mind that this is a skill that requires a lot of time to learn and to master. I have been programming for more than 15 years now, and I still learn every single day.
The next step after writing your code will also be, you guessed it, to host it online, just like for the self-hosted website builder, expect without a 1-click installation option.
Dynamic website with a server-side language
Plain “static” HTML & CSS websites definitely serve a purpose, but they also are very limited in terms of functionalities, and you will quickly want to be able to interact with your readers, or have some more dynamic features. This is where a server-side (or backend) language comes into play.
A server-side programming language will allow you to take data (from a database, from the user, from somewhere else on the web, …), transform it, and generate HTML to display it.
A simple example would be to have a list of spicy foods you like in a database, and wanting to display them all without having to manually type the HTML code. You could use a server-side language like PHP, to fetch all the foods from the database, and then loop over the results and display them, in a mix of HTML, and PHP:
<ul>
<?php
$auth = new PDO('mysql:host=my.db.com;dbname=auth', 'user', 'password');
$foods = $site->query('SELECT name, spiciness FROM favorite_foods ORDER BY name ASC');
while ($food = $foods->fetch()) {
?>
<li><strong><?= $food['name']; ?></strong> (spiciness: <?= $food['spiciness']; ?>)</li>
<?php
}
?>
</ul>
It is of course more complex to read, and there’s an algorithmic side to it, meaning that you start from some input (the data in your database), you transform it, and then output it (here, display it in HTML).
There are hundreds of server-side programming language that can be used to make a website, and about as many valid options. I will recommend a few here that are beginner friendly, have a wide community and are industry standards:
- PHP. It’s the first programming language that I learned and usually it is my go to choice when building a website for a personal project. It faced some criticisms in the past, but now especially the latest available version, PHP 7, has been rebuilt and offers good performances, functionalities and ease-of-learning. Note that PHP is specifically made to create a website.
I don’t have a specific tutorial to recommend, the one I used back then is obviously out of date and the ones I found online didn’t seem very good. I skimed over it, but the best I found is this Youtube video which seems to be a good A to Z tutorial. Then, I will recommend PHP: The Right Way, to dive deep into specific concepts. - Python. The problem is that Python is not made specifically for the web, so you will have to learn Python, and then learn how to apply it to make a website. That said, it is definitely not wasted efforts, because you will be able to make any sort of programs with Python. The official website for Python has a tutorial, so this will be my recommendation here.
- Node.js. It is a JavaScript framework, that makes it usable as a server-side language, which means that, like Python, you will have to learn JavaScript before learning Node.js. However, this can also be killing 2 birds with one stone, because JavaScript is used to make the client-side of websites more dynamic (open a popup when clicking a button for example). The website JavaScript.info is providing a very complete tutorial, but you will have to follow up with a tutorial dedicated to node.js.
There are many other choices, for example Ruby, or some more complex languages like Java or ASP.Net, but my top pick for the moment would be to use PHP. It is the most used language worldwide to make websites (but the trend is declining), it is easy to learn and it is made for the web. Keep it mind that if HTML & CSS take a while to learn, any server-side language will require at least 10 times more investment from your part.
Separate frontend and backend in microservices
There is a principle in programming called “KISS”, for “Keep It Stupid Simple”, which means that you shouldn’t complicate things if not absolutely necessary. Microservices are definitely not “KISS” if you don’t have a specific need that justifies them, so this section will be more for the fluff and to present the technologies.
For my end-of-study project, my team and I were developing a software to help parents and teachers be connected with the students’ schooling throughout the year. It was available as a website, but also an iOS and Android application, and all should present the same data. You can imagine the problem: how to provide the same information to all 3 frontends, without having to redo the same code 3 times.
The solution is easy, it is to decouple the frontend (the web client and the applications) from the backend (the part that accesses the database and manipulates the data), by making an API as backend. An API (or webservice) will be working like any backend part of an application, but instead of generating HTML for example, it will return the raw data as JSON:
[
{
"name": "Chili con carne",
"spiciness": "medium"
},
{
"name": "Vindaloo",
"spiciness": "high"
},
...
]
Then, the clients (web application and mobile applications) will connect to that API instead of connecting to the database, and they will use this raw data to display it on the web page using HTML.
Going this route will require you to know more technologies than for any other choices, ranging from a server-side language, probably with a framework on top of it, to a frontend framework to make the requests to your API. But you will also need to configure multiple servers, and potentially much more, depending on the scope of your software.
This concludes this long article presenting the different ways to make a website, from absolute beginner with no technical knowledge, to experienced software engineer with complex requirements.
But keep in mind that all of this is only scratching the surface. For example, AWS (Amazon Web Services) provides more than 100 different services used to build complex websites or applications, manage trillions of rows of data, interconnect different data sources, and much more.
The post How to make a website? – 5 different levels of difficulty appeared first on MindFlash - Programming and more.