HTML & CSS

Due September 23, 11:55pm

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.

We will be using "Bootstrap" in this course. Therefore it is important to learn how to build a site using this library.

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):

Make a website - HTML and CSS course
(Optional) HTML Tutorial - a great resource
(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 BBEdit on the the MAC) and add the code above to a new file. Save as 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++. NOTE: you mush download and install the 32-bit version of Notepad++ for the following to work. Get plugin manager from: https://bruderste.in/npp/pm/

Copying file from Notepad++ to server.

On Windows:

First connect BBEdit to the server:

Open NotePad ++
Go to plugins Notepad++Go to Plugins > NppFTP > Show NppFTP Window in the menu at the top of your Notepad++.
Profile settings Notepad++In the NppFTP Window, click the gear and select Profile Settings.
Click Add new.
On the "Adding profile" pop up, name the FTP Profile Connection "cslab". Click OK.
Enter "cslab.kenyon.edu" in the hostname.
Set Connection Type to sftp.
Set port to 22.
Enter your username in Username.
Click on "Ask for password"
When you are done adding the FTP information click close.
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:

From Notepad++ browse to the folder "/var/www/html/class/softdev/yourusername". Make sure this directory is highlighted.
Upload the file. with the html file opened on the right, click the green up arrow "Upload File" button on the NppFTP window.
The file will now be uploaded to the directory.

On Mac

First connect open a file you wish to save to the server with BBEDIT
Select "File -> Save to FTP/SFTP server" option.
Hit the Connect button.
Server is "cslab.kenyon.edu", User is your username, and Password is your password (on cslab).
Path should be /var/www/html/class/softdev/yourusername
hit connect
Hit save. This will write your file to your web directory.

Everyone

Now try it out:

Use a browser to go to cslab.kenyon.edu/class
Go to your name
open your new web page.

Now 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 simple examples:

Here is an example using Bootstrap (the preferred method): Resume Example

, Source

Bootstrap resources: Bootstrap introduction, BootstrapEdX, Bootstrap Course,

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)

Topic revision: r11 - 2019-09-10 - JimSkon