WebSite Basics

Plus: Creating Sites with Wordpress & Wix

James E. Martin

Instructional Designer
Instructional Design and Support Services | University of Arkansas Global Campus
Last Revision: 08/31/2023

About Me

Making websites has been part of my life since the birth of the web.

It started as a hobby. It became my full-time job. It's now a hobby again.

The skills I learned doing it have been useful in every job I've had.

wheatdesign.com

Questions?

Rather than end with questions,

I'd like to start with them.

Basic Concepts

Some Key Terms and Ideas

Client/Server

Live websites--the ones you can visit, are "hosted" on a web server. Space on a web server is provided to you by a "hosting provider" (a.k.a. "webhost" or "host." 

Request

Image credit: The Differences Between Desktop Application testing, Client-Server Application Testing and Web Application Testing

Response

Domains & Subdomains

Behind the scenes, websites have an IP address (e.g., 142.251.46.206). Names are easier to remember. The technology that maps names to their numbers is called the Domain Name System (DNS). You register a domain name at a Domain Name Registrar (for an annual fee). 

Management Systems

Modern sites are usually managed with Content Management Systems (CMS). Wordpress, Wix, Weebly, etc., are all-in-one systems which combine hosting, content management, and domain name registration. 

History

POsts vs Pages

Posts: 

Reverse-chronological entries (i.e., newest on top). E.g., a blog, news items, site news, etc. One page (e.g., News) contains the most recent post(s). Each post has its own URL.  

Pages: 

Permanent destinations (e.g., About, Services, Portfolio). Each page has its own URL. 

Navigation

The "Rule-of-Five"

Five top-level menu items is a good limit

Common Top-Level "Buckets"

Home, Products/Solutions, About, Blog/News, Contact

Wordpress Basics

Creating Your First Website in WordPress

wordpress.com

Step 1: Go to wordpress.com. Click Get Started.

Step 2: Sign up with Email, Google, or Apple

Finding a unique username can be challenging.

Step 3: If you're on a personal machine, save your password.

This is Google Chrome (116.0.5845.96) running on macOS Monterey (12.6)

Sidebar: Let's Talk about Domains and Subdomains

Hold on for a minute. We need to discuss a few things.

Domains & Subdomains Q&A, I

Q: How important is a good domain name?

A: It used to be of supreme importance.

Today, it's still important, but search engine ranking are what really count.

Domains & Subdomains Q&A, II

Q: Is the free plan good enough? 

A: Probably. There will be a banner advert across your site that prompts others to sign up for the same free plan. 

Domains & Subdomains Q&A, III

Q: Is Wordpress.com a good deal for domain names and hosting

A: Yes. The cheapest hosting plan is $48/year (i.e., $4/mo.), has no banner ads, and includes the a domain name for free for the first year ($12/year thereafter). 

Domains & Subdomains Q&A, IV

Q: What makes a good domain name?

A: Great domain names are 1) Short, 2) Simple, and 3) on brand. Examples: cnn.com, nike.com, amazon.com. 

Bad domain names are long, contain special characters, and are unrelated to the thing the site is supporting. 

Step 4: Pick a Domain or Subdomain, I

Now that you know what domains are, search for one that makes sense.

Step 4: Pick a Domain or Subdomain, II

Choose a free subdomain, or opt for a for-pay domain.

For this example, I'm going with the free plan. 

Step 5: Select a Plan

Choose Continue with Free

Step 6: No, really, I want the free one

Step 7: Specify Goals or Skip to Dashboard

Choose Skip to dashboard

Step 8: Write Your First Post or Skip For Now

Choose Skip for now

Step 9: The Wordpress Interface, I

Tools down the left, content on the right.

Tools

Content

Step 10: Settings

Choose Settings > General

1

2

Step 10: Settings 11: Site Title, Tagline, & Icon

Set your title, tagline, and icon. Then Save Settings.

("Settings" is also one of the places where you can publish your site.)

Step 11: The Wordpress Interface, II

Choose Posts > All Posts

1

2

Posts

Step 11: The Wordpress Interface, III

Choose Pages > All Pages

1

2

Pages

The site I built while creating this presentation is live at https://neopragmatism.wordpress.com/

A Really Basic Blog Site

More about Wordpress

https://wordpress.com/support/getting-started-with-wordpress-com/

Wix Basics

Let's Try Something Similar in Wix

wix.com

Step 1: Go to wix.com. Click Get Started.

Step 2: Sign up with Google, Facebook, or email.

Step 3: If this is a trusted computer, save your username and password.

This is Google Chrome 116.0.5845.140 on macOS Ventura (13.4.1)

Step 4: Choose For myself, my business or a friend. Then, Continue.

Step 5: Choose Blog.

Step 6: Let's stick with the generic template

Note: This is not a domain name.

(But it will be part of your URL.)

Step 7: Choose a Site Name

I went with Share knowledge.

Step 8: Choose a Type or Skip

I kept Blog and deselected Instagram Feed.

Step 9: Choose apps

Step 10: Click Continue to Dashboard.

https://manage.wix.com/

The Dashboard

Step 11: Design your website

Step 12: Take the easy way out

Step 13: Yet another wizard.

Step 14: Pick a Theme

Step 15: Pick a Template/Design

Step 16: Add pages: About + Contact

Step 17: Back to Dashboard or View Live Site

The one I built while creating this demo is live at https://wheat16.wixsite.com/instructionaldesign

Learn More

So much to learn. So little time.

Cederholm, D. (2015). CSS3 for Web Designers. Second Edition. A Book Apart. 

Gunn, D. (2023, July 13). "The History of Blogging: From 1997 Until Now (With Pictures)." Themeisle. 

Keith, J. & Andrew, R. (2015). HTML5 for Web Designers. Second Edition. A Book Apart.

Krug, S. (2014). Don't Make Me Think, Revisited. 3rd Edition. New Riders. 

Strehlow, R. (2023, June 13). "How to easily start a blog and monetize it in 2023." WIXBlog. 

"The birth of the web." (n.d.). CERN.

Learn More