Website Design & Development Syllabus

U48 318 Website Design and Development

Washington University in St. Louis
University College
Dept. of Communications & Journalism

Spring 2020
Saturdays 9:00 a.m.–noon
January 25—May 2, 2020
Eads 14

On this page…

    Instructor: Scott Granneman

    You can also read my full CV.

    Course Description

    Website Design & Development covers website development using the two technologies required in all webpages today: HTML (which provides structure) and CSS (which sets formatting & positioning). After a broad overview of HTML we’ll learn the basics of CSS (the Advanced course in the Spring covers CSS in far more depth). We’ll conclude with Responsive Web Design: a modern method for developing websites that provides optimal viewing experiences (in terms of reading, navigation, and layout) across a wide range of traditional and mobile devices.

    What You're Going to Learn

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

    You can find a lot of very useful info in this article: The 2019 Web Developer Roadmap - A Visual Guide to Becoming a Front End, Back End, or DevOps Developer.


    During each class I will take a few minutes & discuss a mini-topic for 15 minutes or so. Some of these mini-topics include:

    • Snippets
    • 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
    • Minimizing code
    • WYSIWYG Web tools
    • Automating my Mac



    There are no required books. Readings & course materials will consist of slides, webpages, & assignments I have created. Virtually everything you need can be accessed via my website. When it's appropriate I may 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.

    Wash U's library has many web development books available online, at If you are on-campus, you should be able to simply access the books; if you are off-campus, you will need to log in with your WUSTL Key.

    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?


    Your grade will be based on the following factors:

    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 a bit different from most others. Here’s how.

    Flipped Teaching

    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.

    Grading Together

    Note that all grading will be done by the two of us sitting together. I will never accept homework turned in via email.

    Want to Show Me Your Code?

    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:


    Accommodation of disabilities

    This 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.

    Academic Integrity

    This course will follow Washington 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!


    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.


    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.


    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
    • Grid
    • Centering horizontally & vertically
    • Striped tables
    • Better data table UI
    • 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
    • Contrasting text against backgrounds
    • Cool borders & CSS counters
    • Multiple flowing text columns
    • Responsive Colors project
    • Agency
    • Facebook form
    • Thumbnail gallery
    • BEM
    • Alert Bar

    2019-01-25 Review

    Intro & Review

    2019-02-01 Visual Studio Code / Selectors

    Visual Studio Code
    An open source, free, innovative editor for HTML, CSS, & JavaScript (& many other languages!)


    :nth-child(odd) & (even)


    Project: zebra-striping

    2019-02-08 Selectors

    Cool tools

    VSCode extensions




    Project: negative-margins

    ::after & attribute selectors



    2019-02-15 SCSS


    Project: css-to-scss

    2019-02-22 Responsive Web Design with Bootstrap

    VSCode extensions



    2019-02-29 Bootstrap / Flexbox


    2019-03-07 Flexbox / Grid



    NO CLASS: Spring Break!

    2019-03-21 Grid / Flexbox & Grid


    2019-03-28 Git












    WebSanity Top Secret