How To Build A Website 101

Modern drag and drop website builders (provided by most hosting services) and website builder themes and plugins used with CMS (Content Management Systems) like WordPress, allow people with no coding knowledge to build beautiful websites with loads of special effects, forms, maps and more.

With that said, before getting started on modern website building I’d like to touch briefly on the history of website building for two reasons. Having some background will help many people with an understanding of what is going on behind the scenes when they are building their websites. And maybe a few will what to delve further into coding and the structure behind website design.

At the base of understanding websites are browsers and HTML coding. Browsers are what you use to search the Web, such as FireFox, Google Chrome, Safari, Internet Explore and the newer Edge. Browsers are not just screens on your computer, they are interpreters, they read the code behind a website, and convert that code to readable text and pretty pictures and present the information to you as a website page.

HTML coding is extremely simple to learn today, but back in the beginning information was scarce when the Internet was in its infancy, and it was difficult to find places to learn HTML online and there were few information sources, so you had to glean bits of info from various sources. My best source was a magazine that rambled, but at least contained some helpful information, and after awhile a couple of books came out for using Dreamweaver.

In the beginning the code used to create a webpage was the simple HTML (Hyper Text Markup Language), then they added some JavaScript to enhance the finished product with some simple actions, such as mouse over effects and input forms.

Writing a webpage in HTML code was time consuming so software companies created design programs such as Claris Home Page, a very handy, and good little software web design program that short cut the coding process by adding code with simple key strokes. Like key stroke “B” would add the code for “bold”: <bold> along with the corresponding turn-off code </bold>.

Website design programs made the website creating world a whole lot easier – BUT making a website was still a chore, because if you wanted to make a site-wide change, such as you wanted to change a color on every page, you had to manually go through every single page to make that change. Then along came complete-website-design-programs, and a whole new universe was opened to website designers. These new website design software programs allowed for site-wide changes with just a single entry via a global style option. Microsoft created “Frontpage”, which was bulky and not great, but affordable. But a company called Macromedia created the famous Dreamweaver software, later bought out by Adobe, that revolutionized the website design industry, but it program was extremely expensive, especially when Adobe got ahold of it. Still, if one were patient and watched on eBay a person could pick up a student edition at an affordable price of a couple of hundred dollars.

About the same time, there were other programs created to make websites such as RealBasic for PC and VisualBasic for Mac, but Dreamweaver became the standard, I think maybe because it was more creative.

But the Internet does not allow our world to stand still, new developments kept coming with new programing languages like Java and PHP. These new languages took website design to new levels and allowed more interaction with the reader. So rather than just being a magazine type website, websites could allow readers to interact with the page where a mouse over and click could create a reaction and result in something different happening.

Along with these changes came CSS (Cascading Style Sheets) which allowed more global styling options. With the first global styling, the global only applied to “global” areas, but with CSS coding, content styles could be set in a “Style” sheet which would apply to every page and every area of content.

Ah, the world was good. Then along came CMS (Content Management Systems) which could be used online, in the cloud, and allow multiple designers to work on the same website. But more than that, it put website design into the hands of everyone. No more expensive software programs to buy, which still required some coding knowledge. These CMS programs were open source and free, such a Joomla and the world’s most popular and famous – WordPress, which began as a blogging platform, but has evolved into an amazing and powerful website design platform.

Content Management Systems are strong and powerful, but a simple base – in order to raise a CMS to the next level of power a user can add themes, plugins, extensions, and website builder programs, to create many interactions with readers, from forms, to popups and drop-downs, to floating and changing elements, to name a tiny few from a huge, long list of possibilities

Who can use a CMS like WordPress? To my mind, anyone who can learn a common program like Microsoft Word. WordPress is just a software program, easy to learn and use. There are tons of tutorials on YouTube and text lessons can be found with a simple Google search.

You will need a domain name and a hosting service to use WordPress.org. Note the difference, WordPress.com is a free hosted version, whereas .org is the software and you need to buy hosting service. There are tons of hosting services, I personally use JustHost.com, though I often use GoDaddy to buy my domain names, but having a domain name once place and hosting at another service is for more advanced users.

As I just mentioned, there are other CMS options, such as Joomla, but my choice is WordPress.

Most paid hosting services will include a free website builder, an easy to use drag and drop website design program, if the user does not want to learn WordPress this is an option. Just know that you can not easily move a drag and drop website, but rather copy and paste content only to a new website.

There are additional hosting services that offer totally free hosting and drag and drop website design programs. But generally they require you to use the hosting service’s name as part of your domain name for their free version, so your website name would be a subdomain under their name. WIX is a popular one. A website name might look like http://www.wix.yourname.com

So what is the difference between all of the WordPress options.

WordPress has evolved and today functions as both a blogging platform or a multi-faceted website with or with a blog included. Without coding knowledge, styling is limited to some basic options such as font colors, size, and such.

But in the past few years there have been many site-builder programs introduced for WordPress that handle many styling needs for WordPress websites, builder programs such as Beaver Builder, WPBakery, but my choice is SiteOrigin which is free (or remove the SiteOrigin name at the bottom for a very small fee).

By adding plugins to WordPress, you can create great experiences for your readers and you can add social functions to your website like forums, directories and more. Plugins are sections of code added to your website that do something, like add an input form.

By adding a basic builder program, like Site Origin, you can change much of your site’s styling with no coding required.

Really superior styling options are now available with advance builder programs like Divi, Elementor, and Oxygen. They offer easy styling of most aspects of a website. Now website creators, using these builders, can control many fun features like gradient colors, animated images that move, the ability to make rounded edges, and make wavy divider sections, and so much more. I personally like Divi Builder by Elegant Themes.

All of the builder programs require some learning, the more enhanced the program features the more learning, of course. And WordPress itself requires viewing tutorials to learn it. One of the things I like best with Divi is they maintain a complete library of videos on their website for every aspect of their Divi Site Builder program. Note that Divi has two options that are a bit confusing, there is a Divi builder, which is a plugin, and a Divi Theme that includes the Divi Builder plugin. Themes and plugins are not the same. You can only have one theme, but you can have multiple plugins that do things like create forms, add events, add security, and thousands more.

Going with a website program, like WordPress, and using an advanced website builder program like Divi will require many hours of learning, but the reward will be a beautiful website.

Good luck and have fun!