DIY Websites for Entrepreneurs and Small Businesses

Fundamentals

Fundamentals

Okay, so we promised not to turn you into a code geek or hipster designer to get things done. So, this section might feel like we’re going back on our word. We assure you, we’re not. We don’t expect you to become experts at these things, but there are some things we must insist that you be aware of. Most of this is just terminology that is used in this book and elsewhere on the internet. Knowing these terms (or at least having this section as a reference) will help you have more succinct communication and a better understanding of what you might be reading. Including what you’ll read in this book.

Browsers

When we talk about browser, we’re mostly speaking of “web browsers.” There are, in fact, other kinds of browsers, but for our purposes, these are mostly irrelevant. In the context of this book, “web browsers” are just “browsers.” But, what the heck is a browseranyway? And, why should we care?

Let’s start with the second question first. Everyone visiting your website will do so through a browser of some kind. The full experience that any of your visitors have with your site is largely dependent on the browser that they are using. This is why the vast majority of time spent building a website is in dealing with browsers. Web designers and developers do everything they can to minimize the amount of effort that needs to be put into testing in, and tweaking for, the various browsers out there. The good news for you is that CMSs (see below) and their themes (see below) largely take care of this problem; but not completely.

Each browser on the market is built and tested by different teams of people hired by different corporations with different motivations. All of them, more-or-less, operating from a single set of published standards that allow each browser to render effectively the same thing. On top of this, technology and standards change over time. So, what once worked, may no longer work, while things web professionals long wished worked, but don’t, eventually start working.

Technically speaking, a web developer has hundreds of browser implementations to contend with, each providing a slightly different experience. That is a daunting and overwhelming idea.

Take a breath. We got ya.

You are going to do all of your work in one browser, in one version, and test your site in a few others.

You are going to do all of your work in the latest version of Chrome, from Google. If you already have Chrome installed and need no further explanation, skip on to the next section. But, if you’re not sure about using Chrome, let’s talk rationally.

  1. As of this writing, Chrome is the most popular browser on the planet – http://moversandmakers.xyz/browsermarketshare. This means that it’s very probable that most of your visitors are using Chrome.
  2. Chrome is available for most platforms and is consistent across platforms. Whether you’re using Windows, Mac, or Linux(Linux users, we question how much you need this book), Chrome will behave and function mostly the same. This also makes it much easier to provide instructions in a book.
  3. As of this writing, Chrome’s engine (let’s not dive too deep here) is the best at implementing the “standards” – http://moversandmakers.xyz/browserstandards that we briefly mentioned above. This is important because the bulk of your work will be standards-compliant with tweaks to accommodate other browsers. This minimizes the amount of time you have to spend building a site. Plus, Opera recently abandoned its “engine” to use Chrome’s engine. Bonus!
  4. Chrome, like other browsers, is bundled with “dev tools” that you might need from time-to-time, especially when testing for mobile. Chrome’s tools, in the humble opinion of the authors, are the best available. When you get to the section for testing your site on multiple mobile devices and you get to use Chrome’s tools to do so, we think you’ll agree.

So, your first task is to go download and install Google’s Chrome – http://moversandmakers.xyz/chrome.

Finally, eventually, you’ll be installing a few different browsers, or at least, borrowing browsers to test your site. It’ll be fun, we swear.

Now that you have Chrome installed, if you’re itching to get started, the rest of these fundamentals can be saved for later. Just remember that this section is here for reference. If, however, you’re the type that wants to be fully informed, we encourage you to read through the remainder of the fundamentals.

Domain Name

chrome_url_domain
A Domain NameA domain name is simply a convenient name that hides a website’s real address. This is achieved through DNS (see below) and provides you a way to brand your website and stake out a unique corner of the internet. A domain name consists of a domain name a dot (period) and a top level domain (TLD). For example, google.com is “google” as the domain name, “.”, and “com” as the TLD. For our purposes, a domain name does not include the portion in front of the domain name, for example. “www.” This is called a subdomain. A website’s address can contain zero or more subdomains. A domain name and TLD alone, without a subdomain, are sometimes called a naked domain (e.g. https://google.com). The domain name also doesn’t include everything following the forward slash (“/”). This is called the path and file portion of a URL (see below).

Be careful when looking at domain names, though. It can be tempting to see “google.com.cn” as belonging to Google because it looks like “google.com” but in reality belongs to someone in China because it technically ends in the “.cn” TLD. In this case, thedomain name is “com.cn” and “google” is a subdomain. Domain names like this are often designed to trick you. To make this worse, second-level domains like “.co.uk” exist and are legitimate. For example, “amazon.co.uk” is a legitimate domain name for the Amazon online superstore in the United Kingdom.

A domain name must be purchased from a Domain Name Registrar, or registrar for short. We’ll guide you through that process later.

DNS

DNS, or domain name system, is the backbone of the web. Anytime someone clicks on a link, or types an address into theirbrowser‘s address bar, the first major activity a browser does is to connect to a DNS server to find out the real address of the site. The real address of a site is an IP address. You may have seen these numbers before, they look like, 192.168.0.1 or maybe a newer address like, fd30:0000:0000:0001:ff4e:003e:0009:000e.

That’s the most we’re going to discuss IP addresses.

The important information is knowing that DNS servers exist and their job is letting everyone on the internet know exactly where to find the physical server for a set of domain names. DNS is also responsible for directing mail server to the physical machines handling mail for a domain name.

Some DNS servers, usually called nameservers, act as an authority for a Domain name. This is configured through a registrar and functions as the starting point for finding the right computer to make internet requests. For your purposes, you are going to have to configure nameservers in the near future. Don’t worry, it won’t be too bad and we’ve got you covered.

URL

A term you’re likely to hear is URL (or less often, URI). As you build your site, you will begin to concern yourself with URLs, and more specifically, slugs. A URL, or Uniform Resource Locator, is the text you see in the address bar of your browser when you’re visiting a website (see below). URLs follow a very specific format and allow any resource (information, file, data, page, image, whatever), to be found on the internet.

A URL format is:

[protocol]:[delimiter(sometimes optional, often //)][address or domain (see above)]:[port]/[path (optional)]/[file (optional only for index-level pages)]?[query data]#[anchor]

Let’s break this down in an example:

http://www.stackoverflow.com/questions/176264/what-is-the-difference-between-a-uri-a-url-and-a-urn/28865728?lang=en#28865728

“http” is a protocol. Basically, our browser is saying that we want to talk to a webserver. If we used “https” we’d be saying that we want to talk to a webserver using a secure connection. If we used FTP we’d be indicating that we intend to transfer files, and groups of files, to and from the server.

“//” is the delimiter. Most URLs have this. The only exception you’re likely to see is “mailto:[email protected]” in which the protocol indicates that we want to send an email to that address. Another exception is using “javascript:” to indicate that we intend for the browser to execute code instead of following a link.

“www” is a subdomain. The commonly used “www” subdomain has a long and varied history and still persists in URLs today. Many sites, however, will redirect you to a naked domain (see above). Essentially, the subdomain indicates a particular server or set of servers dedicated to a single function or job. In this case, we are saying that we want to talk to the webserver.

“stackoverflow.com” is the domain name with its TLD. This is how our browser determines where the webserver is located on the web using DNS.

“questions/176264/what-is-the-difference-between-a-uri-a-url-and-a-urn/” is a path that directs the webserver to find the resource (data) that we are looking for.

“1984225” is the file, or specific datum that we wish to view in our browser.

“lang=en” is a query parameter that gives the webserver information specific to our request. Presumably in this case, we are requesting that the file be returned in English.

“28865728” (following the #) is the anchor that we’re interested in. The intent is that the browser will scroll our window automatically to that section of the page.

Dang! That’s a lot. And, whew, that’s confusing. Right? Okay, don’t worry about fully getting it. Remember that this section is here for reference.

Slug

A slug is a term used by WordPress and other CMSs (see below) to describe the combined path and file portions of a URL used within the system. As site builders, we have some control over slugs because we want to be able to create easy-to-remember slugsfor our content.

Webserver

A webserver (or web server) is the computer that is responsible for sending all of the data that makes up a website to the visitors computer through an internet connection. Often, these days, a webserver is actually a collection of individual machines working in concert with each other to do the job. This is done to handle the large volumes of visitors and to minimize the amount of downtime that might occur due to hardware failure. For our purposes, whether it is one machine or many, we are going to think of it as a singlewebserver.

Web Host or Hosting Provider

The vast majority of entrepreneurs and small businesses (heck, even larger businesses) will employ a web host to provide, maintain, and manage a webserver on their behalf. Soon, you will be one of them. A web host, or hosting provider, is a business that has purchased a large amount of computing machinery and pay for a large amount of bandwidth and make it available to their customers. They have the job of keeping everything running and keeping your site available. Some providers take shortcuts to keep costs down. Some put little effort into their job and charge too much. Needless to say, not all hosts are created equal. But, don’t worry, we’ve already piloted a path through all of this and you’ll be using our favorite hosting provider.

Website

All this time we’ve been talking about websites, building, hosting, and finding websites, and webservers, and it may seem obvious what a website is. But, it is our experience that many people can’t adequately explain what a website is. Let’s put it into succinct terms for our purposes.

A website is all of the data that is served from a webserver at a single web address (i.e. domain name), not counting the path andfile portion of the URL. For example, everything you can find at http://www.oreo.com/ (yum, Oreos) is a single website. When you visit http://www.oreo.com/wonderfilled/, you are still on the same website as http://www.oreo.com/recipes/. But, when our European friends visit http://www.oreo.eu/, they are on a different website. And, if you happen to visithttp://www.mondelezinternational.com/~/media/MondelezCorporate/Uploads/downloads/OREO_Fact_Sheet.pdf, while it’s still an official Oreo destination, it’s also a different website.

Webpage

If a website is all of the resources available at a single domain name, then a webpage is a single collection of resources located at an address including the path and file portion of the URL along with all of the query parameters. This single collection of resources will consist of a single HTML (see below) document, CSS, JavaScript, fonts, and images to complete the page (and sometimesplugin data such as an embedded streaming video played in Flash). Many times, the actual file portion of the URL is hidden because we’ve loaded the default page, or the index page. For example, https://www.google.com/intl/en/policies/faq/index.html is a singlewebpage, but so is https://www.google.com/intl/en/policies/faq/ because the index.html is the default and assumed to be in theURL.

Web Presence

This is jargon and we’d prefer to avoid jargon in this book, but this particular jargon is everywhere. It’s mostly used as an insider way to say website, but it often holds connotations that extend beyond a site. Many times, people using this term refer to all of your sites (for people that own multiple sites). Or, sometimes, they’ll use the term to refer to your site, plus all of your social media profiles. Many times, we as professionals, need to ask people using this term to clarify what they mean by web presence. So, don’t be afraid to ask, “What exactly do you mean when you say ‘web presence?'” Hopefully, they just mean your website and the conversation is simple. Although we don’t love the use of the term, we want to help you understand this so that if you have someone approach you about this, you will be well informed.

HTML

HTML is an initialism for Hypertext Markup Language. HTML is, essentially, a programming language. Programmers and computer scientists will bristle at this simplification, explaining that HTML is actually a “markup language”. But for our purposes, it is essentiallycode designed to instruct a computer to perform certain actions. HTML is structured in what are called documents. A singledocument, when rendered in the browser, is a single webpage. What you see in your browser when you view a webpage is the result of all of the instructions that HTML gives to the browser. HTML is what gives the page structure and content and is the fundamental language of everything we’re doing. Luckily, you will be using tools that abstract the HTML away so you don’t have to worry about it… yet. Once you become sophisticated, you’ll likely find some reasons to start mucking with HTML. But, that’s outside of the scope of this book. If you’re looking for a good resource to learn HTML, we recommend this book: HTML Beginner’s Crash Course – http://moversandmakers.xyz/html5crashcourse

CSS

CSS is an initialism for Cascading Style Sheets. CSS, like HTML, is a programming language. Again, experts will object to this simplification, but for our purposes, CSS also instructs a computer to perform activities. While HTML gives a webpage content and structure, CSS gives the page presentation, style, and aesthetics. The motivation behind CSS is to allow any given HTML page to be styled differently depending on the medium. For example, many sites have two separate style sheets, one for in the browser, and one that determines how a page looks when it is printed. For the most part, the CMS you will be using will take care of generating the CSS for you. But, whenever you’re messing with how a webpage looks, you’re likely going to be editing a collection of CSS files. But, that’s outside of the scope of this book. If you’re looking for a good resource to learn CSS, we recommend this book: CSS: The Missing Manual – http://moversandmakers.xyz/cssmissingmanual

JavaScript

JavaScript (technically ECMAScript) is definitely a programming language and you’ll get no arguments from experts on this one.

Before we discuss JavaScript though, we need to make something perfectly clear: JavaScript is not Java. Java is a language created by Sun Microsystems in the mid 90s. JavaScript was created by the same people that created the Netscape browser. It was inspiredby Java, but it was intended to be a lightweight language that ran in the browser. But, because Java can also run in the browser (as the result of a technology called Applets), and because they share some of the same name, they are often confused. The Java Plugin, a tool that allows Java Applets to run in the browser, is often the source of security vulnerabilities. Most experts encourage developers to avoid using Java Applets in the browser. However, JavaScript is nearly ubiquitous and poses a lower security threat (though, it can also be a security vulnerability from time-to-time).

While HTML gives a page structure, and CSS gives a page style, JavaScript provides the page with behavior. For the majority ofwebsites and webpages today, JavaScript is indispensable for making sure forms are filled correctly and that elements on the screen respond to feedback. JavaScript also makes AJAX possible, which allows pages to communicate with the server without loading a new page. Trust us, your life is better with JavaScript.

While we won’t be working with JavaScript, it will be a part of your website. As your skills develop, you’ll find more and more need to dive into a little JavaScript. But, that’s outside of the scope of this book. If you’re looking for a good resource to learn JavaScript, we recommend this book: You Don’t Know JS: Up & Going – http://moversandmakers.xyz/ydkjavascript

PHP

Some websites are static: when a browser requests a webpage from the webserver, the webserver merely serves a file from a directory on a hard disk. But, many websites these days are dynamic. Instead of a single HTML file, the HTML is broken into smaller pieces and the webpage is assembled dynamically, many times loading data from a database. While HTML itself cannot do this, other languages can. One of those languages is PHP. The most popular CMS available, WordPress, is written in PHP, and you’ll be using that. But, don’t worry, you won’t need to know any PHP. However, as you’re hunting for ways to customize your new website, you many encounter people talking about PHP. So, just remember this, PHP is a language that allows HTML documents to be built on the server with data specific to the client’s request.

If you’re feeling feisty and want to learn to be a PHP programmer, check out this book: PhP: Learn PHP Programming Quick & Easy – http://moversandmakers.xyz/phpeasy

MySQL

While data can be stored in files on the server, it can also be stored in a database. The database allows for data to be organized and retrieved efficiently. This is done through a technique called a query. The CMS you’ll be using relies on a free database calledMySQL. Every page, every post, every configuration you make will be stored in a database. Luckily, all of that is taken care of for you. However, you may encounter some discussion about MySQL in your travels, so remember, it’s a free database.

If, for some reason, just the thought of MySQL gets you excited, you might enjoy this book: MySQL Explained: Your Step By Step Guide – http://moversandmakers.xyz/mysqlexplained

Linux

Almost all webservers that support PHP and MySQL run on an operating system called Linux. The hosting provider you’ll be using will host your site on Linux.

If you find yourself needing to know a lot more about Linux, take a look at this book: LINUX: The Ultimate Beginner’s Guide! – http://moversandmakers.xyz/linuxbeginner

Apache

The webserver software running on Linux at your hosting provider will be Apache HTTPD.

Of course, you can find books on Apache, too: Apache: The Definitive Guide (3rd Edition) – http://moversandmakers.xyz/apacheguide

FTP, SFTP, and SSH shell

When setting up and deploying a website, there are the occasional needs to connect directly to the server and manage files and commands the old fashioned way. The simplest way to transfer files is through FTP. But, if you care about security (and you should), you should use SFTP instead. When you need to connect to the server to run commands, you’ll use a shell through SSH.

All of this, however, is way outside of the scope of this book. If you find yourself in need of learning FTP, SFTP, and SSH, try this: SSH Mastery: OpenSSH, PuTTY, Tunnels and Keys – http://moversandmakers.xyz/sshmaster

SEO (Search Engine Optimization)

You’ll likely see this term quite a bit, including in this book. Search Engine Optimization (SEO) is the process of optimizing and marketing a website in a way to make that site appear higher in search results. The goal of SEO is “first ten” or on the front page of search results. We’ll talk more about SEO in Part 3 – Going Live.

Plugins

One of the major features of a CMS is the support for plugins. A plugin is a small bundle of software, that when installed in another piece of software, augments and enhances that software. For our purposes, think of them as building blocks that allow you to customize your software to suit your needs.

CMS

A CMS, or Content Management System, is a suite of software that runs on a webserver that provides all of the basic framework of a website, except for the content. There are many CMS options out there, but for the purpose of this book, we are going to focus onWordPress. WordPress is written in PHP, connects to a MySQL database, runs on Apache HTTPD on a Linux server at your hosting provider. All you have to do is add content and style… once you get it set up of course.

There are a lot of reasons why we recommend using WordPress and why we’ve put together this guide in this way.

All of this, of course, is totally inside the scope of this book. So, please, read on. Enjoy.

Are you ready to get started? Excellent, let’s begin.