CSCI-1080 Intro To CS: World Wide Web

Saint Louis University
Department of Computer Science

Linux Useful Resources

• https:linuxsurvival.com/

• Command Line Bootcamp

• Learn the Command Line by Codecademy

Web Development Useful Resources

Setup your Web Development Editor

TextWrangler (OSX) http://www.barebones.com/products/textwrangler/

Notepad (PC) https://notepad-plus-plus.org/ (merely notepad is not enough to edit code)

Sublime Text (OSX, Windows, Linux) http://www.sublimetext.com/

Atom (OSX, Windows, Linux) https://atom.io

HTML Guides

http://htmldog.com/guides/html

Using TextEdit for Web Editing for CSCI 1080

The latest versions of TextEdit, the built-in text editor for the Macintosh, save files in “rich text” format by default. Unfortunately, the format needs to be “plain text” for the HTML to display as a web page. Here's how to adjust.

OS X 10.9 (Mavericks) and Later | OS X 10.7 (Lion) and 10.8 (Mountain Lion)

In OS X 10.9 (Mavericks), OS X 10.10 (Yosemite), and OS X 10.11 (El Capitan)

Setting Plain Text as Your Default Format

Before starting any HTML documents in TextEdit, set your preferences as follows:

1. Open TextEdit.

2. From the TextEdit menu, choose Preferences.

3. On the “New Document” tab, change the radio button to “Plain text” if it is not already there. Also, uncheck “smart quotes,” “smart dashes,” and “smart links.”

4. On the “Open and Save” tab, under “When Opening a File,” check “Display HTML files as HTML code instead of formatted text.”

5. Close the Preferences window to save your changes.

If you've made the change correctly, no ruler will appear at the top of the TextEdit window when you are editing a document.

In OS X 10.7 (Lion) and 10.8 (Mountain Lion)

Creating a New Web Document with TextEdit

When you begin a new HTML page or CSS file, check the TextEdit Format menu before you type any characters. If you see “Make Plain Text” as one of the choices, select that to switch to the correct format. If you see “Make Rich Text,” your document is already in the correct format (plain text), so don't make any changes.

Setting Plain Text as Your Default Format

It's a good idea to set plain text as your default format your TextEdit documents, so you don't need to fix it every time. To do so,

1. Open TextEdit.

2. From the TextEdit menu, choose Preferences.

3. On the “New Document” tab, change the radio button to “Plain text” if it is not already there.

4. Close the Preferences window to save your changes.

If you've made the change correctly, the ruler will no longer appear at the top of the TextEdit window.

“Rescuing” a Page Created as Rich Text

If you have already created an HTML page (or CSS file) in Rich Text format, you will see the HTML (or CSS) code when you look at the page in your web browser. Here are the steps to fix that problem:

1. Open TextEdit. A new, empty file will appear. Make sure that this new empty file is in Plain Text format by following the steps above.

2. Go to your web page in a web browser. Choose Edit > Select All and then Edit > Copy to copy the HTML text to your clipboard. (This is so you don't lose the work you've already done.)

3. Go back to TextEdit and paste the text into a new empty file.

4. Save the HTML file with the same filename as the file you are replacing.

5. Re-upload your HTML file to your web host, allowing it to overwrite your original file.

CSS Demo Files

• Demo starting file

• CSS Demo files (Download and unzip).
  
  
  

CSS Templates

• Republic Free CSS Template (Download zip file used in class)

• http://www.free-css-templates.com/

• http://www.csstemplatesfree.org/

• http://www.free-css.com/ (ignore Wix.com ads)

Design Resources

• CSShake It does exactly what it says…contains CSS that helps you create small fun animations. Do not abuse of animations or you may grab the attention of the audience on the wrong thing (the animation) and not the content

• http://ianlunn.github.io/Hover/ A collection of CSS3 powered (mouse) hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

• FlatIcon.com: Free icons to decorate your web-pages

• GoodUI.org: Tips and ideas on good web-page design (tested with A/B testing)

• Canva.com: Create your own Icons and templates: design lessons

Development Tools

• Google Analytics: Gives you free code to embed in your webpages for visitor statistics

JavaScript Resources

JavaScript is a complex language that would be impossible to teach entirely in a course such as this, but there are many additional resources that you can use to learn more.

This online book is very good:

http://eloquentjavascript.net

The w3schools have good tutorials:

http://www.w3schools.com/js/

as does Mozilla:

https://developer.mozilla.org/en-US/Learn/JavaScript

There are many, many more resources out there and a web search should quickly throw up answers to most questions.