Tags:
create new tag
view all tags

HTTP & CSS

Due January 27, 11:55pm

Moodle Link

Goal

The goal of this assignment is to learn HTML and CSS. Rather then take time in class to learn this relatively simple topic, we will be using an online tutorial system called Code Academy. Parts of Code Academy are free while others require you register for $19 a month. We will not need the paid version, though you are free to pay for a pro account to get access to more content.

Once we are done with the course, you will use what we know to make a online resume.

Turn in

  • All code and link to resume web page

Step 1 - Learn HTML and CSS

Your first activity will be to go through the following Code Academy course(s):

  1. Make a website - HTML and CSS course
  2. (Optional) HTML Tutorial - a great resource
  3. (Optional) CSS Tutorial - also a great resource

Step 2 - Deploy a simple website to the server

Start with the following:

<!DOCTYPE html>
<html>
  <body>

     <h1>My First Heading</h1>

     <p>My first paragraph.</p>

  </body>
</html>

Open up Notepad++ (or Text Wrangler on the the MAC) and add the code above to a new file. Save sa firstwebsite.html

You will now copy this file to the server "cslab.kenyon.edu". On this server you already have a web accessible folder "/var/www/html/class/yourusername". You will need to copy your new html file from above there. This can be done from Notapad++ (Detailed instructions here: How To Edit FTP Files & Auto Upload On Save Using Notepad++.

Copying file from Notepad++ to server.

First connect Notepad++ to the server:

  1. Open NotePad ++
  2. Go to plugins Notepad++Go to Plugins > NppFTP > Show NppFTP Window in the menu at the top of your Notepad++.
  3. Profile settings Notepad++In the NppFTP Window, click the gear and select Profile Settings.
  4. Click Add new.
  5. On the "Adding profile" pop up, name the FTP Profile Connection "cslab". Click OK.
  6. Enter "cslab.kenyon.edu" in the hostname.
  7. Set Connection Type to sftp.
  8. Set port to 22.
  9. Enter your username in Username.
  10. Click on "Ask for password"
  11. When you are done adding the FTP information click close.
  12. Click the Connect icon in the NppFTP window and select "cslab". (The connection Icon is the one on the far left).
Now copy firstwebsite.html to the server:
  1. From Notepad++ browse to the folder "/var/www/html/class/softdev/yourusername". Make sure this directory is highlighted.
  2. Upload the file. with the html file opened on the right, click the green up arrow "Upload File" button on the NppFTP window.
  3. The file will now be uploaded to the directory.
Now try it out:

New edit the html file to have your name instead of "My". Save, and do an upload again. See if the changes are there.

Step 3 - online resume

The second activity will be to use what you learn to create a online resume. Here are some examples:

  1. Resume Example 1
  2. Resume Example 2
  3. Resume Example 3
Your assignment is to create a nice looking webpage version of your resume. include the following features for full credit:
  • Multi columns
  • Tables
  • Multi colors
  • Backgound image or color
  • At least one image or icon (you will need to upload a file to the server)
Edit | Attach | Watch | Print version | History: r6 < r5 < r4 < r3 < r2 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r6 - 2017-01-27 - JimSkon
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback