HTML & CSS
Due September 23, 11:55pm
Moodle Link
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:
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:
- 10 free Bootstrap HTML Resume Templates
- HTML 5 resume Templates
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)