Web Design for Journalists

Course Objectives

Course Format

Web design is a set of skills in which practice makes perfect. With that in mind, eac you’ll have assignments to hand in somewhat frequently this term. 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, class periods will take a number of forms. Some classes, or in some cases the beginning portion of a class, will be clinics where you bring your questions about the assignment(s) you’re working on and about the concepts we’ve been learning more generally. Your attendance is required—if you aced the assignment and don’t have questions yourself, you should use this time to help answer other students’ questions. Design and development are skills that are best learned as part of a community. In the event that no one has questions, the clinic portion of the class may be spent on in-class exercises, which may or may not be graded at the professor’s discretion.

At other times, the class will be a lecture on new material, which you’ll use in upcoming assignments. This portion of the class won’t generally be a traditional lecture, but will frequently contain questions and exercises to help you learn the new concepts. So come prepared to participate.

Role of the Professor

Course Materials

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

A UMassCreate Account. UMass subscribes to a Web hosting service that is free for use by students and faculty. The program, UMass Create, is administered by the library and they will set up an account for you once the semester has started at https://umasscreate.net.

A Laptop or Desktop Computer. You may use the lab computers in the Journalism Department and across campus for your assignments, however since we’re working out of a classroom rather than a computer lab this semester, you will need your own laptop or desktop computer on which to follow along with the lectures and do your in-class 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 own a laptop, note that the university library has them available for checkout. Note, too, 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. If none of these options work for you, please reach out to me and I will do my best to help you navigate the situation.

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 something that's approachable for new users. This semester, Kate will be the officially supported text editor for this class. In the past I've used other editors, specific to Mac or Windows, but students have understandably expressed their desire for a cross-platform solution. Kate works on Windows, MacOS, and Linux. It's got plenty of features that advanced developers will appreciate, but at the same time it's quite approachable for beginners — all of which means that anything you learn to do with it will serve you well into the future. As an added bonus, it's free, so you won't have to pay anything to use it.

If you still want to check out alternatives to Kate, Mac users can look into BBEdit (use the “Free Download” button; the software works without being purchased and you don’t need to pay for the premium version). TextMate is another cool editor for Mac users to check out. Windows users can take a look at 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 Geany. Later in the class, we‘ll spend some time with a very cool cross-platform editor called VS Code that, like Kate, is available for MacOS, Windows, and Linux. Another cross-platform editor—simple to use, but sometimes buggy—is JEdit, which also works on Mac, Windows, and Linux.

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, meaning you probably won’t have easy access to one or the other. 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. You can do this by visiting a campus computer lab or—if you’re particularly intrepid—tinkering with the university’s “virtual desktop” tools. 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

Zoom

In the event that any of our class sessions must be conducted remotely, we’ll make use of Zoom. Additionally, if you need to troubleshoot an assignment or ask a question about your code outside of normal class time or office hours, I may be able to help you remotely via Zoom.

Non-Required Software

Teams Native Apps

In recent semesters I’ve been experimenting with using the collaboration tool Microsoft Teams as an additional method of course communication. Teams—Microsoft’s clone of Slack that the university pays for—works in your browser, of course, but there are also native apps available for all the major computer and mobile operating systems.

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. It is, however, available via most campus computer labs, including those in the Journalism Department. 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.

Integrated Development Environments (IDEs)

Free IDEs like VSCode, 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, or just type “Terminal” into a Spotlight search.) 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 and PowerShell. 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.

Azure Virtual Desktop Native App

Azure Virtual Desktop (AVD) is an application that will, in effect, allow you to log into a Windows PC on campus and use it from your own computer. If you’re a Mac or Linux user and want to test your site on Microsoft’s Edge web browser from the comfort of your home, as opposed to borrowing a friend’s laptop or tracking down a Windows PC in a campus computer lab, then you can experiment with AVD. During remote instruction, the university used AVD to make a number of other software tools, like Adobe Photoshop, available to students. It’s possible that you may still be able to access Photoshop and other such programs in this way, depending on whether the university has sunsetted the licenses it purchased for remote instruction.

Course Requirements

Who Should Take This Class?

The class is technically restricted to UMass Journalism majors. That said, 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—during class, over Teams, and by email and video chat (though, as I discuss further down, I strongly urge you to ask questions via the course Teams channel first). 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

Attendance

Yes, you get credit for showing up; I suggest you take advantage of this. 😀 Having said that, I also recognize that the COVID era warrants a departure from my attendance policies from the “before times”. You may miss up to two classes for any reason without penalty. I am willing to excuse absences beyond these, given the myriad challenges that the coronavirus has brought, from acute illness to long COVID to the need to quarantine, cope with family crises, deal with economic distress, and attend to our mental health. Plus, the new normal has not put a halt to the many life obstacles that can arise during an ordinary semester.

I realize that all of these things can be sensitive topics, so I won’t require you to discuss them in detail with me or provide me with formal documentation. I ask only two things: First, wherever possible, please make an effort to contact me in advance if you expect to be absent from class. Second, commit to the class in good faith. If you use a generous attendance policy to rationalize never showing up, you will fall behind in the course.

If you have a standing conflict that you believe will cause you to miss all or part of class on a regular basis, I suggest finding another course or re-enrolling in a future semester.

Teams Workspace Participation

Canvas is not the main site for this course; it will be used strictly to circulate course grades and occasional email announcements. Our main course site will be this page linked to from this syllabus, which I’ll typically refer to simply as “the course website.”

Answers to questions about assignments and other help will be given through the course Teams workspace, which will contain channels where you can ask questions, discuss assignments, post helpful information, and chat about other course-related topics.

You must contribute a comment to the Teams workspace at least once 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 to the course material. More instructions on logging into the Teams workspace, and receiving notifications on discussion activity will be given in class. When asking code-related questions through Teams, you may find it useful to share the markup you’re referencing through a free pastebin site like PrivateBin or HasteBin, which make it simple to save and link to snippets of code. Teams itself also includes features that allow you to include code snippets in your posts. I will go over these in class.

I will monitor and respond to questions on the Teams workspace 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 Teams where everyone can see them (since your questions will often be shared by others) and learn from the responses they generate.

In-Class Exercises

From time to time, you may be given exercises to complete in class. The idea here is to build on your existing knowledge while ideas are fresh in your head, and to give you a chance to ask questions as you learn. In-class exercises may or may not be graded at my discretion.

Homework

Homework assignments are relatively small assignments that will develop your skills. You’ll have one week to complete most homework assignments. The deadline for homework assignments is the end of the clinic portion of the class on the day they are due. This will give you an opportunity to ask lingering questions. However, you should not plan on completing your entire assignment during the clinic portion of the class. Come having tried the assignment in advance and completed as much of it as you are able. If you have questions during the week, you should ask them via the course website.

Optional Practice Work

Cementing your skills in, and understanding of, the technologies discussed in this class frequently relies on opportunities to practice working with them. In the past, it's always been tricky to balance giving out the number of assignments that would be beneficial to students as practice with my actual ability to grade it all. This semester, my plan to alleviate this tension somewhat is to give out additional assignments that present you with opportunities to pracice your skills, but that will not factor into your course grade. These are optional for you to complete, but taking a crack at them may help you to better understand the course material. I will not be grading these, but I'm happy to answer questions about them and help you with them if you decide to do them. If you're having trouble with a particular skill during the semester, I may also point you to some of these practice assignments as a way to build up your experience with it.

Projects

Projects are larger assignments aimed at allowing you to stretch and develop your skills. 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 assignment description.

Final Project

For your final, you will work individually or in small groups (your choice) 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 the final project will be Monday, May 13th 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.

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

Attendance

This is a reiteration, for ease of reference, of the attendance requirement discussed above. Yes, you get credit for showing up; I suggest you take advantage of this. 😀 Having said that, I also recognize that the COVID era warrants a departure from my typical attendance policies. You may miss up to two classes for any reason without penalty. I am willing to excuse absences beyond these, given the myriad challenges that the coronavirus has brought, from acute illness to long COVID to the need to quarantine, cope with family crises, deal with economic distress, and attend to our mental health. Plus, the new normal has not put a halt to the many life obstacles that can arise during an ordinary semester.

I realize that all of these things can be sensitive topics, so I won’t require you to discuss them in detail with me or provide me with formal documentation. I ask only two things: First, wherever possible, please make an effort to contact me in advance if you expect to be absent from class. Second, commit to the class in good faith. If you use a generous attendance policy to rationalize never showing up, you will fall behind in the course.

If you have a standing conflict that you believe will cause you to miss all or part of class on a regular basis, I suggest finding another course or re-enrolling in a future semester.

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.

I do think deadlines are important, as they help keep everyone on the same page over the course of the semester and check everyone’s natural impulse to let work pile up, which can end up being more stressful in the end. My intent is to manage a fair amount of deadline pressure by adjusting the pace of the overall course to meet folks where they are in terms of both their grasp of the material and capacity to engage with the class.

Still, if at any point you believe your individual circumstances warrant an extension or other accommodations, please do let me know. I’m more than happy to be flexible and to work with you to ensure you do well in the course.

Respectful Use of Electronic Devices

Except where explicitly permitted by the professor (such as during a class exercise on mobile Web design), phones, tablets, and other personal electronic devices must be put away—e.g., in a bag or pocket—at all times during class. On the exceedingly rare occasion that you find it absolutely essential to open a message or take a phone call (e.g., a family emergency, a call from a prospective employer, etc.), please respectfully leave the classroom to do so. Abusing this policy by exiting the classroom frequently or for extended periods will count against your attendance grade.

Laptops and classroom computers should be used for participating in class activities only. If, during a class exercise or the clinic portion of the class, you have completed your work before your peers, your next move should be to help classmates with questions. If I am not lecturing, you are finished with any in-class work, and none of your peers has a question with which you can help, then and only then may you use your laptop or classroom computer for non-class activities. And only in a way that is respectful to your peers

Academic Honesty

Since the integrity of the academic enterprise of any institution of higher education requires honesty in scholarship and research, academic honesty is required of all students at the University of Massachusetts Amherst. Academic dishonesty is prohibited in all programs of the University. Academic dishonesty includes but is not limited to: cheating, fabrication, plagiarism, and facilitating dishonesty. Appropriate sanctions may be imposed on any student who has committed an act of academic dishonesty. Instructors should take reasonable steps to address academic misconduct. Any person who has reason to believe that a student has committed academic dishonesty should bring such information to the attention of the appropriate course instructor as soon as possible. Instances of academic dishonesty not related to a specific course should be brought to the attention of the appropriate department Head or Chair. Since students are expected to be familiar with this policy and the commonly accepted standards of academic integrity, ignorance of such standards is not normally sufficient evidence of lack of intent <https://www.umass.edu/dean_students/codeofconduct/acadhonesty/>.

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

Policy on Generative AI Tools

With the caveats below, you should assume that the use of ChatGPT and other generative AI tools are not allowed in this course. I may, at my discretion, allow their use on some assignments and exercises. I will set the policy for their use (or disallowal) on a per-assignment basis. Here I want to outline the philosophy behind my decision-making so that you can understand and follow the spirit in which I making these rules.

Because you are learning to code in a number of languages at the introductory level, some generative AI tools can do a capable job of writing the sort of code used in class assignments. As you can imagine, this means that they can be helpful to your learning in some ways and detrimental in others. The phrase from the academic honesty policy above — “I will regard the use of any borrowed code or markup that provides a complete or nearly-complete solution to an assignment as cheating” — should give you a fair idea of where I’m going with this. In short, using an AI tool to complete your work for you does not help you to learn the foundational concepts behind an assignment. It wastes your time as well as mine and deprives your peers of learning opportunities as well — any time I spend reviewing machine-generated code is time I can’t dedicate to providing meaningful feedback to other students who took the time to work through the assignment in good faith. Our class also learns as a community, helping one another, and if you’re not engaging with the assignment your peers also lose out on potentially helpful conversations they might otherwise have had with you about the material.

As someone who spent his graduate career studying questions pertaining to ethics and technology in society, I’m not naïve with respect to the arguments in favor of new technologies that automate tasks, including conceptual ones. I can see the case for considering the use of ChatGPT and its cousins as analogous to using a calculator while doing math. At the same time, there are plenty of times in math courses where the use of a calculator is not allowed — specifically when you’re initially learning or practicing a new concept. The students in a math class who go on to be engineers will no doubt advance to courses and careers in which they use calculators and specialized software to spit out the answers to similar problems. But the reason they can do this confidently is because they understand the underlying concepts, having sat with them and worked through them by hand earlier on. This is where I’m coming from when I restrict the use of generative AI tools on class assignments.

Having said all this, I do see some benefits to selectively encouraging you to use these tools at times — and I will be explicit as to when these times are. To wit, one way that people get better at coding is by having lots of examples to reference. And ChatGPT can quickly generate plenty of example code, including — when asked — code with small errors of the sort that you need to learn to spot. I may encourage you to use it in such ways over the course of the semester while hewing to the rule that the tool should not be used to create ready-made assignment solutions.

In this spirit, let's continue to talk about the use of generative AI in coding over the course of the semester — where it’s helpful at different levels of proficiency, the ethical considerations around it, and how best to use it in an educational context, such that it aids your learning rather than getting in the way of it.

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 Policies

We will abide by all university, college, and departmental COVID-19 policies in this course. The most recent policies can be found on the university’s Public Health Promotion Center website. Masks are welcome in class, though not required. Students who require a medical accommodation in relation to the university’s COVID policies should visit the Disability Services website for more information.

If you are experiencing any COVID symptoms or have tested positive for COVID, you should not attend any classes. Individuals who test positive for COVID-19 should isolate for a minimum of five days before returning to class, work or attending events. They should then continue to wear a mask for an additional five days.

If you experience disruptions to your learning and academic experience due to COVID, 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 adviser.

Lastly, I am a parent of two school-aged children who may be subject to COVID-related isolation routines. In such cases, or in the event that I myself need to isolate, we may conduct the course remotely or asynchronously as required, and in accordance with university policies. If any of these eventualities occurs, I will disseminate relevant instructions at that time.

Accommodation Statement

The University of Massachusetts Amherst is committed to providing an equal educational opportunity for all students. If you have a documented physical, psychological, or learning disability on file with Disability Services (DS), you may be eligible for reasonable academic accommodations to help you succeed in this course. If you have a documented disability that requires an accommodation, please notify me within the first two weeks of the semester so that we may make appropriate arrangements. For further information, please visit Disability Services <https://www.umass.edu/disability/>.

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.

Title IX Statement

In accordance with Title IX of the Education Amendments of 1972 that prohibits gender-based discrimination in educational settings that receive federal funds, the University of Massachusetts Amherst is committed to providing a safe learning environment for all students, free from all forms of discrimination, including sexual assault, sexual harassment, domestic violence, dating violence, stalking, and retaliation. This includes interactions in person or online through digital platforms and social media. Title IX also protects against discrimination on the basis of pregnancy, childbirth, false pregnancy, miscarriage, abortion, or related conditions, including recovery. There are resources here on campus to support you. A summary of the available Title IX resources (confidential and non-confidential) can be found at the following link: <https://www.umass.edu/titleix/resources>. You do not need to make a formal report to access them. If you need immediate support, you are not alone. Free and confidential support is available 24 hours a day / 7 days a week / 365 days a year at the SASA Hotline 413-545-0800.

UMass Land Acknowledgement

The University of Massachusetts Amherst acknowledges that it was founded and built on the unceded homelands of the Pocumtuc Nation on the land of the Norrwutuck community.

We begin with gratitude for nearby waters and lands, including the Kwinitekw — the southern portion of what’s now called the Connecticut River. We recognize these lands and waters as important Relations with which we are all interconnected and depend on to sustain life and wellbeing.

The Norrwutuck community was one of many Pocumtuc Indian towns, including the Tribal seat at Pocumtuc (in present day Deerfield), Agawam (Springfield), and Woronoco (Westfield) to name just a few. The Pocumtuc, who had connections with these lands for millennia, are part of a vast expanse of Algonqiuan relations. Over 400 years of colonization, Pocumtuc Peoples were displaced. Many joined their Algonquian relatives to the east, south, west and north — extant communities of Wampanoag, including Aquinnah, Herring Pond, and Mashpee, Massachusetts; the Nipmuc with a reservation at Grafton/Hassanamisco, Massachusetts; the Narragansett in Kingstown, Rhode Island; Schagticoke, Mohegan and Pequot Peoples in Connecticut; the Abenaki and other Nations of the Wabanaki Confederacy extending northward into Canada; and the Stockbridge Munsee Mohican of New York and Massachusetts, who were removed to Wisconsin in the 19th century. Over hundreds of years of removal, members of Southern New England Tribes would make the journey home to tend important places and renew their connections to their ancestral lands. Such care and connection to land and waters continues to the present day.

Today, Indigenous Nations in southern New England continue to employ diverse strategies to resist ongoing colonization, genocide, and erasure begun by the English, French, Dutch, Portuguese and other European Nations, and that continued when Tribal homelands became part of the United States. Native Americans from Tribal Nations across the U.S. and Indigenous peoples from around the world also travel into these Pocumtuc homelands to live and work. This land has always been and always will be, Native Land.

We also acknowledge that the University of Massachusetts Amherst is a Land Grant University. As part of the Morrill Land Grant Act of 1862, Tribal lands from 82 Native Nations west of the Mississippi were sold to provide the resources to found and build this university.

This Land Acknowledgement is the first step in the university's commitment to practice intellectual humility whilst working with Tribal Nations toward a better shared future on Turtle Island. We aim to foster understanding, deep respect, and honor for sovereign Tribal Nations; to develop relationships of reciprocity; and to be inclusive of Native perspectives and thriving Native Nations far into the future. Members of Massachusetts-based Tribal Nations who are kin to the historic Pocumtuc contributed their insights in composing this acknowledgement — namely Tribal representatives from Mashpee, Aquinnah, and Stockbridge Munsee. As an active first step toward decolonization, we encourage you to learn more about the Indigenous peoples on whose homelands UMass Amherst now resides on and the Indigenous homelands on which you live and work.

(Hypothetical) Schedule

Weeks 1–2: Foundational Ideas; Introduction to HTML and File Structures // February 5–18

In our opening weeks, we’ll go over the syllabus, as well as other preliminaries, and get to know each other a bit. 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.

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

Weeks 3–5: Introduction to CSS and the Document Object Model // February 21–March 10 (No Class February 19 [Presidents’ Day]; University on a Monday Schedule February 22)

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.

Weeks 6–7: Introduction to JavaScript and JavaScript Libraries (Case: jQuery) // March 11–31 (Spans the Break)

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. (Note: jQuery still runs on 75\% of websites that use JavaScript and has a low barrier to entry for beginners, but it's also getting a bit long in the tooth. So I may also demo a newer JavaScript library like React or Stimulus.)

Spring Break // March 16–24

Week 8: Grab-Bag: FTP, Server-Side Includes, Search and Social Media Optimization, Tinkering With VS Code // April 1–7

As we 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 the term FTP is still common parlance. We’ll have that discussion when we get to it.)

Second, once you’ve learned to put your website on a 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 VS Code. It 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. VS Code 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, VS Code 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 VS Code 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’ // April 4

Week 9: Introduction to Bootstrap and Responsive Design // April 8–14 (University on a Monday Schedule on April 12)

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 // April 17–21 (No Class on April 15 [Patriot’s Day Holiday])

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.

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) // April 22–May 5

At this point in the class, we’ve covered all three tiers of a Web application. You could probably — with a bit of additional study — 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 / Wrap-Up // May 6–10

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 be implementing your final project and bringing your questions to class.

Final Project // Due Monday, May 13 at 11:59pm

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