Web Site Project

In this project you will be creating your own website. Your website can be on any school-appropriate theme (basically, no sex, drugs, violence, or hate). Anything from a website from the point of view of your favorite D&D character to a commercial site for your mom's home business... Your site will be graded using a rubric I stole adapted from NHS Designs. As long as you satisfy the requirements, the sky is the limit :)

You'll get a chance to see what everyone's been working on at the end of the course :)

How to with 000webhost.com
Go sign up for a free account at www.000webhost.com. Use your school email address, and be prepared to wait about 15 minutes for your confirmation email to finally arrive. (Free costs, just not money.) Probably the easiest way to do this is create and edit the files for your webpage locally (that means on your own computer) and then just drag the whole folder of files onto the 000webhost uploader. (You can create and edit files within the uploader, but on your own computer you can download Atom which is a free text editor with lots of extensions so you can have cool stuff like syntax highlighting and git integration and... Click to see their "Getting started article". FYI, for the purposes of this class, you're not using the "easy to use web builder" or the WordPress install. Yup, you're looking at the Web File Manager. Good luck!
How to with Google
This method is slightly more complicated to set up but faster to update. NOTE: Google has discontinued their webhosting as of summer 2016. If you're interested in a good place to practice your html & css skills, I strongly urge you to consider using CodePen. I'll leave the Google instructions up as a historical record, but be aware that they don't work anymore :(
  1. Go to your google drive, and make a new folder called "website".
  2. Select on the folder and click the share button.
  3. Click the word "Advanced" at the bottom.
  4. Right now, your folder's sharing settings are "Private - only you can access". Click the word "Change".
  5. Select "On - SOUTH BAY UNION SCHOOL DISTRICT" and then make sure that at the bottom it says "Access: Anyone can view". If it doesn't say that, click "change" and set the access so anyone can view (but not edit!) that folder. Then click save.
  6. You'll pop back to the previous, bigger popup window with a link to your folder already highlighted. Copy that link!
  7. Open your website folder and click the button to create a new... something. Instead of making a document, click "More".
  8. At the bottom of the popup list, select "Connect more apps".
  9. Search for and add both CSS Editey and HTML Editey.
  10. Great, now click the "New" button and under "More" select HTML Editey.
  11. The first time you make a document with Editey, it will need to ask your permission to do its thing. Go ahead and grant permisison. Scroll through to the bottom and click the "agree to terms" box and the "agree to receive their spam" box. (For what it's worth, I signed up a couple of days ago and haven't gotten any spam yet...)
  12. Rename your new html document "index.html".
  13. Go back to your website folder and make another new item. This time make a CSS Editey document and name it "styles.css"
  14. In your html doc, you'll want to link to your stylesheet. The folder link you copied about 10 steps ago will come in handy! Paste that link into your document for a minute. (You'll be deleting it in a minute, but for right now...) It probably looks something like: "https://drive.google.com/folderview?id=0B11JY1LAR36kQlpkd1VvR0VEVHc&usp=sharing". In the <head> of your html file, to link to your stylesheet you'll have <link rel="stylesheet" href="http://googledrive.com/host/the_ID_number_of_your_website_folder/styles.css" type="text.css">. You get that ID number from the link you just pasted -- it's be string of numbers and letters between id= and &usp=. So in my example, the link url would be http://googledrive.com/host/0B11JY1LAR36kQlpkd1VvR0VEVHc/styles.css
  15. The web address of your index.html file is "http://googledrive.com/host/the_ID_number_of_your_website_folder" so for this example, my webpage would be at http://googledrive.com/host/0B11JY1LAR36kQlpkd1VvR0VEVHc
  16. Make 4 more html documents (for the other 4 pages of your website).
  17. If you were already working on Pydio/Dreamhost/CodePen, you can paste your code into your new html and css documents in your google drive.
How to with Dreamhost / Pydio

This method is slightly easier initially but slooooow to update code. This method depends on students using my personal webhosting account, which isn't so great :P I'm not setting up any new student accounts, but I'll leave this up as so past students can review their process...

You can sign in to the web server at https://webftp.dreamhost.com/.
login screen
For server, type "centurion". You should have received your login and passphrase from me on SchoolWise. Leave port 21 and FTP selected, and click the blue arrow button at the bottom.

Don't mess with anything but your website folder!

Double click the "website" folder to open it. (Ignore all that other stuff...)
Click on Create
Select a new empty file Title it index.html
Create a file named "index.html" by clicking the "create" button in the upper right, selecting "Alternatively, you can create a new empty file," and then typing "index.html" and finally clicking the blue arrow. Do the same thing to create your stylesheet (call it style.css) and (eventually) the other 4 pages of your website.

Here are a couple of files in your website folder Click the tabs to switch between files

You can open your new files by double clicking them. They'll open in tabs, so you can easily switch back and forth between your html and your css (just like on the Code Academy site.)

You might want revisit Code Academy to remember how to structure the HTML of your webpages. However, don't just copy and paste their code -- part of the rubric involves not plagiarizing code!

You'll want to have consistent navigation between all your pages. You can add the same code to all your pages, or you could explore the joy of includes... :)

Student Webpages
Note that unless you're signed in to your South Bay account, the Google-hosted pages will give a 404 error...

Note that this is a rough draft -- I may be making some changes... Still, this should get you started :)