Intro to Web Apps for Communicators

JOU 3363 | Fall 2020

Both sections are online only for fall 2020.
Tuesday period 6 (12:50–1:40 p.m.) ← this is a required Zoom meeting every week
Section 15282 (07D7) Tuesday night lab: periods 11–E2 (6:15–9:10 p.m.)
Section 15283 (191C) Wednesday lab: periods 4–6 (10:40 a.m.–1:40 p.m.)
See below for an explanation of the labs and requirements for attendance.

Instructor: Mindy McAdams, Professor, Department of Journalism

Email: mmcadams@ufl.edu
Office: 3049 Weimer Hall
Office hours: By appointment (see my schedule here)
Workshop: Friday 1–4 p.m.
Office phone: (352) 392-8456 (NOTE: Email is better. Much better.)
Website: https://ufl.instructure.com/courses/406244
Slack: https://introtowebapps.slack.com/ (invite needed to join; check your UF email)

Course Description
Introduces web markup, coding, and programming for journalism and communications students with no
prior coding experience. Explore media-industry best practices for front-end web development, problem
solving and algorithmic thinking, and recent examples of interactives and apps from media
organizations.

Prerequisites: Any JOU, ADV, PUR or TEL major, or instructor permission

Course Objectives
At the end of the course, students should be able to:

1. Name, list and use common HTML and CSS syntax and structures to create stand-alone web and
mobile apps that are standards-compliant.
2. Use GitHub to set up and collaborate on web and mobile projects.
3. Apply algorithmic thinking to analyze a problem and construct a solution.
4. Name, list and use common JavaScript syntax and structures.
5. Create interactive quiz applications using JavaScript and HTML forms.
6. Create interactive charts and graphs using Highcharts and JavaScript.
7. Create interactive maps using Leaflet and JavaScript.
8. Create interactive image displays and menus using vanilla JavaScript.
9. Use and adapt a web framework to create fully responsive apps that work across a variety of
devices.

Intro to Web Apps syllabus / McAdams 1

Attendance and Attitude in Lecture and Labs
There will be ONE required synchronous meeting every week. This meeting (in Zoom) is Tuesday period
6 (12:50–1:40 p.m.), and we will probably use the entire 50 minutes. Attendance will be taken, and your
camera needs to be on. Your attendance will count toward your course grade. See the section “Course
Requirements and Grading Policies” below for how the grade is calculated.

For the Zoom meeting, students must be sitting up (not lying down) and dressed as if this were a regular
classroom meeting. Show respect for one another and for the instructor by arriving before the class
starting time. Use the “hand raised” feature in Zoom to ask a question.

The Zoom chat feature will be disabled. This is because I want you to do all chatting in Slack, even during
Zoom. Slack has a free phone app, so you can use your phone for this. Slack also has a free desktop app,
or you can run it in your web browser. The Slack chats will be available even after our Zoom session
ends, so if I miss your question during class, I can answer it afterward. Also, you don’t need to speak on
camera if you don’t want to.

Do not check text messages, social media, email, etc., during class, as your instructor considers this quite
rude and therefore grounds for disciplinary action. Moreover, you will miss things if you’re checking
your phone. Give your full and undivided attention to anyone who is speaking in class, including your
fellow students. Another student might ask a question that will help you, if you are listening.

In a normal semester, lab attendance is also required and counts toward your course grade. Typically
students get a lot of hands-on, one-on-one help during lab and workshop hours. Skipping lab hours can
really drag down your grades on assignments. The reason is that students in this course often kid
themselves about how long the weekly assignment will take — and then run into trouble and can’t finish
the work, which results in a 0 because they miss the deadline. I don’t want that to happen to you! The
idea of required lab attendance is to make sure you have spent this three-hour lab period working on
the assignment.

However, requiring three hours of lab attendance is not practical when we are online only.

Note that early assignments likely will not take you three hours, but by about week 5, most assignments
will take three hours or more to finish (for most students). These weekly assignments are 50% of your
course grade. They are the main work in the course and the main form of learning.

How Lab Times Will Be Handled in Fall 2020

I will set several different time slots each week when I will be online to help you with the weekly
assignment. I am going to keep a record of who interacts during these time slots. If your assignment
grades are poor two weeks in a row, I'm going to require you (on an individual basis) to be online during
at least one of these time slots. Not doing so will be factored into your grade for the course (see the
section “Course Requirements and Grading Policies” below for how the grade is calculated). Note,
however, that interacting will be optional if your assignment grades are fine (80% or better).

Assignments are always due Friday at 11:59 p.m. All deadlines are in Canvas.

Intro to Web Apps syllabus / McAdams 2

Initially we will use these four time slots:

• Tuesday periods 11–E2 (6:15–9:10 p.m.) — lab, 3 hours

• Wednesday periods 4–6 (10:40 a.m.–1:40 p.m.) — lab, 3 hours
• Thursday periods 6–7 (12:50–2:45 p.m.) — workshop, 2 hours
• Friday periods 6–7 (12:50–2:45 p.m.) — workshop, 2 hours

For information about illnesses, religious obligations, or other absences that might be excused, see:

UF Attendance Policies
> https://catalog.ufl.edu/UGRD/academic-regulations/attendance-policies/

Course Deadlines and Makeup Work

Late assignments are not accepted unless an emergency can be documented. This means that an
assignment submitted late is graded as a zero. Assignments are not accepted via email unless requested
by the instructor. If an illness or a personal emergency prevents you from completing an assignment on
time, advance notice and written documentation are required. If advance notice is not possible because
of a genuine emergency, written documentation will be required. No work for “extra credit” is accepted.

NOTE: Assignment deadlines in Canvas are usually set for 11:59 p.m. If you submit after the deadline,
your assignment is late. Your inability to upload at the last minute is NOT a valid excuse for lateness.

Academic Dishonesty
Academic dishonesty of any kind is not tolerated in this course. It will be reported to the student’s
department chair AND to the university’s Dean of Students—and it will result in a failing grade for this
course. A formal report of the offense will be filed with the university’s Dean of Students.

Academic dishonesty includes, but is not limited to:

§ Using any work done by another person and submitting it for a class assignment.
§ Submitting work you did for another class or course.
§ Copying and pasting code written by another person in place of solving the assigned problem on
your own. (Note: In some cases an assignment will instruct you to use code written by others.
Those cases are exempt.)
§ Sharing code written by you with another student. You may talk about their incomplete code,
but do not show them your completed code or allow them to copy your code.

For details about violations of the honor code, see:

UF Student Honor Code

> https://sccr.dso.ufl.edu/policies/student-honor-code-student-conduct-code/

Intro to Web Apps syllabus / McAdams 3

Required Book, Videos and More
Students are required to read many assigned chapters in this book:

Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics
(5th edition), by Jennifer Niederst Robbins (O’Reilly, 2018)

All students are expected to possess their own copy of the book, whether printed or electronic. Quiz
questions are taken from the book. Students will need to use the book to complete most assignments
successfully. Note that the 4th edition is NOT an acceptable substitute. Much has changed since 2012,
when that edition was published.

Videos that supplement and explain the assigned readings are here:

> http://bit.ly/web-apps-vids ← complete list, all videos

> http://bit.ly/web-apps-playlists ← playlists for each week/module

The videos are NOT an adequate substitute for the book. Watching the videos should make concepts
and skills in the assigned reading clearer. Students are expected to complete the assigned reading and
watch the videos for the week BEFORE class meets that week. Videos for each week are listed and linked
in the Canvas module for that week.

Web hosting
Students must acquire full-service web hosting and a personal domain name. The recommended
provider is Reclaim Hosting. Your professor receives no kickbacks or other deals from Reclaim. Shared
hosting costs $30/year and includes registration for one domain. Domains must be renewed yearly or
they will expire.

> https://reclaimhosting.com/

Laptop
All students in this course must own a laptop that is not shared with anyone else. Managing files and
folders is part of the workflow you will be learning, and using your own computer is key. A tablet will
NOT be sufficient for this course. Any operating system is okay, but Mac OSX is strongly preferred. For
assistance with your operating system or hardware, or with UF wifi, please use the UF Computing Help
Desk (https://helpdesk.ufl.edu/) if you cannot solve a problem.

The Flipped Classroom and Your Success

This course normally operates on the “flipped classroom” model, in which we spend most of our face-to-
face time doing work (you work, and I answer your questions).

Obviously, we won’t have face-to-face time when the course is wholly online. The flipped classroom still
serves as our model for learning, however.

What about the lectures? Are you being cheated out of your lectures?

Intro to Web Apps syllabus / McAdams 4

No, you’re not missing anything. The course videos cover what I would have done in person in the old
model of “Teacher talks, students listen.” In the videos, I have covered most of what I would have done
in face-to-face lectures — which, in this course, largely concerns teaching you how to think about and
work with code.

I feel strongly that learning code practices from videos is much better than trying to learn them “live,”
because each of us has a different attention span for this kind of material. Sometimes you grasp a
concept by seeing it once, but in other cases you’ll watch a video multiple times before you really get it.
Many students are able to watch many of the videos at 2x speed. I speak rather slowly in the videos.

You can’t really binge these videos. Take breaks. And take notes! It helps a lot.

The videos are directly tied to the assigned readings, but they do not cover everything that is in the
readings. Some students will get more out of the book, and others will get more out of the videos, but
the expectation is that every student will use BOTH the book AND the videos to learn the material
necessary to do well on the quizzes and assignments.

There are also video walkthroughs for the early assignments.

Many students find they learn better if they watch some of the videos more than once.

It is your responsibility to watch the videos before lab, so that you are prepared to begin work on that
week’s assignment during lab, while an instructor is available to answer your questions.

Lecture, Lab and Workshop Hours

The lecture is for an overview of the week’s work and objectives, your questions about the week’s
readings and videos, and reporting/resolution of any problems that have come up.

The lab is for you to work on and possibly complete your assignment for the week. To be prepared to
work on the assignment, you need to have FINISHED reading the assigned readings and watching the
assigned videos. Lab is when you can get live, hands-on help with the assignment.

Workshop hours are the other designated times when I’m online to help you, in Slack and Zoom.

Here’s how I would plan my coursework for the week if I were a student in this course:

1. Read book and watch videos during the weekend and on Monday (before the quiz deadline).
2. Come to lecture on Tuesday and ask questions about anything that’s not clear.
3. Before coming to lab, read the week’s assignment and then review any videos I might not have
understood. Make sure I’ve finished all the prep I need to do the assignment.
4. Plan to spend the entire three-hour lab working on the assignment. Aim to finish it during lab, if
possible.
5. If I finish the assignment during lab, I can start on next week’s readings and videos before the
weekend.
6. If I can’t finish the assignment during the lab, come to workshop hours for more help.

Intro to Web Apps syllabus / McAdams 5

Course Requirements and Grading Policies
Read this entire document (the syllabus) in the first week of classes. If anything is not clear to you, ask
me for clarification before the last day of Drop/Add (Sept. 4, 2020). This syllabus is a contract between
you and me.

Please make sure to check the relevant Canvas module early in the week. Plan your work accordingly so
you have enough time to absorb the material. All your deadlines are in Canvas.

Quizzes
There will be at least one quiz every week. Quizzes are in Canvas and are always open-book. Quizzes
cover the assigned readings for the coming week. These are always listed in precise detail in the
module’s “Assigned readings” document in Canvas. Deadlines are in Canvas. Any quiz not submitted by
the deadline is graded 0.

If you think a quiz question was marked as wrong in error, screenshot it and email it to me. Do not ask
me about these in Slack.

Assignments
There will be one assignment every week. Assignments are provided in Canvas along with exact
deadlines. Each assignment is likely to require a substantial time commitment from the student. For
assignments after the first few weeks, it is very likely you will need more time than the three lab hours.
All students are strongly encouraged to come to the workshop hours for help with the week’s
assignment if they have not finished it by that time. Any assignment not submitted by the deadline is
graded 0.

Final project
In the final weeks of the course, you will create an interactive web app. A personal online portfolio is
NOT permitted as a project. The project must include JavaScript in a meaningful way (not just for the
sake of having it there). The app must be of interest to a defined audience. It must work well on mobile
(small screens). It must allow users to make choices (not just clicking links). The topic is your choice.

Professionalism
When choosing subject matter for your later assignments and the final project, keep in mind that these
projects could be included in your professional portfolio. For that reason, I strongly encourage you to
avoid unprofessional topics such as “my summer vacation” and “my favorite foods.” You should choose
topics that interest you — but they should also be of interest to others.

Attendance and participation

There are 20 possible points, which constitute 10 percent of your final course grade. Everyone starts
with 20 points. It’s up to you whether you lose any points. Participation is expected. Absences due to
illness, serious family emergencies, special curricular requirements, etc., will be handled in accordance
with UF attendance policies, to which you will find a link on page 3 of this syllabus.

Intro to Web Apps syllabus / McAdams 6

 • Attendance points:
o Attendance will be taken for all lecture Zoom meetings except the first one, Sept. 1
(during Drop/Add). There should be 13 of these (barring unforeseen circumstances).
o Attendance will be taken for two lab Zoom meetings at the end of the semester, when
students make presentations about their final projects. Your attendance is required for
both of these, so that you can see all presentations by the students in your lab section.
o The total of Zoom meeting attendances is therefore 15.
o You may miss one of the lecture meetings without penalty (1 free point).
• Participation points:
o I expect to interact with you during this course as you ask questions about the work.
There are 5 points in play here. See page 2 under “Attendance and Attitude in Lecture
and Labs” — if I require you to show up for lab or workshop hours and you fail to do so,
1 of these points will be subtracted for each week you don’t show up.
• Arriving late, leaving early, turning off your video for more than 5 minutes, failing to respond
when I ask you a question (during the 15 meetings):
o If you have been marked for any of these 3 times: –1 point (out of 5 for participation)
o If you have been marked for any of these 6 times: –2 points (out of 5 for participation)
o Etc. That is, you could lose all 5 points for these behaviors. Three offenses equal 1 point
deducted.
• You can’t lose more than 5 points for lack of participation.

Enforcement of these attendance policies will, it is hoped, inspire you to take your lecture, lab and
workshop opportunities seriously.

Grades
Quizzes 30 percent
Assignments 50 percent
Final project 10 percent
Attendance and participation 10 percent
TOTAL 100 percent

92–100 points A 72–77 points C

90–91 points A– 70–71 points C–
88–89 points B+ 68–69 points D+
82–87 points B 62–67 points D
80–81 points B– 60–61 points D–
78–79 points C+ 59 points or fewer E

UF Policies about Student Grades

> https://catalog.ufl.edu/UGRD/academic-regulations/grades-grading-policies/

Intro to Web Apps syllabus / McAdams 7

UF Dates (Fall 2020)
Classes begin Aug. 31 Sept. 7 Labor Day
Drop/Add Aug. 31–Sept. 4 Oct. 2–3 Homecoming
Classes end Dec. 9 Nov. 11 Veterans Day
Final exams Dec. 12–18 Nov. 25–28 Thanksgiving

Students with Disabilities

Students requesting accommodations must first register with the Dean of Students Office. The Dean of
Students Office will provide documentation to the student, who must then provide this documentation
to the instructor when requesting accommodations. Accommodations must be discussed in private, not
in the classroom or during class, lab or workshop hours.

UF Disability Resource Center

> https://disability.ufl.edu

Course Evaluations
Students are expected to provide feedback on the quality of instruction in this course.

• Guidance on how to give feedback: https://gatorevals.aa.ufl.edu/students/

• Students will be notified when the evaluation period opens and can complete evaluations
through the email from GatorEvals, in their Canvas course menu under GatorEvals, or via:
https://ufl.bluera.com/ufl/
• Summaries of course evaluation results are available here:
https://gatorevals.aa.ufl.edu/public-results/

Course Workload
One credit hour is defined by the U.S. Department of Education as “one hour of classroom or direct
faculty instruction and a minimum of two hours of out-of-class student work each week for
approximately fifteen weeks for one semester.” It is entirely reasonable for a three-credit university
course to require students to spend six to nine hours outside of class each week working on
assignments, reading, etc. Elective courses — particularly professional electives, such as this one — are
not expected to require less time and might in fact require more time, as these electives are extending
your knowledge beyond the basics taught in required courses.

For this course, you may consider the lecture and videos as “classroom or direct faculty instruction”
(3 hours per week) and the lab, readings, quizzes and assignments as out-of-class student work (6 to 9
hours per week).

Intro to Web Apps syllabus / McAdams 8

Course Schedule and Required Work
Please note that many important details are in Canvas and do not appear herein. Assigned readings,
links to videos, resources, etc., are in Canvas. Quizzes due every Monday are based on the assigned
readings in that same week.

Week 1 | Aug. 31–Sept. 5

Introduction to the course. Tools, technologies and outcomes. Recommended text editor programs.
Module 1
Syllabus quiz
Flipboard assignment (required)

Week 2 | Sept. 6–12

Roles of HTML, CSS, JavaScript. web browsers, client/server, request/response.
Introduction to HTML: Structure, markup, images.
Module 2
Quiz 1 due Monday (Sept. 7)
Assignment 1 due Friday (Sept. 11) This Monday and Friday pattern continues every week.

Week 3 | Sept. 13–19

HTML part 2: Text markup, lists, links, images. Block vs. inline elements.
Module 3, Quiz 2, Assignment 2

Week 4 | Sept. 20–26

Introduction to CSS: Overview, selectors, colors, backgrounds, pseudo-classes.
Introduction to GitHub.
Module 4, Quiz 3, Assignment 3

Week 5 | Sept. 27–Oct. 3

CSS part 2: Margins, padding, borders, box model, box-sizing, flexbox.
Module 5, Quiz 4, Assignment 4

Week 6 | Oct. 4–10

Introduction to CSS grid. Web fonts, including Google fonts. Em, rem and percentages.
Handling typography. Introduction to responsive design.
Module 6, Quiz 5, Assignment 5

Week 7 | Oct. 11–17

Introduction to JavaScript. Using the JavaScript console. Variables, numbers and strings, Booleans and
logic operators, data types, basic math, if-statements, arrays.
Introduction to Repl.it.
Module 7, Quiz 6, Assignment 6

Intro to Web Apps syllabus / McAdams 9

Week 8 | Oct. 18–24
JavaScript part 2: Loops, functions (parameters and returns), scope of variables. Algorithmic thinking,
problem breakdowns, pseudo code. Using JavaScript to write and rewrite HTML dynamically.
Introduction to jsFiddle.
Module 8, Quiz 7, Assignment 7

Week 9 | Oct. 25–31

JavaScript part 3: Objects. Working with JavaScript libraries.
Introduction to Highcharts for data presentation (graphs and charts).
Module 9, Quiz 8, Assignment 8

Week 10 | Nov. 1–7

HTML forms. Design and layout for forms and quizzes. Using JavaScript with forms.
Introduction to Bootstrap, a web framework.
Module 10, Quiz 9, Assignment 9

Week 11 | Nov. 8–14

JavaScript part 4: Understanding the DOM; handling events.
Introduction to web hosting (set up your domain at Reclaim Hosting).
Information about your final project.
Module 11, Quiz 10, Assignment 10

Week 12 | Nov. 15–21

More JavaScript events.
HTML 5 audio and video embeds, formats.
Module 12, Quiz 11, Assignment 11
Project proposals are due Sunday, Nov. 15.

Week 13 | Nov. 22–28

Thursday is Thanksgiving. Lecture will not meet.
No quiz. No assignment. No labs. No workshop hours.

Week 14 | Nov. 29–Dec. 5

Introduction to Leaflet, another JavaScript library. Interactive maps for storytelling.
Module 13, Quiz 12, Assignment 12
Students will give project presentations during lab hours Tuesday and Wednesday.
These lab hours are required. You will attend the lab for your section.

Week 15 | Dec. 6–9

Lecture: Accessibility (a11y) and current best practices.
No quiz. Project work in lab. Lab and workshop hours as usual.
Students will give project presentations during lab hours Tuesday and Wednesday.
These lab hours are required. You will attend the lab for your section.

Intro to Web Apps syllabus / McAdams 10

All projects are due on Monday, Dec. 14, at 11:59 p.m. This is the Monday of finals week.

Please note that Dec. 8 and 9 are a normal class meeting days. If you are not present in Zoom for
lecture, it will count as an absence. Lab attendance is also required this week.

Weekly topics are subject to change. Please check in Canvas for the latest updates.

A Note about Office Hours

Normally I would schedule two or three hours each week during which you could expect me to be in my
office, and you could just drop in without an appointment. This semester I think it will work better for
me to be more flexible about my availability, but naturally I cannot meet you (in Zoom, or in Slack) at
any old time you feel like it.

The link below provides a grid that shows my schedule. All white cells in the grid are open for
appointments. Please give me 24 hours to respond to your request, and please send your request in
email, not in Slack.

https://docs.google.com/spreadsheets/d/1coH020Bvzs0-
GXV2dQP1B7zUUE2ma0DBRC0iXr24FRY/edit?usp=sharing

During all times marked in the grid as LAB HOURS or WORKSHOP HOURS, I will be online in Slack and
available to help you. If necessary, we can go to Zoom for screen-sharing.

How to Communicate with Me, Your Instructor

For private communications, regarding your grades, accommodations for disability, etc., please use
email.

• Email directly in our Canvas course is great.

• Email me outside Canvas at mmcadams@ufl.edu — also fine.

For questions about any assignment, you should use our class Slack, in the #assignments channel.
Someone else might have already asked the same question! It might already have an answer there!

For interaction during lab or workshop hours, please use Slack first. We can go to Zoom if necessary, but
none of us want to be in Zoom for two or three hours, so Slack is our way to interact easily. You can
private-message anyone in our Slack by finding their name in the bottom left list (desktop app or web).
The heading is “Direct messages.” These are private — I can’t see messages between you and another
student if you DM.

Make sure to read all Announcements posted in Canvas. I will use the Announcements to remind you
about deadlines or any changes in class meetings, assignments, etc.

Intro to Web Apps syllabus / McAdams 11

Diversity, Equity & Inclusion
The Department of Journalism in the College of Journalism and Communications embraces a
commitment toward an intellectual community enriched and enhanced by diversity along a number of
dimensions, including race, ethnicity and national origins, gender and gender identity, sexuality, class
and religion. We expect each of our journalism courses to help foster an understanding of the diversity
of peoples and cultures and of the significance and impact of mass communications in a global society.

• If you have a name and/or set of pronouns that differ from those that appear in your official
records, and you want me to know this, please tell me.
• If something was said (or written) in class — by anyone, including me — that made you feel
uncomfortable, please talk to me about it.
• If you feel that your performance in the class is being affected by your experiences outside of
class, please don’t hesitate to tell me. I want to be a resource for you, and I’m open to discussing
anything that’s standing in the way of your success.
• If you would rather speak with someone outside of the course — Joanna Hernandez, the CJC
director of inclusion and diversity, is an excellent resource. You can email her at:
jhernandez@jou.ufl.edu

Every student and every person deserves respect and fair treatment. I expect all students to show
respect toward others and treat them fairly, and I always try to do so. If I fall short, you should let me
know.

Your Privacy and Zoom Recordings

Our class sessions may be audio-visually recorded for later viewing by enrolled students who are unable
to attend live. If the Zoom session is being recorded, you will be able to see that as a red “recording” dot
beside the instructor’s name in the participants list. Students who participate with their camera engaged
or utilize a profile image are agreeing to have their video or image recorded. If you are unwilling to
consent to have your profile or video image recorded, and the session is being recorded, you may keep
your camera off and/or not use a profile image. If the session is being recorded, students who un-mute
during class and participate orally thereby agree to have their voices recorded. If you are not willing to
consent to have your voice recorded during a class that is being recorded, you will need to keep your
mute button activated.

As in all UF courses, unauthorized recording and unauthorized sharing of recorded materials is

prohibited.

Intro to Web Apps syllabus / McAdams 12