Welcome to CMST 385

MeThis is a classic Face-to-Face class and we meet entirely in person. There will be no online discussions and if you have a question you can ask in class or email me at

I will post handouts and hyperlinks to videos for the class on this web page which is accessible through the URL http://rlaurie.pancakeapps.com/c385/

Please bookmark (favorites) this URL in your browser so that you can easily return to it as the course progresses.

So lets get started…

The course has as a prerequisite of either IFSM201 or CMIS102 to insure students come into the class with intermediate computer skills. This course has a final exam so it is important that you learn HTML and CSS coding so you do well on the assignments and exam.

The primary references for the class will be the following web sites:

UMUC no longer utilizes books for their courses, because free online resources have been setup for the course as can be viewed at LEO.

However, you may enjoy the course more if you purchase the book Learn to Code HTML & CSS that is available through Amazon as either paperback or ebook. We will be using the author’s web site as one of the resources for the course. Most of the information in the book is on his web site learn.shayhowe.com/, but a book is often more convenient, especially if you have only one computer screen to work on assignments.

Print all Week 1 materials described below that are posted as PDF files. I recommend using the freeware version of PDFXChangeViewer, which allows you to make notes and save them to any PDF file or you can use Adobe Acrobat Reader.

All software used in this class is freeware and I strive to find software that can be run on all common operating systems (Windows, MacOSX, Linux).

I recommend that you get started with Week 1 content today, by clicking Week 1 in the navigation bar above or scrolling down.

Robert Laurie

Week 1: Internet, World Wide Web, and HTML

Network Stack The first week is primarily lecture with some hands on setup and HTML coding is required for Assignment 1. The first class will cover a general explanation of the terminology, components that make up the Internet, and World Wide Web. You will be learning HTML5 and CSS3 coding in this class and you are expected to use these standards for all assignments in the class.

Read LEO > Week 1 > Introduction to the Internet

www.w3schools.com is an excellent tutorial and reference web site that will be used as the primary source of information. They offer certificates for $95 if you are looking for a certificate in this area.

Please read and work through the first 7 chapters of www.w3schools.com - HTML(5) Tutorial prior to the first class.

  1. HTML Introduction
  2. HTML Editors
  3. HTML Basic
  4. HTML Elements
  5. HTML Attributes
  6. HTML Headings
  7. HTML Paragraphs

Bring your notebook computer to class, because there will be some class time for demonstration, hands-on coding, and asking questions. You also need to bring a USB Thumb Drive to class for storing and transferring computer files.

I will utilize PowerPoint slides to introduce HTML and CSS concepts throughout the class. Please print the slide set and all posted PDF documents as they will be your primary source of information in the class. PowerPoint handouts are posted with four slides per page, and it is best to print in color so that you can see the syntax format of the code:

Software to download and install for the class:

I have created a short 3 minute video about how to setup a Dropbox Pancake.io Web Sever available at http://www.screencast.com/t/lPFiTbJs

Videos available on YouTube for viewing this week:

  1. How the Internet Works in 5 Minutes
  2. Komodo Edit Tutorial - LearnToProgram
  3. Basic HTML #1 - Komodo Edit
  4. [Dropbox Tutorial](https://youtu.be/gybe_YlpAe4 “Right click this link and open in new tab” “Right click this link and open in new tab”)
  5. LittleWebHut HTML5 Video Tutorial - Part 1 - The Basics
  6. LittleWebHut HTML5 Video Tutorial - Part 2 - Text
  7. thenewboston HTML Tutorial - 2 - Creating our First Webpage
  8. thenewboston HTML Tutorial - 3 - body and headers
  9. thenewboston HTML Tutorial - 4 - Paragraphs and Line Breaks

Week 2: HTML - Inline, Lists, and Links

Development CycleThis week we will cover the topics of inline elements, symbols, and lists. Bring your notebook computer to class, because there will be some class time for demonstration, hands-on coding, and asking questions. You also need to bring a USB Thumb Drive to class for storing and transferring computer files.

Read LEO > Week 2 > Planning and Creating Websites

Continue to work through www.w3schools.com - HTML(5) Tutorial. Read and work through the following 8 chapters prior to class this week:

  1. HTML Formatting
  2. HTML Computercode
  3. HTML Comments
  4. HTML Symbols
  5. HTML Entities
  6. HTML Encoding (Character Sets)
  7. HTML Head
  8. HTML Lists
  9. Browser popularity table
  10. Browser support information

Please print the slide set and all posted PDF documents as they will be your primary source of information in the class:

Videos available on YouTube for viewing this week:

  1. thenewboston HTML Tutorial - Bold, Italics, and Comments
  2. thenewboston HTML Tutorial - Lists
  3. thenewboston HTML Tutorial - Adding Links to our Webpage
  4. thenewboston HTML Tutorial - Creating a Link Within a Web Page
  5. thenewboston HTML Tutorial - Email Links and Tool Tips
  6. Should I Learn XHTML or HTML5?
  7. How does HTML5 compares to HTML4?

Week 3: Colors and Web Graphics

High ContrastThis week we will cover the topics of specifying colors and utilizing web images. When selecting color combinations it is important to select colors that have high contrast so they are easily readable. Therefore, it is best to select dark text and light back-ground colors, which also optimizes a web page for printing.

Read LEO > Week 3 > Working with Images

Please print the slide set and all posted PDF documents as they will be your primary source of information in the class:

Continue to work through www.w3schools.com - HTML(5) Tutorial. Read and work through the following chapters prior to class this week:

  1. HTML Color Value Specification
  1. RGB Color Code Chart
  2. HTML Images

Some web sites to search for images:

You will need to use an image editor to develop web graphics this week. One possibility for freeware is the GIMP, which is available for free and runs on Windows, MacOS, and Linux. GIMP has most of the features as Adobe PhotoShop including layer capability. Another easy to use graphics editor that works well on windows is PhotoFiltre V6 or V7 freeware.

Inkscape is a powerful Open Source vector graphics program that works on Windows, MacOS, and Linux. It has many features, which will take much time to master.

You can download these freeware files at the links below and also find a PDF users manual and online manual at:

Videos available on YouTube for viewing this week:

  1. LittleWebHut HTML5 Tutorial - Part 3 - Images and Hyperlinks
  2. thenewboston HTML Tutorial - Adding Images to the Webpage
  3. thenewboston HTML Tutorial - Resizing Images
  4. What is the difference between HTML5 and CSS3?

Week 4: CSS Formatting Documents

High ContrastThis week we will introduce CSS, as a method for controlling the presentation of a web page or an entire web site. Assignment 3 will be modifying your existing web pages using CSS. No browser supports the entire CSS version 3 specification so it is best to learn and use CSS version 2 properties first, which are supported by all modern browsers. We will focus on CSS2 properties this week as an introduction to CSS and all CSS2 properties are upwardly comparable with CSS3.

Read LEO > Week 4 > Communicating over the Internet

Please print the slide set and all posted PDF documents as they will be your primary source of information in the class:

Continue to work through www.w3schools.com - CSS Tutorial. Read and work through the following chapters prior to class this week:

  1. CSS Introduction
  2. CSS How To…
  3. CSS Colors through CSS Lists
  4. CSS Layout - float and clear

Work through learn.shayhowe.com - Learn to Code HTML & CSS. Read and work through the following guides prior to class this week:

  1. Building Your First Web Page
  2. Getting to Know CSS
  3. Working with Typography

Some web sites to search for images:

Videos available on YouTube for viewing this week:

Week 5: HTML5 and CSS Page Layout

Build StructureThis week we will introduce Structural Page Layout, as a method for dividing a web page into sections and controlling the presentation of a web page or an entire web site. This must be demonstrated on your Final Website Project.

Please print the slide set and all posted PDF documents as they will be your primary source of information in the class:

Work through learn.shayhowe.com - Learn to Code HTML & CSS. We will be shifting to this web site for the remainder of the course as it provides the prospective of a professional web developer. The www.w3schools.com website will be useful as a reference for the remainder of the course, but I will not formally assign sections for this website. Read and work through the following guides prior to class this week:

Videos available on YouTube for viewing this week:

Week 6: HTML5 and CSS3 Tables

TablesThis week we will introduce HTML Tables, as a method for organizing information in tabular form. This must be demonstrated on your Final Website Project.

Please print the slide set and all posted PDF documents as they will be your primary source of information in the class:

Work through learn.shayhowe.com - Learn to Code HTML & CSS. The www.w3schools.com website will be useful as a reference for the remainder of the course, but I will not formally assign sections for this website. Read and work through the following Lessons prior to class this week:

Videos available on YouTube for viewing this week:

Week 7: Forms and Tinsel for your web sites

TinselThis week we will discuss adding some extras to your web site like gradients, audio, videos. Also we will look at BlueGriffion.org and interesting freeware application that allows you to create web sites using drag and drop. Warning though it can mess up your code!

Please print the slide set and all posted PDF documents as they will be your primary source of information in the class:

Work through learn.shayhowe.com - Learn to Code HTML & CSS. The www.w3schools.com website will be useful as a reference for the remainder of the course, but I will not formally assign sections for this website. Read and work through the following Lessons prior to class this week:

Web Site Topics and Links

Name Uniform Resource Locator Topic
Xzabier Arebalo http://xzabiera.pancakeapps.com/ How to be a web developer
Andre Bryant http://andrebryantcmst.pancakeapps.com/ Motorsport Drifting
Pahlo Easley-Correa http://pahlo.pancakeapps.com/ Photography Home Biz
Nikah Holmes http://nikky.pancakeapps.com/ Motorcycle School Web Site
Dana Lucio http://dlucio.pancakeapps.com/ 31 Handbags Home Biz
Jazumin Nishihara http://jazumin.pancakeapps.com/ Okinawa Dog Activities
Kayleigh Owen http://kowen.pancakeapps.com/ Being a Bard (story teller)
Kristy Stroll http://kstroll.pancakeapps.com/ Balloon Biz
Randie Wilson http://rwilson.pancakeapps.com/ Natural Hair

Week 8: Forms and Tinsel for your web sites

Final Exam is in Tuesday’s class this week.

Final Website Project Presentation is Thursday’s class this week.