Design and Writing for the World Wide Web Syllabus

MC 327 001: Design and Writing for the World Wide Web
Southern Illinois University Edwardsville
School of Arts & Sciences
Dept. of Mass Communications

Fall 2018
Tu–Th 1:30–2:45 p.m.
August 20–December 12, 2018
Dunham Hall, Room 1014

On this page…

    Instructor: Scott Granneman

    You can also read my full CV.

    Course Description

    This course provides a comprehensive overview of both the theoretical & practical aspects of the World Wide Web. You will learn digital media praxis & multi-modal storytelling as well as design, create, review, revise, & publish a medium-sized Website project. You will also learn hands-on-skills in writing & editing text for Web delivery as well as sophisticated Web usability issues and designing strategies.

    What You’re Going to Learn

    Basically, HTML & CSS & how to put them together correctly to create an effective website.

    Learning Outcomes

    Upon successful completion of the course, you should be able to:

    • Demonstrate a fundamental knowledge of the World Wide Web
    • Code a website correctly using HTML & CSS, the foundations of the Web
    • Create a responsive website that functions & presents itself appropriately for differently sized devices
    • Understand and demonstrate Web writing styles
    • Critically evaluate others’ use of multimedia (audio, images, text, & video) in Web authoring
    • Familiarize yourself with resources a website needs before it goes live


    During some 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



    There are no required books. Virtually everything you need can be accessed via my website; however, when it’s appropriate I will recommend books & articles useful for further study & reference.

    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.

    Communicate with Remind

    Email still has its uses, but it’s time for us to keep in touch outside of class with a more modern tool: messaging. I found a great free service called Remind that you can use either as an app on your iPhone or Android device, or via texting.

    You can download the app from the usual places:

    To join our course’s Remind group, you will need to get instructions from me during class.

    So what are we going to use Remind for?

    • A way for me to communicate with students in the class. If I need everyone to know something about the class (like I'm vomiting or trapped in a burning car, so I might be late), I’ll send it to Remind.
    • A way for me to share interesting readings with students. If I find an article that looks like something appropriate to this course, I’ll send it on via Remind. It’s just a suggestion for reading; it’s not required.
    • A way for you guys to communicate with me or other students. When you send an message to Remind, it goes to everyone. Keep that in mind!


    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.

    How the Class Works

    This course is based around the idea of flipped teaching. Instead of coming to class to hear a lecture & then going home to do work, we’re going to flip that.

    I’ve made videos for most of the lectures in this course, & you will watch those at home. Some videos are 2 minutes long, while the longest is around 40 minutes; most are around 10 minutes or so. When we’re in class, I’ll review important or tricky stuff, answer questions, & walk around to help or grade your work.

    Note that all grading will be done by the two of us sitting together. I will never accept homework turned in via email or any other way that is not collaborative.

    If you want to show me some code that you’re confused about or need help with, please go to Pastebin, do the following, & then send me the URL:

    • Enter your code into the box
    • Set Syntax Highlighting to HTML or CSS
    • Set Paste Expiration to 1 week


    Accommodation of Disabilities

    SIUE is committed to providing accommodations and/or services to students with documented disabilities, as well as other classifications of disability specified in the Americans with Disabilities Act of 1990. If you require assistance under the provisions of the ADA, please inform me immediately. Every effort will be made to create a favorable environment for everyone to fulfill essential course requirements.

    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.


    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 the policies outlined in SIUE’s Student Conduct Code concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question & referral to the appropriate individuals.

    While academic dishonesty includes cheating on exams & 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. The SIUE Student Conduct Code contains an overview of plagiarism that you should familiarize yourself with.

    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. All papers may be subject to submission for textual similarity review to TurnItIn for the detection of plagiarism. Some papers submitted for review will be included as source documents in the global TurnItIn repository to be used in future reviews. You should remove your name and any other personally identifying information from your papers prior to submission to TurnItIn.  For additional information on and instructions pertaining to TurnItIn, consult the SIUE TurnItIn resource page at

    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!


    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 messaging. This reduces your concentration & participation, & distracts others around you. Repeated use will reduce your grade for the course. Please do what you need to do to keep such distractions at a minimum.

    Etiquette & Conduct

    It is paramount that we respect each other in class & online. 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 If you’d like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

    In accordance with SIUE’s Student Conduct Code, acts of misconduct for which students are subject to discipline include, but are not limited to, intentional interference with or disruption of class as well as behavior or conduct which poses a threat to the mental, emotional, or physical well-being of self or others. Non-compliance, interference, or resistance to this code is considered actionable when a student fails to comply with a reasonable verbal or written instruction or direction given by a University employee (e.g. instructor, teaching assistant, or staff member). In such cases or violation, it is the University employee’s right & responsibility to remove or disenroll the student from class (via the Campus Police, if necessary), and seek out the appropriate sanctions (e.g. suspension, separation, probation, enrollment restrictions, or expulsion from the University) pursuant to the conduct code policy.

    The Department of Mass Communications’s curriculum is designed to foster student understanding of issues and perspectives that are inclusive in terms of race, ethnicity, & sexual orientation. It also strives to help instill an appreciation for the diversity of groups in a global society in relation to communications. As such, producing work that panders to racism, sexism, classism, homophobia, xenophobia, or other social pathologies is not an acceptable way to express ideas, & will not be tolerated.

    So in the words of E.T., be good.

    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 (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!





    Web Dev Basics


    Visual Studio Code


    HTML Overview 1

    HTML Overview 2


    No class — Labor Day!


    HTML Overview 3

    HTML Overview 4


    HTML Linking


    HTML 1

    HTML 2


    Writing for the Web

    HTML 3


    CSS Overview 1


    CSS Overview 2


    CSS Overview 3


    CSS Overview 4


    CSS 1


    Layout Methods


    Layout Methods


    Layout Methods


    Media-Specific Styles


    Media-Specific Styles


    Responsive Web Design with Bootstrap


    Responsive Web Design with Bootstrap


    Responsive Web Design with Bootstrap


    Responsive Web Design with Bootstrap


    CSS Typography Basics


    CSS Typography: Embedding Fonts

    CSS Typography


    Finding Multimedia


    No class — Thanksgiving!


    No class — Thanksgiving!


    Integrating Social Media


    Integrating Social Media




    Google Search Console





    WebSanity Top Secret