How to Build Your Own Website Step-by-Step

Getting you website step-by-step
The simplest Index HTML
Index HTML

There are several ways to build a website, depending upon your needs. There are several parts of code that make up a standard web page that are in general use. Plus, there are several ‘code builders’ and ‘website builders’ available. Let’s take them one at a time, from the basic to the more complex.

Bootstrap Websites

Building a website, in it’s simplest form is, an HTML, named index.html. Each page has three parts: the head, body and footer (the footer is below the body). HTML language is marked by angle brackets, made with ‘bookend’ that is, the code has an open tag ‘<>’ and a close tag ‘</>’. All of the code goes between the HTML tags. The title of the page goes between the title tags. Everything you see on the web page (headlines, subheads, colors, articles, lists, videos and images) goes between the body tags. The Cascading Style Sheets (CSS) govern the styles (fonts, sizes, colors) are generally linked to a separate file in the header. The javascript (JS) is generally linked to a separate file or files, usually in the footer.

The simplest web page is Bootstrap HTML
Bootstrap HTML

Bootstrap, made by Twitter, is a popular system for coding web pages. Bootstrap was made for smartphones and was the first system to be responsive to different screen sizes. It does this with percentage sizes instead of fixed pixel sizes and with rows and columns. This Bootstrap html page shows the language set to English, states the standard ‘charset‘ and a few other defaults. Bootstrap is free. You can download the basic code from Bootstrap. Themes are available which use a set of fonts, shapes, colors and designs. Some Bootstrap themes are free. You can download templates that use Bootstrap from themes.GetBootstrap.

Dynamic vs Static Pages

The simplest web page is Bootstrap HTML
Bootstrap HTML

Index pages can also be made with Hypertext PreProcessor (PHP) and saved as ‘index.php’. Other languages, like JS, can do this. For many years PHP was ideally suited for combining with HTML. The advantage with PHP, is that it makes a ‘dynamic’ instead of ‘static’ page. This means that PHP writes the index.php page, with special requirements, every time it is requested by your visitor. This can be powerful for remembering your visitors’ name or what they bought on their last visit, or suggesting new products. These are called functions. Today most websites are dynamic for this reason.

WordPress Websites

Even the Bootstrap themes require that you know at least some code. If that is too much of a learning curve for you, I recommend WordPress. There is a learning curve for WordPress, too. However, it is easier to use. There are two sides to WordPress – front end and back end. The front end is what the public sees, and the back end is your Administrative Dashboard, (your Admin). Once WordPress is set up, you can just write your pages in the Admin back end. When they are published, they will be correctly formatted on the front end.

The most basic index HTML
index HTML

WordPress, which powers thirty percent of the world’s top websites, is built with PHP. WordPress comes in two varieties – .org (which is free) and .com (which is a paid product). Because WordPress began under a free license, the organization must make the code available for free. You can download this code for free from wordpress.org. WordPress stores it’s functions in packages, called plugins. WordPress stores it’s website page parts in a database, ready to be assembled by PHP. More about this below.

WordPress Themes

WordPress also uses themes to style websites. WordPress provides one theme with their downloaded code. Many themes are available at WordPress.org/themes/. The one that is provided with the WordPress code is generally very good.

Some premium WordPress themes are also available. Some of the Premium themes are much better and some are much worse. It’s important to be able to identify a good theme. There is a lot of code included in the WordPress core. A good theme is one that uses the standard WordPress code.

Some new website owners are attracted by the flashy features. And, some theme authors take advantage of that by making their themes with non-standard code. Experienced and qualified authors will use standard code. When standard tools are used, the problems are much easier to identify and fix. This means any qualified programmers can easily understand and fix problems. This makes the repair cheaper and the theme a better value.

Themes get updated. This is to adapt to changing standards for security and style. When this happens, the old theme code is replaced with the new version. To prevent your customizing from also being replaced, themes use a parent-child system. All of your customizations are stored in the child theme. When a theme is updated, only the parent theme is replaced. The Beaver Builder theme includes both parent and child theme.

WordPress Plugins

Thousands of plugins are available through the WordPress website at WordPress.org/plugins/. Plugin functions include SEO, managing comments, moving your website and switching from posts to pages. Downloading and installing can be done from inside your website. Below are some recommended plugins. Some premium plugins are also available.

Web Hosting

Websites live on computers. Your website could live on your laptop, but only you could see it. In order for your website to be seen by the public, it must live on a special computer, connected to the Internet, called a web ‘server’. All space on the server is rented. This is called web hosting. Many web hosting companies can install WordPress and connect the database for you.

192.168.1.5 Isn’t Easy to Remember

Web hosting space is identified by a number. This works for computers but unfortunately it’s not very easy for humans to remember. There is a special name computer system where you can rent a name for your website. This is called a Domain Name. When you get your Domain Name with your Web Hosting, the DNS is automatic.

Domain Names are Easier for People

When you make your website, you tell the Domain Name System (DNS) where your website lives. (If you change web hosting companies, you can just update your DNS, and all the whole Internet will know where that is in minutes.) The most common Top Level Domain (TLD) is .com. Domain names are also rented. There are currently over 200 domain names available, including .org .net, .it and .is.

How to Build Your Website

Step 1. Get your Domain and Web Hosting at a recommend company (I recommend BlueHost.com) When you get both at the same place the DNS is automatic.

Step 2. Get a Premium theme. I recommend WP Beaver Builder.com. They a good reputation, have extensive experience and use standard code.

Step 3. Get quality plugins. I recommend beginners download only from WordPress.org and consider these when you start:

Yoast SEO

JetPack