COAP 3120 01: Cascading Style Sheets
Webster University
George Herbert Walker School of Business & Technology
Dept. of Mathematics & Computer Science

Spring 2017
01: Tu–Th 10–11:20 a.m.
January 17–May 11 2017
East Academic Building 212, Webster Campus

On this page…

    Instructor: Scott Granneman

    Adjunct Professor
    Washington University in St. Louis
    Webster University
    Instructor
    Professional Education Technology & Leadership Center
    Author
    Don’t Click on the Blue E!: Switching to Firefox (O’Reilly: 2005)
    Hacking Knoppix (Wiley & Sons: 2005)
    Linux Phrasebook (Pearson: 2006)
    Podcasting with Audacity: Creating a Podcast with Free Audio Software (Prentice Hall: 2007)
    Google Apps Deciphered: Compute in the Cloud to Streamline Your Desktop (Prentice Hall: 2008)
    Mac OS X Snow Leopard for Power Users: Advanced Capabilities and Techniques (Apress: 2010)
    Linux Phrasebook (Second Edition) (Pearson: 2015)
    Contributor, Ubuntu Hacks (O’Reilly: 2006) & Microsoft Vista for IT Security Professionals (Syngress: 2007)
    Former columnist for SecurityFocus & Linux Magazine
    Former professional blogger for The Open Source Weblog
    Full list of publications
    Business Owner
    Principal, WebSanity
    Contact Info
    scott@granneman.com
    Mobile: 314-780-0489 (feel free to text, but please identify yourself)
    Blog: Chainsaw on a Tire Swing
    Twitter: @scottgranneman
    Facebook: http://www.facebook.com/scottgranneman

    You can also read my full CV.

    Course Description

    This course covers the styling of webpages as defined in the latest CSS specification. Students will develop style sheets in real-world exercises and master the skills to create effective style sheets for the Web.

    What You're Going to Learn

    Basically, advanced CSS techniques, including Flexbox & Responsive Web Design. And a lot of other, very cool stuff related to CSS as well.

    Learning Outcomes

    • Ability to implement an appropriate planning strategy for developing CSS for websites.
    • Ability to produce functional, flexible, & versatile style sheets for websites.
    • Ability to locate, evaluate, & critically assess current & emerging technologies for developing websites with CSS.
    • Possess a very good working knowledge of CSS and various techniques.
    • Understand how to use Bootstrap to create responsive websites.
    • Understand how to use Flexbox for simple & complex layouts of webpages.
    • Experience creating various small website projects.
    • An awareness of the process in creating a website & the various roles needed in that process.

    Mini-Topics

    During most classes I will take a few minutes & discuss a mini-topic for 10 minutes or so. Some of these mini-topics include:

    • Snippets
    • Offline documentation
    • Regular Expressions (RegEx)
    • Simplenote
    • OpenDNS
    • Backing up
    • Password safes
    • RSS
    • The best help sites
    • Ebooks
    • Markdown
    • Wolfram Alpha
    • Cookies
    • LAMP (& WAMP & MAMP)
    • Git & GitHub
    • Portable Apps
    • Encoding email addresses
    • SEO
    • Finding multimedia
    • AJAX
    • Formatting & beautifying code
    • Minimizing code
    • WYSIWYG Web tools
    • Automating my Mac
    • Programming fonts
    • Using Word to make webpages
    • Pattern libraries
    • The WebSanity Toolkit
    • jQuery

    Requirements

    Texts

    There are no required books. Readings will consist of articles, analyses, & ephemera from the Internet. Virtually everything you need can be accessed via my website; however, when it's appropriate I will recommend books useful for further study & reference.

    OK, if you just have to kill a tree, I highly recommend Jon Duckett's HTML & CSS: Design and Build Websites. But it's not required.

    Jon Duckett’s JavaScript and JQuery: Interactive Front-End Web Development is also very good if you want to learn JavaScript.

    Tasks

    In order to participate fully in this class, you need to sign up with GranneClass, an email discussion group hosted by Yahoo Groups (note that you do not need a Yahoo account!).

    To subscribe, send an email with a short sentence explaining who you are to granneclass-subscribe@yahoogroups.com. To send and receive email, you do NOT need to be a Yahoo member.

    To view archived messages, go to http://groups.yahoo.com/group/granneclass; note, though, that you must be a Yahoo member (which is free and relatively painless) to use the group on the Web.

    Please note that my Web development course at Washington University also uses GranneClass. Cross-pollination is a good thing in nature; I think it will be a good thing in this case as well. If a message is meant for students at a particular university, however, I will preface the subject with either "WASH U" or "WEBSTER" to indicate to whom it is directed.

    Grading

    Your grade will be based on the following factors:

    • Class attendance and participation (20%): You are expected to attend class prepared to learn and discuss the topics with your fellow classmates. We may also work on in-class exercises, and you are expected to take an active part in those exercises.
    • Projects (80%): We will practice HTML5 & CSS in & out of class with a series of assigned projects involving the use of these technologies. Think of them as open-book tests, since you will be allowed (heck, encouraged!) to use your class notes, websites, & any other resources you can access. IMPORTANT: You must either show me that you have completed a project within two weeks of its assignment date or asked me for an extension. Neglecting to do so will result in a failing grade for that project.

    Grades will be based on an average of the above as follows:

    100 A+
    94-99 A
    89-93 A-
    86-88 B+
    83-85 B
    79-82 B-
    76-78 C+
    73-75 C
    69-72 C-
    66-68 D+
    63-65 D
    59-62 D-
    0-58 F

    At any time you can ask me how you’re doing in the course & I will show you.

    Policies

    Accommodation of Disabilities

    Webster University is committed to providing accommodations and/or services to students with documented disabilities. If you have registered as a student with a documented disability and are entitled to classroom or testing accommodations, please inform me at the beginning of the course.

    Drops and Withdrawals

    The Drop/Add & Withdrawal dates are listed each semester on the University website, in the University catalog, & in the Course Description book. If the course is dropped within the Drop/Add period, no notation of the course will appear on the student’s transcript. Withdrawals that take place after the published Drop date will result in the dreaded “W” appearing on the student’s transcript.

    Privacy

    Some random student assignments or projects may be retained by the University for the purpose of academic assessment as it relates to student learning outcomes. In addition, I may keep some assignments to show future students. In those cases, the student’s name and all identifying information about the student will be removed from the assignment or project.

    Academic Integrity

    This course will follow Webster University’s policies concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question & referral to the appropriate individuals, who have discretion to impose a stricter penalty.

    While academic dishonesty includes cheating on exams and quizzes, it also includes plagiarism in written assignments. Plagiarism is not only passing off someone else’s work as your own, but also giving your work to someone else to pass off as their own. It also includes submitting work from another course. While I strongly encourage you to discuss your work with each other in and out of class, and while you may research issues together, your work should be your own.

    Any papers you submit must be your work alone, and must include citations to all references in your work. Please include the URL, or Web address, for articles and resources found on the Internet.

    If you have any questions about academic integrity, please bring them to me before you do anything that may jeopardize your grades, your education, & your future!

    Distractions

    I have no problem with students using a laptop, tablet, or smartphone during class for academic purposes; in fact, I would do the same thing. However, please do not use your personal device (or the computer on your desk) during class to conduct personal business such as Facebook, email, or IMing. This reduces your concentration & participation and distracts others around you. Repeated distractions will reduce your grade for the course. Please do what you need to do to keep cell phone distractions at a minimum.

    Netiquette

    It is paramount that we respect each other online in our email listserv. Follow this simple rule: disagree with the idea, but not the person. In other words, it’s OK to say “That’s a bad idea, because …”, and it’s not OK to say “You’re a bad/stupid/inconsiderate person, because …”. If you have an issue with a classmate’s behavior online, please bring it to me privately by emailing me at scott at granneman dot com. If you’d like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

    Tech Support

    Need my help diagnosing a problem you’re having remotely? Something won’t install, or won’t work?

    1. Download & install the free Jing, which works on both Mac OS X & Windows.
    2. Record what you’re seeing on your computer screen, up to a maximum of 5 minutes.
    3. Upload the resulting video to screencast.com (also free).
    4. Send me a link to the video.

    In the email you send me, include the following information:

    1. What you did.
    2. What you thought should happen.
    3. What actually happened.
    4. Why that’s a problem.

    If you’re talking about a public webpage, don’t forget to include the URL!

    Tentative Schedule

    This course focuses on CSS techniques that professionals use every day to solve real-world problems. We will cover as many of the following as possible during this semester.

    • SCSS
    • Centering horizontally & vertically
    • Striped tables
    • Negative margins
    • Version control with Git
    • Responsive tables
    • Media object layout
    • Full-page image backgrounds
    • Full-page video backgrounds
    • Parallax
    • Sticky headers
    • Fixed & “sticky” footers
    • Next/Prev
    • Typographic effects
    • Carousels
    • Overlays (AKA modal or lightbox)
    • Automated images after links
    • Accordian
    • Cards
    • Cool borders & CSS counters
    • Multiple flowing text columns
    • Responsive Colors project
    • Agency
    • Facebook form
    • Thumbnail gallery
    • BEM
    • Alert Bar

    January 17th, 2017

    January 19th, 2017

    January 24th, 2017

    SCSS

    CSS to SCSS Conversion

    January 26th, 2017

    SCSS

    CSS to SCSS Conversion

    January 31st, 2017

    SCSS

    CSS to SCSS Conversion

    February 2nd, 2017

    February 7th, 2017

    Something fun

    Assignment

    February 9th, 2017

    Something fun

    Assignment

    February 14th, 2017

    Something fun

    Assignment

    February 16th, 2017

    Something fun

    Assignment

    February 21st, 2017

    Something fun

    Assignment

    February 23rd, 2017

    Something fun

    Assignment

    February 28th, 2017

    Something fun

    Assignment

    March 2nd, 2017

    Something fun

    Assignment

    March 7th, 2017

    Something fun

    Assignment

    March 9th, 2017

    Something fun

    Assignment

    March 14th, 2017

    Spring Break!

    March 16th, 2017

    Spring Break!

    March 21st, 2017

    Something fun

    Assignment

    March 23rd, 2017

    Something fun

    Assignment

    March 28th, 2017

    Something fun

    Assignment

    March 30th, 2017

    Something fun

    Assignment

    April 4th, 2017

    Something fun

    Assignment

    April 6th, 2017

    Something fun

    Assignment

    April 11th, 2017

    Something fun

    Assignment

    April 13th, 2017

    Something fun

    Assignment

    April 18th, 2017

    Something fun

    Assignment

    April 20th, 2017

    Something fun

    Assignment

    April 25th, 2017

    Something fun

    Assignment

    April 27th, 2017

    Something fun

    Assignment

    May 2nd, 2017

    Something fun

    Assignment

    May 4th, 2017

    Something fun

    Assignment

    May 9th, 2017

    Final

    Agency Website

    May 11th, 2017

    Final

    Agency Website

    WebSanity Top Secret