Website Design & Development Syllabus (8-Week)

U48 318 Website Design and Development

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

Summer 2018
Tuesday/Thursday 6–9 p.m.
June 12—August 2, 2018
Eads 14

On this page…

    Instructor: Scott Granneman

    You can also read my full CV.

    Course Description

    This course focuses on one of the most important advanced areas of Web development: Cascading Style Sheets (CSS), which allow developers to set the formatting and positioning of objects in webpages in a standards-based and robust way. We will cover topics such as CSS selectors, media-specific styles, animation, navigation, layouts via Flexbox & Grid, lightboxes, and lots and lots of Responsive Web Design via Bootstrap and other frameworks.

    What You're Going to Learn

    Basically, advanced CSS techniques, including Flexbox, Grid, & 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 & Grid 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

    Course Materials

    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.

    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. Do keep that in mind!

    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

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

    Privacy

    I may keep some assignments to show future students. In those cases, the student’s identifying information will be removed from the assignment or project.

    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!

    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? Something won’t install, or won’t work? If you contact 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

    2018-06-12 Intro

    Introduction & Review

    2018-06-14 Visual Studio Code

    Software

    VSCode: an open source, free, innovative editor for HTML, CSS, & JavaScript (& many other languages!)

    For installation, configuration, & extensions, see:

    CSS

    :nth-child(odd) & (even)

    Slides

    Project: zebra-striping

    2018-06-19 Selectors

    Cool tools

    VSCode extensions

    • Bracket Pair Colorizer by CoenraadS
    • Style formatter by dweber019
    • Lorem ipsum by Daniel Imms

    CSS

    :first-child

    Slides

    Project: negative-margins

    ::after & attribute selectors

    Slides

    Projects

    2018-06-21 SCSS

    SCSS

    Project: css-to-scss

    2018-06-26 Responsive Web Design with Bootstrap

    VSCode extensions

    • File Utils by Steffen Leistner
    • Placeholder Images by Jake Wilson

    Media-Specific Styles

    Responsive Web Design with Bootstrap

    WebSanity Top Secret