(watch this video in a new tab or window)

Hi, I'm Kirk Hopkins and I wanted to let you know that I created most of the video tutorials used for this class after a recent accident where I fell off a barn roof. I'm feeling much better now but I did have a concussion from the accident and as I edited the lessons I noticed that I looked a little confused and I had a little scratch on my nose but all the lessons are good and I'm feeling much better now, and I hope that you enjoy this class. Thanks. Bye.

(watch this video in a new tab or window)

Hi, I'm Kirk Hopkins. Welcome to IMS222. In this class you'll learn how to make great looking, highly useable, web pages and web sites from scratch using a text editor. We'll primarily cover HTML5 and CSS3. We’ll also look at Javascript and PHP. You're not expected to know any of this prior to the class. We'll also cover some computer basics so that you can edit code quickly.

The class will be done in a flipped classroom style, where content is provided primarily in video format (with transcripts for the videos) for you to cover on your own. In class we'll practice the learned content by creating web pages highlighting the new concepts. We'll also discuss content from the videos as well as work on assignments, projects, and help each other.

There are quizzes and exams in this class. As long as you do your work, come to class, and participate, you should be fine. There is a lot of content to cover in a short amount of time so be ready to devote time to this class.

I'm looking forward to seeing you in class.

(watch this video in a new tab or window)

In this class we'll learn great web design together.

I'll get you started on concepts but will not spoonfeed you every html tag or css element known to man.

We'll learn how to find code, because you just can't memorize everything.

And when things change in the future, you'll be able to figure things out on your own.

Why not start now?

I won't leave you hanging though.

My most important rule in computing is, "don't freak out"

The world won't end if you mess up your page. With good coding practice, by making one little change at a time, you won't have that problem anyway.

The 2nd most important rule is, "don't keep banging your head on a wall"

If you get stuck on something, take 5 or 10 minutes to try to figure it out, if you're still stuck, ask someone for help.

My 3rd favorite rule is, 'manage your time'.

Don't wait until the last minute to do your work. Do it early, so there won't be an emergency.

(watch this video in a new tab or window)

Some videos in our class may have references to things that we’re no longer using. We previously used UDS, which stands for Universal Disk Space. The IMS department wanted our class to move to a hosted solution like BlueHost for our web space/class work. You may see references in the class to UDS. Fortunately, the materials were originally developed to use the webdav method to manage web files. BlueHost offers webdav as an option as well. So if you see something referring to UDS, you can know that the concept can be interpreted for BlueHost or any service provider offering webdav connectivity.

The second big change is with my text editor. I primarily used TextWrangler on the Mac for our videos. It’s not offered by BareBones any longer. I recommend BBEdit in it’s place for the Mac.

(watch this video in a new tab or window)

For our class, you'll need web space. In this tutorial, I'll show you the basics of getting web space with BlueHost. You're welcome to use whatever hosting site you like. Once you have web space, you'll setup an IMS222 folder for our class which I discuss more later. You'll also let me know what the web address of your class work will be. I already have web space on bluehost and will use that as a student for course material demonstrations.

You'll only need to signup for the lowest price option. You do not need to purchase any extra services. I've been using bluehost for a while now and the price has always been under $5 a month and is typically around $3.50 a month. The signup may look a little different from the recording of this tutorial but it should be similar.

You'll probably want a site name of something like www.FirstNameLastName.com but you can choose whatever you like. Remember your username and password. It'll make your life a lot easier.

You'll need to work with your service provider with support questions. I'll do what I can to help with code questions but it's your responsibility to work with your service provider for connectivity and related issues.

Let's get started walking through the beginning of setting up your web space.



Let's go to BlueHost which is at www.BlueHost.com and choose the get started now option
There are a few different services
I'm going to select the basic service which is currently $2.95 a month
I hope you have that option when you sign up
Pick a new domain if you don't have one
I'm going to try www.kirkhopkinsims and click next
If your's is taken you'll need to pick a different name
It looks like mine is available
I already have web space on BlueHost which I will use for our class so I am not going to complete the signup
You'll need to continue walking through all of the options
You may want to remove the domain privacy protection
Site backup
SiteLock security
Unless you want those features
You sign up for the service for 3 years to get the advertised rate
If you sign up for less time than that, the price will be higher

(watch this video in a new tab or window)

BlueHost supports webdav as well as ftp, two methods of managing files on your web space. BlueHost has something called the cpanel, which is a web-based control system. It's something unique to them. To get to it, you can go to www.bluehost.com and use the Login option. My account is www.kirkhopkins.com. I currently have subfolders on the site, but to login, you just use your domain name.

Once you're logged in, you'll find things the cpanel. Hopefully you noted your username when you setup your account. If not, it's right at the top in the hosting services section. Even though my web space is www.kirkhopkins.com, my username is kirkhopk.

For our class, you do not need to install anything from the website section, setup email, work in the domains section, or anything like that. I recommend using webdav to connect to your web space, but will also show you ftp methods as well. In short, you're allowed to upload your files to your web space however you like, but I strongly recommend the webdav method.

Select 'Web Disk' (you shouldn't have to login again)
Select 'Access Web Disk'
Choose your operating system, or the closest option (they're a little behind on Mac versions, but that just means that the old version still works)
and follow the instructions

You will be able to use this for all future class work. I refer to this as 'mounting your web space'. I like it because it makes working on your site as familiar as moving other files around on your computer. On a Mac, when you mount your web space, a Finder window will open up. You can copy files, create new files, delete files, and duplicate files just like you would do with any other file. Windows is similar, although the program is called 'Windows Explorer' or 'File Explorer' instead of Finder.

(watch this video in a new tab or window)

My preferred way to edit web pages is with webdav. You can use this method of managing your web space after setting up webdav. Here I'll connect to my BlueHost web space using webdav, I'll create a new IMS222 folder, then I'll play around with creating a new page, testing the page with a web browser. I'll also edit the page and show my work flow for editing code. Next, I'll duplicate a page to show how I make the page for the next assignment. Finally, I'll delete the page. You'll see how quick and easy it is to manage a website using webdav and will probably wonder why anyone would use anything else.

This is for the Mac. You will follow a similar method for Windows. Whenever you see 'Command' listed for the Mac, you can generally use 'Alt' for Windows.

Connect to web space
Click on the background to select the Finder
Command K
Enter the server address
Use the + sign to save it for later
Connect
Enter your username and password if it's not saved

Create a new subfolder
I like column mode on my Mac. We'll work in the www folder, then in the IMS222 folder.

Create a new document
Create a new 'WebPage00.htm' page using your text editor and save it on your desktop.
Drag that document into the IMS222 folder in your web space.

Edit the new document
Right-click and edit with your text editor. I'm using BBEdit.
Type 'HelloWorld'
Save it

Check the new document (which is a web page)
Mine is at http://www.kirkhopkins.com/IMS222/
Choose WebPage00.htm
Yay, it works.

Edit the live document
Command tab to the last program (your text editor)
I'll put some new text in
Command S to save it
Command tab to switch to the web browser
Command R to reload the page
Yay, it worked

Now I'll switch back to make another change
Command tab
Type something
Command S
Command tab
Command R
Yay, it worked again

For WebPage00.htm, you should only have 'Hello World' so next I'll remove the extra text.
Command tab
Remove extra text
Command S
Command tab
Command R
Yay, it worked again

Now you're done with WebPage00.htm

Let's get WebPage01.htm started using webdav. We're already connected. On a Mac:
Right-click on WebPage00.htm and select 'Duplicate'
Right-click and select 'Rename'
Change it to WebPage01.htm
Now you're ready to edit the document
You will use this for most assignments in our class

For Windows, to duplicate files, use:
Right-click on WebPage00.htm and select 'Copy'
Right-click somewhere else in the folder and select 'Paste'
Everything else is basically the same as on the Mac

For practice, I'll copy WebPage01.htm and create Testing.htm and then will delete that document.

(watch this video in a new tab or window)

An optional way to edit web pages is with FTP from your text editor. This is not my preferred way. I'm including it in our course material since some services do not provide a webdav option to mount your web space. Here I'll connect to my BlueHost web space using FTP in BBEdit.

Open BBEdit
Connect to web space by entering your username and password if they're not saved

Create a new subfolder
I like column mode on my Mac. We'll work in the www folder, then we'll create an IMStest folder.

Create a new document
Create a new 'WebPage00.htm' page using your text editor and save it on your desktop.
Drag that document into the IMStest folder in your web space.

Edit the new document
Right-click and edit with your text editor. I'm using BBEdit.
Type 'HelloWorld'
Save it

Check the new document (which is a web page)
Mine is at http://www.kirkhopkins.com/IMStest/
Choose WebPage00.htm
Yay, it works.

(watch this video in a new tab or window)

Quizzes in this class will be based on what I call the mechanics of editing web pages. You're not expected to know every HTML tag or CSS style known to man-kind, but you are expected to know the general basics of what they look like and be able to form them properly in your code. There are some standard tags that you should know.

Some HTML basic structure:   
<head>   
<title>   
<body>   
<h1>   
<p>   
<strong> or <b>   
<em>   
<br /> or <br>   
  
HTML tags and attributes   
<a>   
<img>   
  
HTML tags that require nesting   
<ul>   
<ol>   
<li>   
<table>   
<tr>   
<td>   

Images play a big part of the web. You should know how to properly format an image tag, know about file size of an image vs. how the image is displayed on a page, image requirements for our class, and the use of an image vs. content (i.e. text) on a web page.

CSS is used to style HTML content. You need to know the difference between inline styling, internal styling, and styling with an external stylesheet.

Color in HTML and CSS also plays a major role on web pages and web sites. You should know the general representation of colors using hex numbers. Remember, they go in RGB format which stands for Red Green Blue. 0 means fully off, or black. 1 is mostly off, or a little lighter. Then 2, then 3, up through 9, then A, B, C, D, E, all the way up to F which is fully on or white. #FFFFFF is white. #000000 is black. #FF0000 is Red. Short-hand can be used as well, #F00 is Red.

Web browsers are fairly forgiving when it comes to HTML and CSS. In our class we talk about consistency in our code as well as the best way to do things. Some of our quizzes and exams may have multiple right answers, you will be expected to provide the best answer. For example, it's better to use CSS for styling instead of an HTML tag.

Do your work on the assignments and participate in class and you'll do fine on our quizzes and exams.

(watch this video in a new tab or window)

Exams in our class will consist of 'fixing' a web page with problems. Each line of the page will have a problem. You'll need to provide the best way to fix it. The goal is to ensure that you are able to recognize and adjust code to properly formatted code. You may be asked to fix a line like:


The answer would be:


I tried to make the problems fairly obvious so there wouldn't be much room for error. I'm not trying to trick you. I'm trying to ensure that you're learning the content for our class and that, when our class is done, you can be confident in your abilities to understand and be able to create entire websites. A big part of managing a site is being able to solve problems on your own; many times created simply by a typo. For that reason, our exams will focus on fixing those problems.

(watch this video in a new tab or window)

The 2 most popular ways to edit code is to FTP the server or use WebDAV. With FTP, you keep the files on your local machine and copy them up to the server. This is a mostly archaic way of doing things in my opinion. With the FTP option, it can also get confusing as to what your editing vs what web page your viewing. Editing and testing PHP code is also a very slow process when using the FTP method.

We're going to use WebDAV in this class. WebDAV stands for Web Distributed Authoring and Versioning. With WebDAV, you'll mount the server on your local machine. Accessing the folders and files will look just like other folders and files on your machine.

Not every web service offers the ability to use WebDAV, but I can tell you that if they don't offer it, I'm not going to use their service. BlueHost, one of the most popular web hosting companies (and one that I use) offers WebDAV.