Michael B. Gousie

Comp 161 - Web Design (Fall 2024)

Syllabus, Textbooks, and Useful Links

Projects/Homework

Software

We will use several software packages to create web pages and content, and for uploading files to the department (CS) server. These are all free and platform independent (meaning they'll work on MacOS and Windows). The software includes:

  • Firefox browser. Although not strictly required, you may wish to download this browser so that your experience is consistent with what we do in class. We will be using many developer tools that are not the same across all browsers.
  • Phoenix Web IDE - online IDE to create web content. We will use this temporarily; see next item below. This works best on Chrome, Edge, or Opera.
  • Phoenix IDE - an integrated development environment (IDE) which we will use for developing our web pages. Use the link to install the IDE on any platform (MacOS, Windows, or Linux) for free.
  • FileZilla - a free FTP client. FTP refers to file transfer protocol, and is a method for transferring your files from your computer to the CS server. Be sure to download the FileZilla Client.
  • VPN instructions for FortiClient - if you are accessing the cs server from off-campus, for security purposes, you first have to set up a virtual private network (VPN) with your computer. Follow the installation guidelines for your type of computer/operating system. Start the VPN (FortiClient) before running FileZilla, and everything should then work normally.
  • GIMP - the Gnu Image Manipulation Program is a free version of a Photoshop-like paint program. Download using the link above.

Useful Web Pages and Sample Programs

Web Page Design


Color


The Grid System


Fonts

HTML and CSS Examples

HTML

  • mikePage.html - page we worked on Wednesday, 9/18. Some elements have been fixed so it passes the HTML Validator. To see the actual HTML code, in Firefox click on the hamburger menu in the upper right corner, choose "More tools", then "Page Source."
  • Links Are for Kids! - (links.html) sample page showing links-n-things.
  • Dads In Charge - (dadsAndKids.html) early in-class page.
  • video.html - example showing how to display a video.

CSS

More CSS Examples and JavaScript

More CSS

Responsive Design

Forms and JavaScript

Web Page Design Examples

Day One Examples.



Jason's List



Claudia Fieo's List

Mike's List

(in no particular order)
Last updated
Home | Comp 161 | Comp 218 | Research | Anti-Research