Complex Web Stuff Explained Simply

ou’ve finally had enough. Everybody and their neighbor has been telling you that the only way to keep your business relevant in today’s age is to have a fancy-pants website where customers can learn about you and place online orders. Well, everybody and their neighbor is right, and you’re realizing that now.

So it’s time to build a website of your own, but before you can do that, you’ll need a website 101 crash course to learn what the internet even is. Luckily, you’ve found the Pretty Nice Websites blog and found this post. Now that we’ve described this exact situation that is happening right now, let’s jump in and learn all about how the web actually works.

What is a website?

The dictionary definition for a website is:

Noun: A connected group of pages on the World Wide Web regarded as a single entity, usually maintained by one person or organization and devoted to a single topic or several closely related topics.

Besides the fact that nobody has called it the World Wide Web since 1757, this doesn’t shed a whole lot of light on the whole website business. Let’s break it down.

Essentially, a website is made up of pages of text that contain all the information you see on a on the screen. These pages include HTML text, which structures all the content on the site, and CSS text, which styles the content (aka colors, fonts being used, etc.) All of these files are stored on a server, and get shown to you via your browser when you visit the URL that points to those specific files.

Programming Languages

All websites are built with code called a programming language. Each language has its own set of language and syntax, and they all make different things happen.

The three most common programming language on the web are HTML, CSS, and JavaScript. Wikipedia calls the three of them together a triad cornerstone of the internet. Sounds intense We at PNW call them the three musketeers, and each language brings an essential piece to bringing websites to life and making them look beautiful.

• HTML - Stands for Hypertext Markup Language and it’s the basis of any website. Use this programming language to build all the elements on a page (e.g. a photo of you and a bio, the navigation at the top of the page, or the footer)
• CSS - Stands for Cascading Style Sheets. CSS styles all the elements you create using HTML. You can change colors, fonts, where stuff appears on screen, all using CSS.
• Javascript - Stands for JavaScript. This language is what makes your elements interactive with users on your site. For example, you can create an contact us form using HTML and then style it using CSS, then with Javascript create a rule that when someone submits a contact form, it gets emailed to you and the person who sent it gets a nice confirmation that you received it. Neat!

How do I build a Website

Once you know the basics on what a website is composed of, now there’s the task of actually building it. You have a few different options to get your super cool site live on the internet.

CMS

By far the easiest way to get a website up and running is through some sort of CMS platform. CMS stands for Content Management System, and you can use them to manage your content. How about that! With a CMS, you don’t need to write out all the code yourself. Instead, the CMS platform typically has a theme you can select, which is a collection of pre written HTML, CSS, JS files that you can simply plug in your own web copy, photos, colors, and you’re all set.

Here are some popular CMS platforms:

• Wordpress - 25% of the internet is run on Wordpress and for good reason. It’s fairly easy to use and these sites have a lot of customizability. However, of all the popular CMS platforms, Wordpress requires the most knowledge of programming.
• Squarespace - Very easy to use and requires zero programming knowledge. Not a lot of room for customization
• Wix -  Similar platform to Squarespace. A little higher learning curve, but has more customizability
• Webflow - Webflow is a designer tool with built in CMS functionality. Because it’s a design tool first, it allows for full customization on any website, but the learning curve is very steep. No coding is necessary, however, a base level knowledge of programming is very helpful. It’s what we use for all our sites here at PNW.

Text Editors

If you are a true rebel and want to completely build your website yourself, sans a CMS platform, then hats off to you! To do this, you’ll need to first have a strong base level understanding of each of the three foundational programming languages. If you’re good to go there, then what you’ll need to do is download a text editor tool. Preferably one that is built for coding, which will help you ensure there aren’t any bugs in your code. Two great text editor options are Atom or Sublime.

Next step, get to coding! It’s very important to stock up on red bull, queue up Lo-Fi Study Beats on Spotify, and lock yourself in a dark room until you’ve coded out your entire site using text editor.

Now that you’ve coded out your site files using your favorite text editor, you’ll need to upload your files to a server so other intrepid internet users can find it. Let’s move on to domains and hosting to find out what the means.

Domain Names and Hosting

Whether you’ve built a site using a CMS tool, or you’ve coded out the files yourself, you’ll need to have a domain and hosting in order for your site to actually live on the internet. You domain name is the URL, or web address, where people find your website. Hosting is the little space in the internet where your website lives. You’ll need both in order to have a functioning website. Among the many analogies we've used to try and explain this over the years, none suck less than the houses and addresses breakdown.

Domains

Let’s think of your website as a house, and the entire internet is a massive city with a sh*t ton of houses in it. In order for people to find your house, they need your address. So, once you have a website, you can go to a Registrar like GoDaddy or Namecheap, and buy an address for your website.

Unlike the real world, on the internet you can buy an address and then put it on your house later. You can also by multiple addresses and put them on the same house. This is known as domain forwarding, and it’s great for search engines which we discuss in our post on SEO.

Hosting

If your domain is the address to your home/website, then your hosting would be the plot of land on which your house is built. You can rent a plot of land from a server, and there are a bunch of servers you can choose from, some with more benefits than others like price or security options. Popular servers include Amazon Web Servers or WP Engine. Just like when you’re house shopping, you’ll want to find the right server, or neighborhood, for you!

So just to recap using our house analogy:

Your house is your website. The walls, or structure, is built using HTML. The wallpaper and cool photos on the walls is built with CSS, and the electricity powering all your appliances is JavaScript. Your house is built (hosted) on a plot of land your rent in your neighborhood (server). Your domain is the address which people use to find your house. And all the neighborhoods together equal the massive metropolis know as the internet.

Whew! Hopefully that helps demystify the magic of the internet just a bit. And now that you are a full blown web master yourself, no need to hire us! Have a good day!