course web page

Create a Course Web Site

Assignments / ,

Code a simple HTML website from scratch

One of the best ways to learn about web design is to get your hands dirty and code a simple website from scratch. Having ones own domain and web site enables designers to learn through practice, by going through the full development process from beginning to end, from setting up a local development environment to deploying and maintaining a live site with continually changing content over time.

Before you get started, you’ll need the following:

  1. You’ll need a hosting setup (e.g. at Bluehost, GoDaddy‘ etc.).
    • There are several different hosts and plans to choose from, so I suggest going with a host that offers a student plan/discount (e.g. like this Bluehost one) or a similarly cheap option (~$5/month). For example, several offer a “shared” hosting plan that comes with the most of the features that you will need: unlimited storage, a free domain name, and the ability to host multiple websites (“addon” domains). Once you pick/purchase a domain name and a hosting plan, be your be sure to note the following information:
      • Your FTP address (e.g. ftp.yourdomain.com)
      • Your Host Username (e.g. mybluehostusername)
      • Your Host Password (e.g. chrisisthebest)
  2. A FTP (File Transfer Protocol) Application
  3. A Code Editor (IDE)

Video Lesson

Watch the video below for a guided step-by-step demonstration of this assignment. 

Setup Your Local Development Environment

Get setup by creating a root directory for your web site
Start by creating a “public_html” folder to act your web site’s root directory

Before you can begin coding, you need to figure out where you are going to work and save your web site’s files. A good place would be to set up a root directory somewhere outside of your existing school class folders (where you typically save your class papers, design files, etc). It’s a good practice to keep these separate, for many reasons, but one of the most practical reasons is because this assignment (creating a course web site) is not just an assignment for one class (e.g. ART 128) but you are going to set up course web pages for all of your classes (e.g. ART 229). Knowing this, do not place your public_html folder inside of your existing ART128 folder (if you already have one). Instead, keep this up on a higher level.

Initial folder setup (as you get started)


Final folder setup (once this assignment is completed)


Start with a “base” or “starter” blank HTML page

Create a new, blank HTML file named index.html and place it in your course directory (e.g. in this case, inside of the art128 folder).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<!-- VIEWPORT FOR MOBILE -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- FOR IE/EDGE -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- MAIN CSS FILE -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- MAIN JS -->
<script src="js/script.js"></script>
</body>
</html>
view raw blank-html.html hosted with ❤ by GitHub

Add in the content for your course web page.

Go ahead and add course specific content, such as a link to your first assignment. In this example, for ART 128, add a link to simplewebpage.html. Don’t worry about the file not existing yet, because we’re going to create that page next.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>John Doe ART 128</title>
</head>
<body>
<h1>My Course Web Page</h1>
<h2>Assignments:</h2>
<ul>
<li><a href="simplewebpage.html">Simple Web Page</a></li>
</ul>
</body>
</html>
view raw course-page.html hosted with ❤ by GitHub

Repeat this step for each of your classes so you can post all of your assignments online.

Next, let’s create a new HTML file: simplewebpage.html

Tip: Resist the temptation to copy-paste the base/starter HTML code to speed up the process. Try writing every line of code from scratch. It’s good practice while you learn the basics.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Simple Web Page</title>
<meta name="description" content="A Simple Web Page" />
</head>
<body>
<h1>This is a Simple HTML Web Page</h1>
<h2>A basic HTML page using popular markup</h2>
<h3>This is an H3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus urna neque, elementum et, auctor vel, vestibulum in, dui. Praesent laoreet. Aliquam semper ullamcorper augue. Integer vitae lorem. Suspendisse commodo. Donec vulputate. Nunc vel pede vel turpis consectetuer fermentum. Praesent a nisl eu diam luctus consectetuer. Phasellus at diam. Vestibulum turpis odio, bibendum interdum, adipiscing eu, facilisis id, erat. Nulla id magna id sapien molestie posuere. Nam faucibus. Donec commodo bibendum mi. Aliquam erat volutpat. Praesent felis mi, elementum ut, condimentum nec, nonummy at, enim.</p>
<p>Integer sem velit, ornare eu, blandit ac, elementum sit amet, metus. Pellentesque in est elementum est cursus consectetuer. Pellentesque mattis purus id erat. Cras volutpat bibendum neque. Nunc a dui. Mauris a neque cursus lorem ultrices sagittis. Morbi ligula. Aenean venenatis justo id arcu. Cras pretium ipsum ut velit. Integer pulvinar. Curabitur magna arcu, molestie at, rutrum at, gravida vulputate, nisl. Sed ipsum orci, accumsan sed, aliquet vel, tempor quis, arcu. Donec aliquam. In nulla nunc, tempor eu, laoreet id, tincidunt sit amet, arcu.</p>
<p>This is an unordered list:</p>
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>OJ</li>
<li>Cereal</li>
</ul>
<p>This is an ordered list:</p>
<ol>
<li>Cereal</li>
<li>Eggs</li>
<li>OJ</li>
<li>Milk</li>
</ol>
<p>This is a link to <a href="http://google.com">google's web site</a>.</p>
</body>
</html>
view raw simple-html-page.html hosted with ❤ by GitHub

Almost done: Create a Home Page that will link to all of your courses

Directly inside the root “public_html” level, create another index.html file, but this time, instead of linking to individual course assignments, you are going to link to the individual course web pages (e.g. “art128/index.html”).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>John Doe's Course Web Sites</title>
</head>
<body>
<h1><a href="index.html">John Doe</a></h1>
<ul>
<li><a href="art128/index.html">ART 128</a></li>
<li><a href="art229/index.html">ART 229</a></li>
</ul>
<h1>HI. I'm a NMA Interface Design Student</h1>
<p>This is a class web site for all of the NMA interface design classes that I am taking at KCC. I use this site to post all of my class assignments.</p>
</body>
</html>
view raw coursesite-home-page.html hosted with ❤ by GitHub

Last Step: Use Filezilla to upload your site via FTP

Launch Filezilla and connect to your host (remote) server. To do so, you’ll need to enter the domain ftp address and your host username and password. Once you are able to connect successfully, all you need to do is navigate to your target “public_html” or “www” directory and upload your new files and folders. In Filezilla, you can do this by dragging and dropping from the left (local files) to the right (remoter server files).

If you completed this assignment, great job!

Summary

Getting started with front-end web development can be the hardest step. The good news is that once you get setup, it gets easier and easier for you to practice writing code and building web sites.