HTML markup

Basic Information

Class Office Hours
Prof. Joshua Braun ILC S435
Fall 2020 Fr 9:30am–11:30pm via Teams
(and readily by appointment…)
Asynchronous
Fully Remote Course
See Moodle version for more contact info.

Catalog Description

In this course, students will learn basic web design and development skills to better pursue their journalism goals online. Topics include basic design principles, HTML, CSS, working with images, logo design, typography and how to incorporate external plugins and modules. Students will build a personal portfolio website and collaborate on class digital projects while exploring digital ethics, the role of social media in online journalism, mobile issues, data visualization, and contemporary trends in design and presentation.

Professor’s Introduction

Welcome to Journalism 435 Web Design for Journalists! This course will introduce you to some of the skills-based fundamentals of Web design and development. One semester is a surprisingly short time in which to learn some of these skills. Some we’ll explore thoroughly, while others we’ll merely touch on. But what you will discover is what all web designers and developers find out when they start: that design and programming are not skills you learn once, but a repertoire and way of thinking that you master over a lifetime. In that spirit, I’d like you to think of this class as an introduction in the most literal sense, in which you will meet for the first time a range of different technologies, all of which you will get to know better the more you use them, not just in this course, but beyond.

Course Objectives

Websites are effectively a conversation between two machines—your browser and a server on the Internet—to produce the pages you see when you browse the Web. While a number of technologies are on the rise that are changing the way websites are built—something we’ll cover down the road—many web applications are still commonly referred to as “three-tiered,” meaning that they can be thought of as existing in three interacting parts:

  • A system for storing data on the Web server.
  • A set of technologies on the Web server that do things with that data and deliver the results to your browser. This tier is also responsible for working with data you submit, and where necessary passing it along to the storage tier.
  • A set of technologies used by your Web browser talk to the server and to turn data from the server into a page you can view, read, and interact with.

If you’re not sure what all this means just yet, don’t worry. That’s what the class is for. With a few exceptions, we’re going to introduce these tiers one at a time, climbing them like rungs on a ladder. As you learn each one, you’ll develop a better understanding of what the next one is and how it fits into the picture.

Having said this, we’ll spend the majority of our time on the browser-technologies rung, as this is a design course and that’s where most design decisions are made. In other words, you won’t become an expert on every technology—this isn’t a computer science course—but you should learn enough to do some basic tinkering yourself and, more importantly, to talk to professional Web designers and developers in your present or future workplace and convey what you want without being confused or dazzled by their responses. In short, you should leave with a good overview of how everything fits together.

In that spirit, we’re also going to spend some time with a fully developed Web application, WordPress, and give you an idea of how to work with it, not just as an author, but as a Web designer.

Let’s reduce our objectives down to a few bullets:

  1. Learn conceptually how a three-tier Web application is put together.
  2. Learn how to use some specific Web technologies effectively—particularly those that are useful in design—and demonstrate how you can keep learning these skills on your own.
  3. Put these skills to use by working with at least one commonly used Web application (WordPress) that will help you down the line.

Course Format

Web design is a set of skills in which practice makes perfect. With that in mind, most weeks you’ll have assignments to hand in. Over the course of the semester, these will come in two forms—homework assignments and projects—which will be detailed in the “Assignments” portion of the syllabus below.

As for the class itself, given that we're undertaking the course in a "fully remote instruction" environment, I'm going to follow the best practices I learned during several years of teaching online in my first faculty position. To wit, most of the course will operate asynchronously, meaning that we typically won't have live meetings during a regularly scheduled class time. Rather, over the course of the semester I will post links to all our instructional materials to Moodle, most of which will typically point to a wiki where I've assembled a combination of written and video lectures. Unlike Moodle itself, the wiki allows me to post highlighted code snippets and perform a few other tricks with text and embedded media that are necessary to include in the notes and tutorials I've developed.

You can work through these materials at the times that are best for you, provided you're keeping up with the course schedule. They will consist of explanations and demonstrations of the different concepts and technologies we're covering in the class. The materials are set up in such a way that you'll be able to follow along with the demonstrations on your own computer as you go. (This is something that would be comparatively difficult in a synchronous remote lecture, where you might find yourself trying to watch a live lecture and build a webpage on the same laptop screen at the same time.)

We will also have a Microsoft Teams workspace where you can discuss and ask questions about the material. If you've not used it before, Teams is essentially Microsoft's answer to Slack. Unlike Slack, however, UMass pays for the premium features on Teams through its existing contract with Microsoft. So it's officially supported by the university, works with your existing UMass login, and will give us access to bells and whistles reserved for enterprise clients. I will set up chat spaces on Teams where you can talk with your peers about the material and get help with various assignments in the course. As you'll see below, I will require a certain amount of participation in these class discussions. Teams is also where I'll be hanging out to live-chat, video-chat, and otherwise answer your questions. I will treat it as my virtual office this semester.

Importantly, as required in the university's quality standards for online courses, you will be able to locate all of the instructional materials, as well as all of the course chats and discussion spaces by going first to Moodle, where I will post announcements and maintain a running list of assignments and links. Moodle will be the anchor that ties all the course materials together and a gateway to participation and help in the course.

Finally, I'm not opposed to meeting synchronously and plan to hold live office hours via videoconference in addition to being readily available throughout the semester to chat/videochat with individuals.

Role of the Professor

A big part of my job is obviously to introduce you to new technologies—through written and recorded lectures, demos, and exercises—answering questions along the way. However, as I say in the discussion above, Web design isn’t something you learn just once in a "one and done" fashion. The technologies behind it are continually evolving and while many of the essentials from this course will likely serve you far into the future, no small number of the details will likely become obsolete at some point. It’s also the case that if you pursue Web design beyond this course, you’ll inevitably need to acquire a more nuanced understanding of some of the more advanced tools that we’re only able to touch on briefly in the context of this class.

The upshot of all this is that, for this course to serve you well as you move into your respective futures, my job will be not simply to teach you technologies—or even concepts—but to teach you how to ask good questions about technical problems, troubleshoot your work effectively, and participate effectively in conversations and communities centered around code. In other words, if I’ve been effective this semester I will not just have introduced you to a set of tools. Rather, I will have taught you how to teach yourself about Web design going forward.

Course Materials

There is no textbook for this course, but you will need the following:

A UMassCreate Account. UMass is currently pilot-testing a free Web hosting service for use by students and faculty. Becau
se this is a pilot program, you must apply for the hosting space by visiting https://umasscreate.net, clicking “Get Started” and submitting a quick form. You may apply right away if you choose, but I will also go over the process of applying for a hosting space and setting it up in a tutorial video later this semester.

A Laptop or Desktop Computer. Normally you'd be able to use the lab computers in the classroom and elsewhere on campus for many exercises and assignments, but since we're working remotely this semester, you will need your own laptop or desktop computer on which to follow along with the instructional materials and do your work. While there are Web design apps for tablets and smartphones, these are typically tools designed to help out developers in circumstances where they absolutely cannot get to a computer—if they're stuck in the subway when a client's site crashes, for example. Even the most capable of these apps, like Textastic, can be confusing if you're not yet familiar with how websites and servers are configured. In short, this is not a class where you will be able to easily participate without a computer. If you do not have access to a laptop or desktop computer, please let me know and I will inquire into the measures the university is taking to accomodate folks in your situation with respect to remote courses. Note that students receiving financial aid may be eligible to apply to have that aid cover the purchase of a computer. If you wish to pursue this possibility, please contact your departmental advisor.

Required Software

There are a number of software applications we’ll be working with this semester. All of the ones we’ll be using are free and in some cases there are multiple options in terms of which application to use, depending on whether you’re working with a Mac, Windows PC, or Linux distribution. I’ll provide a brief list and explanation of the required software here and we will go over the applications in more detail in class.

Since there are often multiple programs that do the same job, I’ve listed different alternatives below, while highlighting the ones that I’ll be using most often to demo things in class. These are also the applications for which I’ll be providing the greatest tech support. In most cases, if you have a favorite program that does the same thing as one of those listed you will be free to use it instead, however there are some restrictions, which are discussed in the instructional materials for the course. If you have questions about a program you wish to use, please feel free to ask.

Text Editor

All computers come with a basic text editor already installed, however for the purposes of Web development and design you’ll want to install an advanced text editor, sometimes called a “source editor” or a “programming text editor.” Eventually you may want to delve into the “editor war,” however for the purposes of the class we’ll largely sidestep debates about which editor is best and go with a few popular options. Mac users will want to install BBEdit, which will be the primary editor we use in class (use the “Free Download” button; the software works without being purchased and you don’t need to pay for the premium version).

If you use a Mac, TextMate is another cool editor to check out. Windows users can grab Notepad++. Note that the Notepad++ site sometimes runs some spammy ads, so be sure you're clicking the official download button for the software and not a random download link from an advertiser. Linux people can install Kate. Later in the class, we‘ll spend some time with a very cool cross-platform editor called Atom that’s available for Mac, Windows, and Linux. Another cross-platform editor—simple to use, but sometimes buggy—is JEdit, which also works on Mac, Windows, and Linux.

If you're a student participating from China, or who may be affected by China's new "Provisions on the Governance of the Online Information Content Ecosystem," please note that the Notepad++ download page contains protest messages critical of the Chinese government. If you do not feel that you can access the site safely, given the criminal and civil liabilities introduced by the Provisions, either let me know and I will provide you with a current download of the software, or feel free to instead install jEdit, which is a workable alternative.

The Major Web Browsers

One of the gnarly things about Web design is that when you create a site it needs to work seamlessly not just in Chrome or Safari or another favorite browser—it has to look and work the same in all of them. For that reason you’ll need to have all the major browsers installed on your computer. The caveat, of course, is that Microsoft Edge and Apple Safari are specific to Windows and Mac computers, respectively, and you likely will not have access to both this semester. At the very least, please plan to install Mozilla Firefox and Google Chrome (or Chromium). If you want to publish a site you’ve built in class, though, you’ll want to test it across all browsers at some point. If you’re feeling experimental, you might even want to try out nifty alternative browsers like Vivaldi or Brave. Many browsers also have cool plugins and extensions for Web development that we’ll likely explore this semester. Lastly, while I won’t be requiring as much cross-browser compatibility testing on mobile devices as on desktop browsers (for reasons we’ll discuss), be aware that there are now lots of browsers to choose from on mobile devices.

FTP Client

While it’s possible—and advisable—to design and complete a website on your own computer before putting it online, when it’s eventually time to share it with the world you’ll need to upload your site to a Web server. To do that you’ll generally use a software application called an FTP client. A good free FTP client—available for both Mac and Windows machines—is Cyberduck. Another cross-platform option is FileZilla. WinSCP is a popular free FTP client for Windows users, and I recommend Mac users check out Fetch (a paid application, but the university provides it for free to students and the license never expires). Linux users can look into gFTP.

As we’ll discuss this semester, the functionality of FTP client software is increasingly built into other Web development applications—many advanced text editors and other development tools have options that let you upload files to a Web server without ever opening another program. There are also “Web disk” applications that create a folder on your computer to which you can simply drag files to upload them to a Web server, much like you can with Google Drive or Dropbox. We’ll discuss these options in class, but for a variety of reasons it’s still valuable to know how to use a regular FTP client application.

Non-Required Software

Microsoft Teams Native Apps

During remote instruction, I want to make the process of asking and answering questions as lively and robust as possible. These days, tools like Slack and Teams are helpful in this regard, as they put all the facilities for group chats, calling, videoconferencing, and filesharing in one place. Teams is Microsoft's answer to Slack and the university already pays for its premium features. You're also already set up to log into it via your UMass NetID, so I've found it to be a good choice. Teams works in your browser, of course, but there are also native apps available for all the major computer and mobile operating systems, which can help you to participate on the go and provide you with notifications of new activity in class discussions. I'll even mirror course announcements on Moodle to our Teams workspace so you can receive them as mobile notifications if you desire. Our Teams workspace is here.

Adobe Photoshop

You’ll likely want to manipulate some graphics for use in your designs, so Photoshop may come in handy. That said, it’s expensive and I don’t expect you to install it on your own computer. For the purposes of remote instruction, the university is making Photoshop available online via Windows Virtual Desktop, which I'll demo for you during the semester. If you’re looking for a free, fully functional alternative to Photoshop, you may want to check out the GNU Image Manipulation Program, which—despite being known by the unfortunate acronym, GIMP—is a highly capable image editor available for Mac, Windows, and Linux.

Windows Virtual Desktop Native App

Windows Virtual Desktop is an application that will, in effect, allow you to log into a Windows PC on campus and use it from your own computer. During remote instruction, this is the university's solution to allow students to use applications like Adobe Photoshop, for which they have a limited number of software licenses. If you need Photoshop during the semester and don't have it on your own computer, this is the way to get to it. Windows Virtual Desktop works in your Web browser, but there are also native desktop applications you can install to make the experience more seamless. The university has provided instructions and links to downloads here. Note that when you load up Adobe Photoshop by going through Windows Virtual Desktop, it will prompt you for your Adobe Creative Cloud login. Entering your UMass email should allow you to then log in to Creative Cloud with your UMass NetID and password.

Microsoft OneDrive Native App

For the purposes of this class, OneDrive only matters if you plan to use Windows Virtual Desktop. OneDrive is Microsoft's cloud drive solution, akin to Google Drive or Dropbox. As a UMass student, you have access to OneDrive for free with your university NetID login. When you use Windows Virtual Desktop, you're able to store any files you're working on directly to OneDrive, making it simpler to then get the files off of the remote Windows machine and onto your own computer. Note that in order to use this feature, you must set up a OneDrive account with your NetID before logging into Windows Virtual Desktop. Once you have OneDrive set up you can access your files in your Web browser at any time, but you may also choose to install the OneDrive native desktop and/or mobile applications on your own devices to make the experience more seamless. The university has provided instructions and links to downloads here.

Integrated Development Environments (IDEs)

Free IDEs like Aptana Studio, Eclipse—and their more expensive proprietary counterparts—are text editors that do lots of extra stuff, from organizing all the files for the project you’re working on to running code and managing connections to your Web server. We’ll likely tinker with a few IDEs toward the end of the semester, but I’m a firm believer that starting with simpler single-purpose tools like the ones above will give you a better foundational education in Web design than starting with an IDE. An IDE is pretty straightforward to pick up when you understand the building blocks it’s working with, but the reverse isn’t always true. Plus, the multipurpose nature of IDEs can make them unwieldy for a lot of basic tasks. An analogy: It’s easy to get excited about all the gizmos on a Swiss army knife, but when the task at hand is tightening a hundred screws, you’ll probably prefer an ordinary screwdriver to the fold-out tool on your pocket knife.

Local Server Environment Software

Don’t install this right away. I typically demo this software, but don't actually give assignments related to it so it's not essential to have. However, you may wish to install one of these tools if you want to tinker with the demonstration materials a bit. The job of this sort of software is to allow you to work on your own computer with code that typically only functions properly when it’s running on a Web server. For that reason it’s incredibly useful for designing and building a site before making it live on the Web. The reason I say not to install it right away is that, depending on how it's configured, this sort of software will turn your computer into an actual Web server, which—as you might imagine—can pose a security risk. There are a couple good cross-platform options for local server environment software, including XAMPP and MAMP (formerly just for Macs, MAMP now has a Windows version). Windows users can also try WampServer.

Terminal Application

The most powerful way of interacting with a Web host is via a terminal application, which gives you access to the command line. When you connect to your server with a terminal application, you can do more than just load files on and off of it. The command line gives you the ability to actually interact with the Web server in much the same way you use your own computer—running software applications, adjusting system settings, and so on. Mac users already have a very capable application for this, called Terminal, pre-installed. (Look in the “Utilities” folder inside your “Applications” folder.) That said, if you’re a Mac user who grows to love the command line you’ll probably want to check out iTerm2, which has some added bells and whistles. Windows users have typically made do with workaround apps like PuTTY, KiTTY, or MobaXterm to connect to their Web server's command line, though Windows has now released its own terminal application called (appropriately) Windows Terminal, which looks pretty cool. If you're a Windows user who grows to love the command line, you'll also want to check out Cygwin. The command line is pretty central to Linux, so Linux users typically have a wide variety of terminal applications pre-installed or readily available.

WYSIWYG Design Tools

WYSIWYG (“What You See is What You Get”) design tools like those offered by Wix and Squarespace offer to take the coding out of Web design, letting you choose from pre-set themes and drag images and content around the page. Then they write the code that goes under the hood. While desktop WYSIWYG applications like Adobe Dreamweaver (which is actually an IDE, too) allow you greater access to and control over the underlying code of your website, they likewise seek to offer users the ability not to worry about code.

This is all well and good, but we’re largely going to stay away from these tools over the course of the semester—and in fact I’m going to forbid their use on most of our assignments. Why? Beyond the obvious answer that you don’t need a class to master Wix, learning WYSIWYG tools isn’t going to help you talk to the designers and developers in your future job at a news organization. Just like taking awesome photos with your phone camera is a pretty limited basis for a conversation with the professional news photographer with two DSLRs hanging around their neck. Plus, to stretch the analogy further, knowing a bit about how a DSLR works—the effects of lensing, lighting, exposure time, focus, etc.—gives you familiarity with principles of photography that will make you a better phone photographer, even if that’s ultimately what you stick with out of convenience.

In the same way, by learning markup, code, and a few professional development applications, you’ll be able to use advanced features of WYSIWYG tools and to modify designs on common publishing platforms—WordPress, for instance—that have no WYSIWYG functionality for developers. You’ll also be able to better understand the limitations of platforms like Wix and Squarespace, making better decisions about what to use them for and when you should look for an alternative. Moreover, when you do want to use to a powerful tool like Adobe Dreamweaver, you can do so in a much more strategic and effective way—akin to switching a DSLR from automatic mode to manual to get the shot you want.

Course Requirements

Who Should Take This Class?

Journalism 333 Introduction to Visual Storytelling is officially a pre-requisite for this course and the class is technically restricted to UMass Journalism majors. That said, I am typically willing to waive the pre-req for motivated students. And if there are available slots after all the Journalism students who wish to take the course have enrolled, I may at my discretion allow students from other majors and institutions into the course. Students with special educational requirements are welcome in this class and are encouraged to contact me during office hours.

We will be learning a good number of tools and technologies this semester and at some point it is almost inevitable that you will get stuck on the details of some assignment or exercise—a line of HTML markup or CSS that won’t validate; a page that displays correctly in one browser, but not another; a bit of code that throws an error message or won’t run at all; code that works correctly on your computer, but not on the Web server. Even the most experienced developers and designers are constantly encountering errors and quirks. The reason people keep at it—beyond collecting a paycheck—is because the frustration of such occurrences is generally offset by the rush of getting your project to work. There’s something thrilling about getting the computer to do what you want, run what you’ve built—to graduate from being a user to a designer.

But in order to get from point A to point B, you need to be comfortable asking for help. And I want to make that expectation clear up front. This class is designed with the idea that there will be multiple channels for seeking assistance—via different areas of our Microsoft Teams workspace, by email, live chat, and video chat. As I discuss further down, I strongly urge you to ask questions in the spaces where the whole class can see them and learn from the exchange, but of course I'll also happily respond to private requests for help. If you’re having difficulties with exercises or assignments, but do not share them it is not an excuse for falling behind in the course.

If you are excelling in the course, or with a particular topic, then my expectation is that you will be a team player and contribute in ways that help your peers. The “real world” of Web design and development is one where people teach and learn from their peers. We will abide by this ethos in class as well. (Yes, I realize that the culture of Web and software development has some serious problems, but the idea here is to model best practices—to emulate the best aspects of development communities, not the worst ones.)

In short, for this class to work properly we need a course culture in which asking questions and admitting gaps in knowledge are the norm and in which constructive peer assistance is encouraged. (See below concerning the appropriate line between constructive assistance and academic dishonesty in the context of Web development assignments.)

When the course operates as this sort of community, I can also be a more effective teacher. When your questions are out in the open, I’m better able to be cognizant of individual learning curves and adjust the pace of the class to meet the group’s needs.

Assignments

Online Participation

While Moodle will be our main course site, I have set up Microsoft Teams, with its live chat and videoconferencing features, as a space for class discussion. Answers to questions about assignments and other help will be given through our Teams workspace, where I will create discussion spaces for each of the different units and assignments. You must contribute comments to the Teams workspace at least twice a week. Your contributions can be new top-level comments or (substantive) replies to your peers. If you don’t have a question, then answer someone else’s. If no one has questions, then share resources you’ve found relating the course material. More instructions on logging into the Teams workspace and receiving email notifications on discussion activity will be given during the first week of class. When asking code-related questions through Microsoft Teams or via email, you may find it useful to share the markup you’re referencing through a free pastebin site like HasteBin or PrivateBin, which make it simple to save and link to snippets of code. The desktop version of Teams also has some tools for sharing code that may be useful, which I'll highlight at the beginning of the semester.

I will monitor and respond to questions on Teams along with your peers. While I will never refuse to answer requests for help via email, I generally encourage you to post your questions to the areas of Teams where everyone can see them (since your questions will often be shared by others) and learn from the responses they generate. To be clear, I’ll also post responses to questions posted in these areas, I just like to have these conversations in the open where possible, so everyone can see, learn from, and participate in them.

Finally, because it's important to have a central repository for our course information, when I give a response to a question on Teams that I feel would benefit the class as a whole, I will mirror it to Moodle so as to keep it from getting lost in the scroll of the chat thread and make it more visible to everyone.

Homework

Homework assignments are relatively small assignments that will develop your skills. Each will be accompanied by an assignment sheet explaining the requirements, deliverables, and my criteria for assessment. You’ll have one week to complete most homework assignments. The deadline for homework assignments will specified in the accompanying assignment sheets and will typically be 2:30pm on the day they are due (the beginning of our SPIRE-assigned course time). I typically rewrite/adjust the homework assignments for this class as I go, each semester I teach it. As I explain below, every class has its own pace and learning curve and I like to tailor the frequency and content of assignments to reflect this. That said, you can expect around eight homework assignments over the course of the semester, with more assignments in the first half of the term (when we're picking up the basic concepts) than the second. All homework assignments will count for equal weight in the grade book.

Projects

Projects are larger assignments aimed at allowing you to stretch and develop your skills. Each will be accompanied by an assignment sheet explaining the requirements, deliverables, and my criteria for assessment. Because these are more involved than homework assignments, you’ll be given correspondingly more time to complete them. Each project’s deadline will be specified in the accompanying assignment sheet. As with homework assignments, I rework the frequency and content of projects each semester as I teach the course, but you can expect two to three projects over the course of the semester. All projects will count for equal weight in the grade book.

Final Project

For your final exam, you will work individually or in small groups to assemble a website. The details of this project will be announced later in the course (so I can tailor them to the class’s overall progress). The deadline for this project will be Monday, November 30th at 11:59pm.

Grading

Here is a breakdown of the contribution of each of the course requirements to your final grade and a look at the cutoff for each letter grade in the course. For specifics on the requirements themselves, see the “Assignments” section above.

Online Participation 10%
Homework 35%
Projects 35%
Final Project 20%
A 93 C 73
A- 90 C- 70
B+ 87 D+ 67
B 83 D 60
B- 80 F 0
C+ 77

Assignments will be evaluated differently depending on the tools, technologies, and objectives involved. As I say above, I will specify the evaluation criteria for each assignment individually during the semester.

I do not intend for it to be difficult to get a good grade in this course. If you complete all the assignments and participate substantively on the course site you should do quite well.

Course Policies

Late Work Policy

Work that is not submitted by a given deadline will receive a late penalty of three percent, or roughly one-half letter grade, for every 24 hours it is late. The late penalty is capped at 50 percent, meaning that very late work will be accepted for half credit. If you believe your circumstances warrant an extension on an assignment, please contact me in advance if at all possible.

Academic Honesty

All students are expected to be familiar with the university’s Academic Honesty Policy [PDF], which states that “academic dishonesty is prohibited in all programs of the University… Academic dishonesty includes but is not limited to: cheating, fabrication, plagiarism, and facilitating dishonesty.”

What does this mean for code?

The above is the standard. But an additional word about cheating and plagiarism are necessary in a class where you’re turning in assignments in languages like HTML, CSS, and JavaScript.

First, good developers do borrow code and markup from others, and one of the things we’ll learn this semester is that part of being a good developer is knowing when not to reinvent the wheel. But—and this is a very important, essential “but”—you must always give credit when you borrow code or markup in the form of an in-line comment in your document. We will go over how to leave in-line comments in different sorts of files as we go this semester.

Second, there is an important distinction to be made between borrowing a small piece of markup or a function that helps you execute your own design, and using someone else’s solution in its entirety. Even if you cite, I will regard the use of any borrowed code or markup that provides a complete or nearly-complete solution to an assignment as cheating.

If you have any questions about these policies, please ask. Note that understanding and avoiding plagiarism applies, not only within the academy, but also to the freewheeling culture of the internet. Borrowing and sharing of content without attribution can and will wreak all sorts of havoc on your online reputation if people regard it as stealing. If you have questions about how to give proper attribution in a particular online context, please ask me—or better yet, bring your questions to the class discussion space. They may well be valuable and interesting to everyone.

To this I would add: It’s been my experience that students who cheat are not bad people or serially dishonest. More often than not they’re dealing with a family emergency or other stresses outside class (things that may, sadly, be more common this semester). They’ve gotten behind and see cheating as something they will do just once to get caught up in a course. Unfortunately, it rarely works out this way, because all too often they get caught. I am required by university policy to take any instance of plagiarism or other cheating very seriously, and unfortunately however good your rationale it will be of little help to you after the fact. If you are having trouble in the class for any reason I encourage you to see me about it as soon as possible, and most definitely before you take any drastic measures. You’ll find that I’m willing to be more than reasonable about helping you to get through the course.

Finding Support

If you’re experiencing economic insecurity, housing insecurity, aren’t getting enough to eat, or find yourself in the midst of other social, emotional, physical, legal, family, and/or economic challenges that are affecting your academics, please know that the university has resources that may be helpful to you. UMass Amherst’s Student Affairs and Campus Life website contains a “Single Stop Resources” page to assist in connecting you with the people and offices that can help. Additionally, if you find yourself in a tough spot I encourage you to reach out both to me and to your undergraduate advisor in Journalism (or your home department) to develop a plan for getting through the semester. We realize that life happens and we want you to succeed.

COVID-19 Statement

If you experience disruptions to your learning and academic experience due to COVID-19, please reach out to me immediately. I am more than willing to be flexible and creative in helping you to finish the course in a satisfactory manner. I also encourage you to look to the support resources listed above and contact your academic advisor.

Disability Statement

The University of Massachusetts Amherst is committed to making reasonable, effective and appropriate accommodations to meet the needs of students with disabilities and help create a barrier-free campus. If you are in need of accommodation for a documented disability, register with Disability Services to have an accommodation letter sent to your faculty. It is your responsibility to initiate these services and to communicate with faculty ahead of time to manage accommodations in a timely manner. For more information, consult the Disability Services website.

Names and Pronouns

Everyone has the right to be addressed by the name and pronouns that they use for themselves. Students can indicate their preferred/chosen first name and pronouns on SPIRE, which appear on class rosters. Please let me know what name and pronouns I should use for you if they are not on the roster. A student’s chosen name and pronouns are to be respected at all times in the class.

Reporting and the Coronavirus Pandemic

While there is no reporting requirement for this course, the Journalism Department has asked that the following statement be included in all departmental syllabi to ensure its visibility to Journalism students.

The coronavirus pandemic presents serious health risks to journalists and the individuals they cover. This makes face-to-face reporting during the Fall ’20 semester a unique challenge. No assignment for this class will require that you report in person if you are not comfortable doing so.

If you do choose to report or conduct an interview in person, you must follow the Journalism Department’s updated safety guidelines, as well as the latest guidance from the Massachusetts Department of Public Health and/or other relevant local, state and federal guidance.

(Hypothetical) Schedule

The schedule below is a model of how the semester might progress, not a concrete set of dates and deadlines. For the latter look to Moodle. Each topic we delve into requires some mastery of the previous one—not a comprehensive proficiency, mind you, since some technologies we’ll only touch on, but a solid understanding of basic concepts, such that you can write markup and code without errors that will trip up the subsequent technologies we add to the mix. Each technology we learn how to add to a website won’t work unless the previous ones have been properly executed. My strategy for this course has always been to focus on students’ mastery of the basics of one set of tools before moving on to the next one.

Some semesters this takes longer than others, and we may get to more or less material depending on how fast we move as a class. We will move through the material at the pace necessary to keep the class on track. I will try to support students who are more (or less) advanced on an individual basis while keeping an eye on the overall progress of the group. Moreover, I will also prioritize the technologies—HTML, CSS, JavaScript, Bootstrap, WordPress—that are likely to be most useful to you in the future to ensure that wherever the course ultimately cuts off, you will have had exposure to a solid core of important skills and concepts.

Weeks 1–2: Foundational Ideas; Introduction to HTML and File Structures // August 24–September 6

In our first week, I’ll attempt to hold a live meeting to go over the syllabus and other preliminaries, but if the logistics of this prove untenable I will arrange for some form of orientation that allows us all to introduce ourselves and talk about the course. Our first unit will begin by discussing what HTML is, then diving into it. While you may have used basic HTML in the past to add links or emphasis to blog comments, for example, in this unit we’ll go over HTML more systematically. We’ll look at best practices for writing HTML and what constitutes a “valid” HTML document. We’ll also learn about file structures and the best way to link to files on a Web server.

Weeks 3–5: Introduction to CSS and the Document Object Model // September 7–27

Following our introduction to HTML, we’ll dive into CSS, short for “Cascading Style Sheets.” CSS is the language in which websites are styled. It’s the key to turning the boring, ugly HTML documents we’ve looked at thus far into beautiful webpages. While CSS can get complex, many of its most powerful applications are surprisingly simple. In this unit, we'll learn how to apply graphic design concepts to our webpages, changing the appearance of text and images, moving objects around within the browser window, and implementing a variety of different page layouts. Moreover, this unit will introduce you to the Document Object Model (DOM), a powerful way of conceptualizing the make-up of a webpage that will not only allow you to style it much more effectively, but lay the foundations we will build upon in future lessons on JavaScript and other technologies.

Last day to add or drop any class with no record // September 7

Weeks 6–7: Introduction to JavaScript and JavaScript Libraries (Case: jQuery) // September 28–October 11

Contemporary Web applications respond to our input instantaneously, which wasn’t always the case. Today we’re used to dropdown menus appearing seemingly from nowhere, slideshow images rotating, new comments popping up in our chat windows, and new messages appearing in our Gmail inboxes—all without ever hitting the “refresh” button on our browser. The technology that makes this possible is JavaScript.

We’ll start this unit by learning how to use some very basic JavaScript. These attempts will make it clear how powerful JavaScript can be, but they will also seem awkward and even clumsy at times. The amount of work it would take to go from the manipulations you learn initially to the beautiful Web interfaces you see online will probably seem herculean. Luckily, a lot of that work has been done for you in the form of “Javascript libraries.” These are collections of functions (code snippets), all written for you, that both dramatically simplify the syntax of JavaScript and allow you to create effects with it using a few simple commands that would otherwise take many lines of code. As an object lesson, I’ll introduce one of the most popular JavaScipt libraries, called jQuery, and we’ll explore a bit of what it can do.

Week 8: Grab-Bag: FTP, Server-Side Includes, Search and Social Media Optimization, Tinkering With Atom // October 12–18

As we’ve progress through the semester, there are a number of technologies that are essential or incredibly useful, but never quite seem to fit anywhere within the normal flow of the various units. By now, though, you’ll have gained the requisite skills to try them out and see how they’re useful, so I’ll step through them here.

First, while up until now your webpages have lived entirely on your own computer, we’ll now learn how to accomplish the vital task of actually putting them on the Web. This is accomplished by uploading your site's files to a Web server using something called FTP, short for File Transfer Protocol. (These days SFTP—Secure Shell File Transfer Protocol.—is actually preferred, but that we’ll have that discussion when we get to it.)

Second, once you’ve learned to put your website on server, I’ll also introduce a technology that the server allows us to use, called Server-Side Includes (SSIs). SSIs can save you a ton of work in designing and maintaining a website by making it simpler to edit parts of your site (navigation menus, for example) that recur across lots of different pages. SSIs will also be an introduction to a key idea in Web design, which is that the files that make up a site on the Web server can be different than the ones ultimately delivered to the user’s browser.

Third, now that you have a site live on the Web, I’ll show you how to add elements to your site that will help it play more nicely with search engines and make it more eye-catching when it’s shared on social media.

Fourth, and finally, I’ll introduce you to a clever text editor called Atom. Atom has some advanced features that can make your life easier as you build a website. It’s highly configurable, with lots of available plugins that can help you to customize the program to your personal needs and tastes. And it’s cross-platform, with versions available for Mac, Windows, and Linux machines. Atom can be confusing if you’ve never used a programming text editor before, but at this point in the semester you’ll have picked up enough Web design skills to get a more intuitive sense of how it works and why it’s useful. With a few tweaks, Atom is sometimes classified as an Integrated Dvelopment Environment, as it can serve as a drop-in replacement for a collection of programs you might otherwise have to run separately as you constructed a program or website. As such, our look at Atom will also serve as an introduction to a variety of Web development application that we haven't seen up until now.

Last day to Drop with ‘W’ and select ‘P/F’ // October 16

Week 9: Introduction to Bootstrap and Responsive Design // October 19–October 25

By now you’re probably getting a sense of how much work would go into producing a professional Web application. Getting a design or a feature working is labor-intensive by itself. Ensuring that it looks and works the same in all the major browsers is even trickier. Now imagine what it takes to ensure that a major site looks good and operates reliably on zillions of different devices and screen sizes—mobile phones, tablets, “phablets,” smart TVs of varying sizes—all running different browsers and some with different user interfaces. Once you finally got all of this working right, you probably wouldn’t want to have to do it all over again the next time you built a website. And, unsurprisingly, developers don’t reinvent the wheel each time they start a new project. Instead they turn to libraries like jQuery that contain a bunch or pre-existing code that’s already been tested on all sorts of browsers and devices.

But code libraries aren’t just for JavaScript. There are code libraries for pretty much every computer language. Some are extensive enough to be called “frameworks”—code libaries that provide much of the scaffolding for a completed project. This week we’ll look at a popular Web design framework, called Bootstrap, that provides lots of ready-made HTML, CSS, JavaScript code that designers and developers use to quickly spin up responsive Web designs. Bootstrap is simultaneously a good example of how the technologies we’ve learned so far fit together, a useful example of a Web design framework, and a marketable skill. In short, it’s a good tool to get acquainted with.

Week 10: Server Week: Demos of PHP and MySQL as Cases of a Server-Side Scripting Language and Database Management System // October 26–November 1

This week, we’ll switch gears with a quick overview tour of the technologies used to build the pieces of a Web application that run on the server, as opposed to in the browser. Unlike the previous technologies we’ve looked at—HTML, CSS, JavaScript, and examples of various libraries often used with them—I won’t expect you to actually learn to write any code using the technologies I show you this week. So, if this week looks bizarrely packed, it’s because it’s all show-and-tell with no excercises included. This is partly due to a combination of class priorities and time constraints—the class is focused on design and the technologies in these demos are less design-oriented than the ones on which we focus for the greater part of the semester. And it’s partly a security issue—any code that runs on a Web server can potentially create security risks and learning to deal effectively with these is beyond the scope of this class. If you’d like to learn more about the technologies I show you this week it could be a topic for a future independent study, but suffice it to say here that the intention of this unit is to give you a conceptual overview of the server-based elements of a Web application, not a crash course in programming and database management.

The particular technologies I will demonstrate here are examples of broader types of technologies used in Web design and development. To wit, PHP is an example of a server-side scripting language. These are programming languages that write or manipulate the content of HTML, CSS, and JavaScript files before they’re delivered to your browser. When you load a webpage that’s been personalized for you, it’s because a program—written in a server-side scripting language—is running on the Web server. That program modifies the HTML of the page before sending it to your browser. (In the case of contemporary Web applications, this is an oversimplification on a number of fronts, but one we’ll set straight later.)

Unlike the previous markup and programming languages we’ve learned—HTML, CSS, and JavaScript—which are more or less the only game in town when it comes to their respective uses, there many server-side scripting languages to choose from and their relative popularity shifts over time. While fewer new Web applications are being built using PHP, it has a number of advantages when it comes to demonstration purposes: 1) It’s still widely used and popular; 2) unlike with some other alternatives, nearly any Web hosting service you find yourself working with, including ours, will already be configured to run PHP code; and 3) many of the most common content management systems used by journalists, including WordPress, Drupal, and Joomla!, are written in PHP, which makes it a good language to teach in a journalism department.

I will also demo MySQL, an example of a “database management system.” These are tools for efficiently storing and retrieving data on a Web server, like blog posts, news stories, usernames, friend lists, etc. They work in conjunction with server-side scripting languages to deliver HTML to your browser that's been populated with recent or customized content (e.g., the latest news stories or posts from your friends). Like PHP, MySQL (and its cousin MariaDB) is a database management system that's very widespread and readily available on most hosting services. It’s also the most common database management system used with WordPress, which we’ll be learning shortly, which is another reason for it’s selection.

Lastly, I’ll demo how PHP and MySQL work together, and show you an example of asynchronous JavaScript, a setup where JavaScript is used by the browser to request new data from the server after a webpage has already loaded (again as a demo, not something you’ll need to build yourself).

Weeks 11–12: Working With Content Management Systems (Case: WordPress) // November 2–15

At this point in the class, we’ve covered all three tiers of a Web application. You could probably even write a simple one yourself, though for the reasons explained above I won’t be asking you to do so. Even if you won’t be building a Web application, though, you have the conceptual tools at this point to begin working with mature Web applications—installing them, theming them, and customizing them. The example we’ll be using to try out these new skills is the popular content management system, WordPress. In this unit we’ll install WordPress on a Web host and customize it using its administrative user interface, called the “dashboard.” Finally, we’ll look at how WordPress themes work and learn how to make changes to them that can’t be accomplished using the dashboard alone. This last part will require the skills you’ve picked up throughout the semester and will hopefully give you a new, more powerful relationship to a publishing tool you may have used in the past.

Week 13: Command-Line Interfaces // November 16–November 20

This last unit is just for fun. No assignments are associated with it. We’ll learn a bit about how to use a “terminal application,” like PuTTY, MobaXterm, Terminal, or iTerm2, to do Web development tasks. Using such programs is commonly known as working “on the command line.” We’ll learn to use the command line for basic tasks like editing documents on your server or backing up a website. By this time you should also begin thinking about the designs you’ll be implementing for your final project and bringing your questions to the attention of the class.

Final Project // Due Monday, November 30th at 11:59pm

For general information about the final, see above. Details on the final will be provided later in the semester.