Welcome to CMST 386

My FaceThis 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 https://okinawabob.github.io/umuc/cmst386/

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 CMST385 to insure students come into the class with intermediate computer skills and a basic understanding of HTML, CSS, and web images.

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.

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: HTML5, GitHub Pages Setup, and SEO

Designer vs Developer

The first week we will be getting familiar with a new web server to host pages, consider a new code editor called Atom, review HTML5 elements, and examine Search Engine Optimization. UMUC no longer has a textbook for the course and seems to be relying on videos for learning the material in this course, so we will be viewing these in class. The LEO video links are described in the Read & Watch from LEO section below and many are hosted by Microsoft as part of their various certification programs.

I have also created links to interesting videos that I have found about various web topics. One series I like is by the web developer Travis Neilson who currently works at Google and I will be linking to many of his YouTube Channel Videos. Start with his two videos linked below:

Reading assignment to do prior to class this week:

I have provided links to ebooks for those that still like to read. This weeks reading assignment will be to read all material listed in Read & Watch from LEO section below and read Lesson 12 - Writing Your Best Code from Shay Howe's book
Learn to Code by book HTML & CSS or his web site learn.shayhowe.com/html-css/writing-your-best-code/

GitHub and GitPages Web Hosting

The first week we need to get familiar with our new web hosting, which will utilize GitHub Pages. Pancake.io has become unreliable so time for a change. This requires you to create a GitHub account, install a desktop application, and utilize GitHub Pages.

I have including links to videos that describe GitHub below and an ebook for those that like to read. Please view and read so you have a better understanding of GitHub and the Git VCS.

Sign up for a GitHub account at github.com/.

After you have complete this process then download and install the GitHub desktop application for your operating system at desktop.github.com/.

After you have completed this install process then setup GitHub Pages on your account by following the process described on the videos below.

Code Editors

We will need a text editor to edit our code HTML, CSS, and JavaScript code. In the previous class I recommended Komodo Edit and if you are happy with it please continue to use it. You can utilize any text editor with GitHub in the class. If you are looking for something new and trendy, that is also GitHub aware try using Atom, the newly developed hackable editor.

If you would like to try Atom download and install it at https://atom.io/ and read the Atom Flight Manual. Watch the videos below and also print my Atom Code Editor Notes and Emmet Quick Reference.

Read & Watch from LEO

I have transferred much of the LEO content of value to this page in an effort to edit broken links.

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

Let's get started with Assignment 1

Week 2: Page Layout and CSS3

Page layout CSS

The focus of this weeks content will be Page Layout using the new HTML5 page layout elements and CSS3. A free ebook is available on CSS3 below at Syncfusion.com titled
CSS3 Succinctly available as PDF or MOBI files

Design + Code my Personal Website in 12 hours. Watch Travis from DevTips YouTube channel redesign his personal web site. He is both an artistic designer and a coder. In the first three videos his focus is on design and all you need is paper and pencil. Unfortunately, when he gets to coding he loves Jade and SASS which is not covered in this course. The title of his WebSite Design videos playList is:

LearnWebCode YouTube Channel provides an excellent video playlist going through CSS concepts. For those that need a review of CSS2, please go through his first 18 videos. In class we will cover four of his later videos in the sequence, which will allow us to do advanced layout that will work well on large and small screens:

Other videos of interest:

Read & Watch from LEO

Helpful Website Proposal Links from LEO

Web Site Proposal Plan Assignment

Week 3: Interactivity & Multimedia

Page layout CSS

This week we will examine different ways of adding interactive user content to your web page to include HTML forms. However, the HTML form will not be useful until we learn some JavaScript to interact with the form. Server side programming and database interactivity is not covered in this course. To make your content more interesting audio and Video hosting will also be covered this week.

Please continue reading the next two chapters in CSS3 Succinctly.

This week we will examine different ways of adding interactive user content to your web page to include HTML forms. However, the HTML form will not be useful until we learn some JavaScript to interact with the form. Server side programming and database interactivity is not covered in this course. To make your content more interesting audio and Video hosting will also be covered this week.

Please print the slide set below and Quick Reference HTML5 and CSS3 documents as they will be your primary source of information in the class this week:

Read learn.shayhowe.com - Learn to Code HTML & CSS.

Design + Code my Personal Website in 12 hours.

Watch Travis do the full design before he codes anything using a graphics program.

Flexbox is a great tool for doing page layout that adapts to various screen sizes. Please work through content at the following web sites to get familiar with flexbox and consider using in your web site for Assignment 2.

Read & Watch from LEO

Free Mulimedia Tools and File Types

Adding Interactivity on your Website

Ready for Assignent 2

Week 4: Introducing JavaScript

This week we will cover some final CSS items and introduce JavaScript as a client side language that will allow more interactive content for our web pages.

Please download the following 87 page ebook which is available as a PDF for printing You Don't Know JS: Up & Going from shop.oreilly.com.

You really must read the reading assignments before class!

Videos to watch this week:

Reading Assignment to read BEFORE class this week:

PowerPoint Slides to print and utilize:

Protecting content: Citations, copyrights, and who's ripping me off?

Please read these articles:

10 Myths about Copyrights www.templetons.com/brad/copymyths.html

How can you tell if someone is ripping you off? Use the CopyScape Copyright Search Tool: www.copyscape.com

Assignment 3: Introduction to JavaScript Due December 1

Week 5: JavaScript Control Structures and Functions

This week we will learn JavaScript control structures.

PowerPoint Slides to print and utilize:

Read & Watch from LEO:

Videos to watch this week:

  1. Introduction to JavaScript
  2. JavaScript Comments and Statements
  3. JavaScript Variables
  4. JavaScript Different Types of Variables
  5. JavaScript Using Variables with Strings
  6. Math Operators
  7. Assignment Operators
  8. if Statement
  9. if/else Statement
  10. Nesting
  11. Complex Conditions
  12. while Loop
  13. for Loop
  14. do while

Reading Assignment to read BEFORE class this week:

Assignment 3: Introduction to JavaScript Due December 1

Assignment 4: JavaScript with Form GUI Due December 8

Week 6: JavaScript Functions, Arrays, and Objects

This week we will finish JavaScript control structures and introduce JavaScript functions which are a means to respond to form events and utilize a form as a GUI (graphical user interface) for our web pages. The Assignment 4 must utilize a form.

PowerPoint Slides to print and utilize:

Videos to watch this week:

  1. JavaScript Tutorial - 6 - Functions
  2. JavaScript Tutorial - 7 - Using Parameters with Functions
  3. JavaScript Tutorial - 8 - Functions with Multiple Parameters
  4. JavaScript Tutorial - 9 - The return Statement
  5. JavaScript Tutorial - 10 - Calling a Function From Another Function
  6. JavaScript Tutorial - 11 - Global & Local Variables
  7. JavaScript Tutorial - 36 - Math Objects
  8. JavaScript Tutorial - 28 - Arrays
  9. JavaScript Tutorial - 29 - Other Ways to Create Arrays
  10. JavaScript Tutorial - 30 - Array Properties and Methods
  11. * JavaScript in Half an Hour * (The Best One)
  12. JavaScript and the DOM (Part 1 of 2)
  13. JavaScript and the DOM (Part 2 of 2)

Reading Chapter 3 BEFORE class this week. If you would like to dive deeper into JavaScript check out each sub-order list below to read for free.

My versions of Temperature and Risk programs

Assignment 3: Introduction to JavaScript Due December 1

Assignment 4: JavaScript with Form GUI Due December 8

Week 7: JavaScript - Object Oriented Concepts

The focus this week will be to finish Assignment 4 using JavaScript and Forms as a GUI Graphical User Interface. Please continue working on your Final Project this week, which must be presented in class next week. We will also introduce object oriented constructs using JavaScript.

Videos to watch this week:

  1. SVG Tutorial: With CSS Animation
  2. What is Object-oriented Programming? (JavaScript)
  3. JSON and AJAX Tutorial: With Real Examples

How To Create A Sitemap:

As part of your web project proposal you created a site map diagram to show how your site would be organized. Now you'll create an xml sitemap to improve your chances of being indexed into search engines like Google, Bing and Yahoo.

  1. More information on Sitemaps from Google
  2. How to create your Sitemap

JavaScript Libraries and Scripts

By now you've read about JavaScript in our text and you know what it is and what it can be used for. Please remember that JavaScript and Java are two completely different things. JavaScript was developed by Netscape and was originally called "LiveScript". At the time, Java was getting a lot more attention so Netscape renamed "LiveScript" to "JavaScript". It worked but left us with a legacy of confusion.

When it comes to JavaScript, you have several options:

  1. Do it yourself - learn how to write JavaScript and create your own code from scratch.
  2. Use JavaScript libraries - learn enough JavaScript to write some code based upon existing .js libraries.
  3. Find and use complete Scripts that have already been written for you.

Each of these options has its advantages and disadvantages. Learning JavaScript takes time but gives you the most flexibility because you can create exactly what you need. On the other hand, some say that you'll be reinventing the wheel. Using existing libraries and scripts takes less time but you're limited to what others have written.

Learning JavaScript

  1. codecademy.com/learn-javascript
  2. JavaScript Kit Tutorials
  3. W3 Schools: JavaScript Tutorial

JavaScript Libraries

Let's start with my personal favorite - JQuery: jquery.com. It's possible to do very cool things with JQuery. Very little JavaScript knowledge is needed. Want to try it? Try Learn JQuery in 30 days from NetTuts: learnjquery.tutsplus.com

Here's a fairly comprehensive list of JavaScript Libraries: en.wikipedia.org/wiki/List_of_JavaScript_libraries

The Google Libraries API provides access to a growing list of the most popular, open-source JavaScript libraries:developers.google.com/speed/libraries/

Finding and Using JavaScript Code

You don't need to know JavaScript to find and use existing scripts to do what you need. Most scripts come with specific instructions telling you where to place them in the web page and how to modify them to meet your needs. There are many thousands of free scripts available for use. Please cite the source for scripts you find and use. Sometimes the author will tell you how to do so:

Assignment 4: JavaScript with Form GUI Due December 8

Week 8: Final web sites presentations

Web Site Topics and Links

Name Uniform Resource Locator Topic
Xzabier Arebalo xzabiera.github.io/CMST386/ Social Media Site
Jair Daza https://hell-hammer.github.io/CMST386/Exercise2/1BandHomePage.html Rock Band Fan Site
Pahlo Easley-Correa pahlo.github.io/CMST386/ Photography Business
Stephen Harrington madgame3.github.io/cmst386/ and http://okistuff.com/ OkiStuff.com buy/sell site
Nikah Holmes https://nikkyh.github.io/cmst386/final_restaurant/index/ Country Style Restaurant site
Jonathan Ketchum veedubrunner.github.io/cmst386/ My Channels: Twitch, YouTube, DeviantArt
Dana Lucio dana88.github.io/386/ 31 Gifts and Bags business site
Kayleigh Owen k-owen.github.io/cmst386/ Modern-Day Bards (Storyteller)
Dominic Rose https://domonos.github.io/PCMods.html Modding Video Games
Randie Wilson rwilson16.github.io/cmst386/ Natural Hair Care

How to make it a multilingual web site? It isn't that difficult as long as you can speak all the languages. Create your structure first in your language of choice. Then create duplicate html files in the other languages and fill in the translated words. Consider this Language School website as an example which I created: okinawabob.github.io/language-school/

You should now be able to understand enough JavaScript so that my anti-spam function will make sense to you. Feel free to download it at okinawabob.github.io/anti-spam/ and utilize on your web site. I consider it to be creative commons.

I would appreciate if you can do the Course Evaluation in LEO.