During the past three months, it may seem like you’ve learned everything you could possibly learn about web design. You know how to code. You know how to write HTML. You know you to create multiple pages and connect them together with internal hyperlinks. You know how to style various elements on those pages with CSS. And if you can remember all those history lessons, you even know a little bit about the origins of coding and the Internet and the World Wide Web.
But the truth is, all of this is only the beginning. Knowing how to code can definitely make you a good designer, but everything you’ve done in this class has been contained inside your own private folders. Even when you opened up your pages with a web browser, you were only looking at pages you had created on your computer. No one else could see them other than you. In other words, you never actually put anything out there on the World Wide Web.
The purpose of this lesson and all of Learning Goal #4 is to help you start thinking about what it would mean to become a real web designer, making real content for the Web. What if you could actually get your own domain (space on the Web) and start putting stuff on it? You won’t exactly do that here because it costs money, but you will definitely have a reason to start thinking about it more seriously.
Students often return with stories about their newest websites. Maybe that will be you someday soon.
LEARNING GOAL #4: Applied Web Design
PART 1: CLASS DISCUSSIONRead More
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.
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?
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.
PART 2: DAILY DESIGNRead More
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.
- Step 1: Setting Up the Program
Go to Notepad++ and close down any other files that you have open.
- Step 2: Saving the Files
Open six new files and save them with the following names (SPELLING MATTERS!):
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.
- Step 3: Setting Up the about.html File
Copy/paste this code into your “about.html” file.
- Step 4: Setting Up the accountability.html File
Copy/paste this code into your “accountability.html” file.
- Step 5: Setting Up the index.html File
Copy/paste this code into your “index.html” file.
- Step 7: Setting Up the portfolio.html File
Copy/paste this code into your “portfolio.html” file.
- Step 8: Setting Up the style.css File
Copy/paste this code into your “style.css” file.
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
Don’t worry about this right now. We will do this as a class (Lesson 4.3).
- 6. Accountability Essay
Don’t worry about this right now. We will do this as a class (Lesson 4.4).