How to start a website

Whether you want to build a website with minimal coding or you want to control every detail, this tutorial will help you get started.

Table of Contents


All-in-one solutions

Nowadays people have a lot of options to make their own websites, even without writing any code. So, if you don’t want to mess with technical things or you need a website ASAP to validate your idea, you should try one of these website builder solutions below. They handle all things for you: domain, hosting, design and development. They have tons of ready-to-use designs for every possible type of website: blog, corporate, portfolio, online store, etc. Basically, you just need to select a design and add your content on an easy-to-use interface.

Free, but there are ads on your site. You can upgrade anytime to remove them and connect your domain. Click here to try it now!

Free, but there are ads on your site. You can upgrade anytime to remove them and connect your domain. Click here to try it now!

Specialized in ecommerce only. If you plan to start an online store, you should check this. 14 days free trial, credit card not required. Click here to try it now!

Free, but there are ads on your site. You can upgrade anytime to remove them and connect your domain. Click here to try it now!

If you need more information about these services, you should read our detailed How to make a website without any coding article, where we test and compare these solutions.

If you want to dive a little deeper in website development and get your hands dirty, please keep on reading.


Domain

If you already have a domain name, you can skip this section.

Domain name is the online address of a website, e.g.: divpusher.com. It tells your browser where to load the website from. Without them we should type long and ugly numbers (IP address) in the address bar.

You can purchase your own domain at domain registrars for minimum 1 or 2 years. What you need to watch for is the renewal price. Most domain registrars offer lower prices for the first year, however their renewal prices can be notably higher. A few tips before buying your domain:

  • Try to stick with .com extension
  • Keep it short and easy to remember

  • Use relevant keywords if possible
  • Avoid double letters and hyphens

Here is a list of recommended, popular registrars below. Fun fact: in the next section you will learn about web hosting services and some of them offer free domain registration, if you choose their services.


Web hosting

A website consists of files and these files need to be stored. Hosting companies provide space on their servers to make your site available on the internet. There are several different hosting types:

Shared hosting
The cheapest solution. You share a single server’s resource with other users.

VPS (Virtual Private Server) hosting
You get dedicated system resources of a server, without sharing them with others.

Cloud hosting
A virtual server which uses a network of multiple physical servers. Your website or application can access near-infinite resources depending on its needs. You only have to pay for what you use, so this can even result in cost savings.

Dedicated hosting
A single server only for your website.

In most cases a simple shared hosting is enough, especially in the beginning. However if you know that you’ll receive huge traffic – for example you’ll run a radio/tv ad, etc. – then you should use a more serious solution.

Here is a list of the best hosting services based on speed, uptime & cost:

Bluehost
Offers free domain registration for the hosting.

Siteground
Quality, trusted service with 30 days money back guarantee.

Hostgator
45-day money-back and 99.9% uptime guarantees.

InMotion
Offers free domain registration for the hosting.

Connect your domain to web hosting

Once you have the domain and hosting, it’s time to connect them. Note: if you buy your domain and web hosting at the same company, they usually connect them automatically for you. If that’s the case, you can skip to the testing.

Log in to your domain registrar and find a menu where you can edit your domain’s nameservers. Some registrars have a Set nameservers link or a Manage DNS button.

Domain Name Servers (DNS) convert domain names into computer-readable IP addresses.

Open the email that you received from your hosting company and look for information about DNS servers, e.g.: ns1.bluehost.com. Set these custom nameservers for your domain.

Important! DNS records can take a while to propagate. From a few hours to sometimes up to 2 days. But usually you can see changes within 30 minutes. Open your domain in your browser and sometimes hit refresh or hard refresh (Ctrl+F5). Patience! 🙂

Test your domain, upload your first webpage

Usually hosting companies provide a default welcome page for your website, but I prefer to create an own page to test things. Open your favorite code editor. If you don’t have one, I recommend you Sublime Text or Notepad++.

Create a new file, type something and save it as index.html to a location where you’ll find it later. When your site is visited, the first file a webserver will look for is the index.html or index.php file.

Now let’s upload this file. For file transfers we use FTP. With its help you can connect to your webserver and upload/download files. First you need to create an FTP account. Log in to your webhosting manager interface, which is usually cPanel. Check the email that you received from your hosting company, a link to the manager should be there.

cPanel is the most popular web hosting control panel. An easy-to-use interface, where you can manage all of your server settings, email and FTP accounts, files and database.

Find the FTP accounts menu, fill all the fields and make sure that you leave the Directory field empty, so you’ll start in the root directoy when you log in via FTP.

Once you created an account, it should appear in the account list below the fields, along with a button named Configure FTP Client. Click on that button to view the account settings, you’ll use this shortly. Now you need an FTP client to connect the webserver. Download and install a free and reliable one, for example FileZilla. Open it, click on File – Site Manager (Ctrl + S) and add your FTP site.

Hit Connect. The directories and files of your webserver should appear in the right panel. Enter to the public_html or www directory, they both point to the same location: the root of your website. This is where you upload your website files. In the left panel, find the index.html file you created previously on your machine and upload it by clicking on it two times. If there is already an index.html file, just overwrite it.

Now open your domain in the browser and you should see your first webpage!


Design & Development

This is where the heavy work begins. Now you need to think ahead, because there are several paths here. Everything depends on your budget, time and willingness to learn. Here are your options in increasing order of difficulty and time:

Content Management System (CMS)

CMS is a software which provides an interface to create a complete website or web app. If you just started and not familiar with basic web development (HTML5, CSS, PHP, MySQL), this is the easiest way for you to go. There are many free, reliable CMS and they all offer a broad range of features including user administration, discussion capabilities, blog engine, just to name a few. Furthermore you can extend their functions by installing free or premium plugins. For example you can turn your site into an online store, add a forum or a fancy portfolio page. There are also many ready-to-use designs for them, which are called themes or templates.

So basically, you just choose and install a CMS, select a design, add your contents, maybe some plugins and you’re good to go.

In cPanel you can choose from many CMS and you can install them with a few clicks, instead of downloading and installing them manually.

The most popular and free CMS are WordPress, Joomla and Drupal. I personally recommend WordPress, because in the right hands it’s a very powerful and effective tool. It’s open source, many developer improve it constantly and it’s trusted by many big brands. According to statistics, about 1/3 of all websites run on WordPress these days. Recently it also introduced a new page builder interface called Gutenberg.

Usually, you should be able to learn a CMS like WordPress in a weekend, just by reading their documentation and watching tutorial videos.

I think, there is already a plugin or a theme for almost everything on this platform. For example you can install and activate a maintenance mode plugin, so only you will see your website while you build it. All you need to do is search and play.

If you need a more serious design or functionality, take a look around these marketplaces below. They have everything from graphical assets to themes and plugins, for a reasonable price.

If you can’t find what you need, maybe because you want a really unique design or a special functionality, you can always hire a web designer or web developer. Alternatively, there are many resources on the net where you can learn how to design and code your own things. However, first you should learn the basics for that. Keep on reading.

Code from almost scratch with frameworks

If you want to design your own layout and/or develop your own website, this is your section. You can begin with designing a layout then code it to a webpage. Or you can code the frame with functionalities and apply a design afterwards. You decide. Here is an ordered list of things that you should learn for website creating:

Adobe Photoshop
The industry standard in graphics, most layouts are designed in this app. Also it’s used to edit and optimize images. So unfortunately it’s necessary. GIMP is a nice, free alternative, but in the long run you should get Photoshop.

Adobe Illustrator (optional)
Designers use this for logos and prints. It’s vector based, which means you can increase the graphic size without quality loss. Not necessary, but sometimes it comes in handy. You can get it from here.

HTML5, CSS, SASS
The core technologies for building web pages. HTML describes the structure and CSS provides the visual layout. Once you’re familiar with these, check out SASS. And Bootstrap for free, predesigned components.

JavaScript
JavaScript provides interactivity to your website. After mastering the basics of JavaScript, check out jQuery. It makes Javascript more fun and more easy to write.

PHP
The most popular server side language. It’s easy to learn but hard to master. With PHP you can generate dynamic page content, work with databases, handle files and so on. After the basics, learn OOP programming and MVC approach. You’ll need them later.

Databases
You’ll most likely work with databases so you should learn at least one of them. Start with the most popular MySQL. Also read about PDO. It provides a unified interface to talk with many different databases. For example, you can use basically identical code to work with MySQL or SQLite.

These things have already been coded multiple times. They are out there in the form of libraries or packages. Most of them are maintained regularly. You just need to find them and use them.

There are some nice free frameworks, which can help you out with development. Here are my two favorites:

Codeigniter
Small learning curve, small footprint and a rich set of compact libraries. It uses the MVC approach.

Laravel
Larger learning curve, more roboust. It’s useful for larger projects. Check out LaraCasts for video tutorials.


Optimization

Unfortunately, a website is never ready. There is always something you can improve and optimize. Here is a quick overview about things that you should pay attention before and after launching your site. Search and read about them. I don’t go into the details because I could write a whole article about each topic.

Cross browsers support, valid code
Make sure that your site works on all major browsers (Chrome, Safari, Edge, Firefox). Also validate your site. It’s important for browser support and for search engines as well.

Responsivity and retina support
Check your website on tablets and mobile devices to see if they appear properly. This is a common thing now, so if you bought a template, it’s probably already responsive and retina-ready.

Search Engine Optimization (SEO)
You probably want to rank well in Google search results. For this, you need to care about meta tags, content keywords, load speed and code quality, just to name a few.

Caching, CDN
Your site should load quickly. You can decrease load time with caching and/or using CDN services. It’s especially important, if your site starts to receive more serious traffic.


Final words

I hope you found this guide useful and you see things more clearly now. In case you think something is missing, incorrect or problematic, feel free to contact us! Happy coding!

loading
×