Topic #1 – Happy Accidents

The purpose behind this class is to give you the skills necessary to go out into your community and design sites for others. As you get better and better, your skills will show and you’ll be able to actually make money doing what you know how to do. For your teacher, that came true just a few years ago.

Topic #2 – Web Hosting in Less Than 2 Minutes

Topic #3 – Three Basic Parts of Web Hosting

• Domain Hosting
  Domain hosting is the process of buying or renting space on the web where you would like to keep and manage the files and folders that belong to your website. When you buy or rent space on the web, that means you have purchased something like thisismyspace.com or heythere.net, since these are also called domains.
• Web Hosting
  Web hosting is the process of storing and managing all the online files that you have on your domain. Normally, this goes hand in hand with domain hosting. The company that you get your domain from is usually the same company that holds your files and folders.
• File Transfer Protocol
  File Transfer Protocol is the standard rule that allows files to be moved from your computer to the hosting computer (also known as a server). There are a number of programs that can be used for this, but a common example is called Filezilla.

Topic #4 – Domain Hosting Explained

The day you actually get serious about web design, you will want to experiment with a couple of simple domains. But not every domain is available and none of them are free. Remember that a domain just means a space on the World Wide Web that you want to use. If someone already has the space you want, you can’t just take it from them. You have to find domain spaces that no one else has already taken and then you have to purchase them.

1. Try It First: The WhoIs Lookup
2. Try It Second: The Lean Domain Search
3. Try It Third: GoDaddy Domain Pricing

Topic #5 – Web Hosting Explained

Right about now, you should be realizing just how easy it is to buy a domain. And you’re right. It is easy. But there’s a bigger issue you have to consider before you buy a domain. The company where you buy your domain is usually also the company that holds all your files and folders. This is the company you would refer to as your web host. So if you’re going to hand over all your stuff, it’s a pretty important thing that you know the company pretty well. How secure will your files be if someone hacks the hosting company and everything you ever designed is on their computer servers?

1. Read First: Why You Need a Secure Host
2. Consider Second: PC Magazine Looks at the Best (2016)

Topic #6 – File Transfer Protocol Explained

If you were to Google the meaning of File Transfer Protocol (or FTP), you’d probably find a lot of strange and hard to understand explanations. The truth is, FTP is a little bit complicated. Hopefully the description below makes it a little bit easier.

All of your WebDesign files and folders for this class are sitting in a secure folder on your computer. No one can access them, change them, or steal them without your permission. If you want to put any of those files on the web, you have to move them from one secure place to another secure place. Using an FTP Client, like FileZilla, is what moves, or transfers those files from one place to another. In the end, you need your files to be just as secure while they’re being moved as they are when they are sitting still.

Topic #7 – The Index and the Root

Everything on a website has a beginning known as the Root Directory. Think of it like this: if “root” means first and “directory” means folder, then the “root directory” just means the first folder with any HTML-related files. In our case, that would mean the WebDesign folder we created during the first week of the semester is our Root Directory. Why? Because it contains all of our HTML-related files and folders.

The first page of any website is almost always known as index.html. When you open a browser and type in a domain address (URL), the browser will immediately go looking for the index file that is being stored in the Root Directory of that domain. And if there is no index file in the Root Directory, then the site probably won’t work very well. In a few minutes, you’re going to revisit an index.html file that you created a couple of months ago and you’ll see how all of this information can be applied.

Topic #8 – That Guy Who Bought Google

Back in Topic #4, you learned that buying a domain is like buying space on the Web and that space needs to be available. Most of the really big websites like yahoo.com, or microsoft.com, or cnn.com are obviously taken, which means you can’t just go buy them for fun. But not that long ago, someone was looking around at domains to purchase and noticed that Google.com was available for just $12. Click here to read what happened.

Opening Design Note

Several months ago, we set up a personal Home Page called index.html on the OUTSIDE of our “pgs” folder. Today, if you still have that file, we’re going to delete it and start something new.

During this design, your job is to set up five pages of a Personal Web Site in your ROOT FOLDER (also known as the ROOT DIRECTORY) by creating five files and connecting them through HTML. To do this successfully, you’ll need to carefully follow the directions below. Use your team as best you can and practice working together, since this is the team you will be working with on the Final Project.

Again, this is a challenge for you and the rest of your team.

INSTRUCTIONS

1. Step 1: Setting Up the Program
   Go to Notepad++ and close down any other files that you have open.
2. Step 2: Saving the Files
   Open six new files and save them with the following names (SPELLING MATTERS!):
   
   about.html
   
   accountability.html
   
   index.html
   
   javascript.html
   
   portfolio.html
   
   style.css
   
   DO NOT save these to your “pgs” folder or your “css” folder. Instead, save them to your “WebDesign” folder on the outside of your other subfolders like this.
3. Step 3: Setting Up the about.html File
   Copy/paste this code into your “about.html” file.
4. Step 4: Setting Up the accountability.html File
   Copy/paste this code into your “accountability.html” file.
5. Step 5: Setting Up the index.html File
   Copy/paste this code into your “index.html” file.
6. Step 6: Setting Up the javascript.html File
   Copy/paste this code into your “javascript.html” file.
7. Step 7: Setting Up the portfolio.html File
   Copy/paste this code into your “portfolio.html” file.
8. Step 8: Setting Up the style.css File
   Copy/paste this code into your “style.css” file.
9. Step 9: Saving and Opening All Files
   Save all the files you just copy/pasted, then open up the index.html with Chrome and set up a split screen. Check to see that all the internal links on your five-page website are working correctly.
10. Step 10: Helping Your Team Get Set Up
    You may not go onto the GRADED section until your entire time is set up and ready to go. But if you and your team are set up and ready to go, simply raise ALL of your hands and the teacher will check your work.

DO NOT GO ON WITHOUT PERMISSION

1. PERSONAL WEBSITE GRADING
   This is a GRADED five-page website that will help you to get ready for the Final Project. It is DUE on Thursday, November 29. Below are all the things you need to get an A on this five-page website assignment.
2. 1. Color Palette & Site Identification
   Your design must have three unique colors (part of a color palette) that you have chosen to use and cannot have the same colors that were there when you started. You must also change the name on your website in the TITLE elements and the FOOTER elements of ALL pages so that they reflect your actual name.
3. 2. Two Unique Images
   You must add a logo to the header of all pages as well as a single image on the Home Page (index.html). You must build a logo with CoolText and figure out how to get it onto your website. You must also find an image that represents you and add it to the Home Page (index.html), as instructed in the code.
4. 3. Three Unique Paragraphs
   You must complete three paragraphs for the “about.html” page as instructed in the code, each one with 4-5 sentences. Paragraph 1 is about you as a person. Paragraph 2 is about you as a web designer. Paragraph 3 is about you as an individual with other skills.
5. 4. Links to Pages and Demos
   You must provide internal links to at least 10 of your pages and at least 2 of your demos. More is better, but the links have been started for you.
6. 5. JavaScript Demos
   Don’t worry about this right now. We will do this as a class (Lesson 4.3).
7. 6. Accountability Essay
   Don’t worry about this right now. We will do this as a class (Lesson 4.4).