Syllabus

Howard University

Web Development   89150   MJFC 315-06
5:10-7:30pm Thurs Rm 254

COURSE OVERVIEW

Merely using digital tools is no longer enough for today’s media professionals. Journalists and media professionals need to have a strong foundational and practical understanding of how websites are built and how to troubleshoot when problems arise. This class does not aim to make you full-time web developers (though maybe you’ll want to be afterward!) or require any previous site-building experience, but we do want you to come away with some coding skills and greater technical fluency. You’ll also be able to collaborate more effectively with web developers and to continue learning on your own.

Students will learn about the various areas of web development and the fundamental technologies used to code and design web pages by learning the essentials of HTML, CSS, JavaScript/jQuery and PHP. Students will set up and customize their own self-hosted website using WordPress. Readings, hands-on demonstrations, self-learning tutorials and assignments will be the basis for instruction.

COURSE OBJECTIVES

By the end of the semester, students should be able to:

  • Identify the fundamental concepts and technologies underpinning modern web development, what role they play and how they work together
  • Develop, deploy and maintain a dynamic website
  • Use online tutorials and technical documentation to improve their web development skills
  • Synthesize technical knowledge to communicate technical ideas to people in non-technical roles and non-technical ideas to people in technical roles

REQUIRED READING

There is no required textbook for this course. Instead, the instructor will assign selected readings throughout the semester. Students will be expected to read materials before class, write an analysis post each week and discuss in class.

EQUIPMENT/SOFTWARE

Required:

Access to a computer (preferably a laptop) where you can install free software programs**:

For the final project, you must also purchase (if you don’t already have) later in the semester:

  • A domain (e.g. your name if it’s a portfolio site)
  • Web hosting (e.g. basic tier with FTP access and the ability to manually install software)

Free accounts are required for:

  • GitHub
  • Codecademy
    • Note: You are not required to get a paid account or do the projects.

**Notes on required software:

  • These three programs must be downloaded and installed before the first class to be sure you can hit the ground running.
  • If you have problems installing that you can’t resolve by searching online for a reasonable amount of time, please contact the instructor as soon as possible.
  • After you install them, you don’t have to start using them before class begins, but you’re encouraged to explore what they do and why we’ll be using them.
  • Important: Don’t change any MAMP or XAMPP settings unless instructed.

 

CLASSROOM ETIQUETTE, CLASS PARTICIPATION AND OTHER GUIDELINES

All mobile devices must be silenced before class starts.

Students are expected to complete all the readings, learning assignments and analysis posts before each class so they’re ready to learn new concepts and to apply skills to the hands-on work in class. The analysis posts are always due before the next class to allow everyone to read each other’s posts and to allow the instructor to adjust the next class session accordingly.

Whether you’re using a lab computer or a personal laptop, computers in class will only be used for coursework. Your full focus and attention are required for this class. It is easy to miss important ideas or not fully grasp concepts if you are distracted. We’re going to cover lots of technical topics during long class periods, so you don’t want to miss anything.

Email is the primary means of communication outside of class for any questions. Other communications should be arranged by email. If you have issues setting up the software we’ll be using, try to troubleshoot on your own at first, but also don’t wait until the last minute to contact the instructor in case you need assistance. For coding issues, figuring out why something doesn’t work — and how to fix it —  is a key concept of the class. You should reasonably exhaust all options for finding a solution (Google, StackOverflow, online tutorials and blog posts) before asking for help from a peer or the instructor.

Class participation is an integral part of this class and accounts for 10 percent of your grade. That includes showing up and participating in class discussions, sharing your thoughts on the weekly assignments and contributing thoughtful insights to the conversation. Engage in the class! You will get more out of it and so will your peers.

Class discussions should be respectful and considerate of others’ views and opinions. Everyone should feel comfortable asking questions and sharing their thoughts freely.

ASSIGNMENTS

*** NOTE: Unless otherwise specified (e.g. analysis posts), all assignments are due Tuesday by 11 p.m. before the next class.

Late work will result in one full letter grade lower for each day after the deadline. If you have an emergency and will miss a deadline, you must request an extension from the instructor as soon as possible. If the request is approved, a new deadline will be given.

Self-learning: Read texts, watch videos or complete tutorials as assigned. For Codecademy lessons, you are required to email the instructor a screenshot of the “syllabus” view of the relevant course(s) and lesson(s) by the deadline. Due: Tuesdays by 11 p.m.

Analysis/update posts (~300-400 words): For assigned readings and self-learning, share your thoughts on the readings/lessons and highlight what you found most interesting or had questions about on the course blog. These posts should be a mix of analysis/synthesis to show your understanding of the material as well as like a journal of your progress (here’s what I did, here’s what I’m going to do, here’s what hurdles exist, here’s how I solved a problem, etc.). These are usually due one day after the assignment so you have time to reflect on what you learned. Points will be deducted for failing to include the proper week tag (e.g. week1, week2, etc. with no space) and/or for failing to select “Instructor” under “Notifications.” Due: Wednesdays by 11 p.m., unless otherwise specified

Midterm: Project explainer or developer profile (~800 words): Pick a project related to your course of study to deconstruct what, how and why it was built, plus lessons learned or what it might mean in the larger context of the field. Alternatively, you may profile a developer working in media or – perhaps more interestingly – outside of media whose work might be relevant. The project should not be something you worked on and the developer should not be a friend. Be sure they know this will be published publicly on the class site when you contact them. Due: Tuesday, Oct. 2 by 11 p.m.

Development environments: Having local and production (live) development environments are essential to your final project. You need to set up a local environment for testing on your computer and a production environment on a hosting service for the public-facing site. The local environment will use MAMP for Mac or XAMPP for Windows. The production version will use a hosting account (~$8/month) and the domain (~$10/year) you’ve purchased. For the hosting, you must be able to install one WordPress site manually, use FTP and create one MySQL database. Sunday, Oct. 14 by 11 p.m.

Final project site: Create a customized project using the WordPress site created for the production environment. This will be preceded by a project pitch detailing your plans, including what customizations and features you’ll be adding.  For example, you might do some combination of creating a child theme, building a new plugin, using an API, etc. Pitch due: Tuesday, Oct 9 by 11 p.m. Project due: Tuesday, Nov. 13 by 11 p.m.

Final project critiques: Evaluate your peers’ project sites with constructive feedback. This are due soon after the demos so everyone has a chance to incorporate feedback over the weekend. Due: Friday, Nov. 16 at 11 p.m.

Surveys: Fill out this survey before the first session (http://bit.ly/webdevfall2018) and any others sent out during the course based on specified deadlines. These surveys will help the instructor know where everyone stands and if any adjustments in content or pacing are needed.

GRADING

Your course grade will be based on the following:

In-class participation/surveys: 10%

Self-directed learning/code assignments/Codecademy: 15%

Analysis/update posts: 15%

Midterm – Project explainer or developer profile: 15%

Development environments: 5%

Final project site: 30%

Final project critiques: 10%

Total: 100%

 

SYLLABUS MODIFICATION

The syllabus may change to accommodate discussion of emerging topics. Also, the schedules of guest speakers may require some shifting of our agenda. The instructor will make every effort to provide as much advance notice as possible for any alterations. Please always check the course site syllabus for the latest information: http://webdevclass.greglinch.com/syllabus

CLASS SCHEDULE

Pre-course assignments

  • Required: Write analysis post that includes why the ideas in the readings matter, what you found most interesting and your main takeaways from topics discussed. Also, email your GitHub profile link to the instructor. Due Tuesday, Aug. 21 by 11 p.m.

Week 1 – Aug. 23

Overview of class and how the web works

  • Overview of the class
  • Review of survey results
  • Discussion of pre-course reading materials
  • How does the Internet work? How does the web work? What’s the difference?
    • Internet protocols
    • Client-server model
    • What are front-end, back-end, full-stack?
  • Overview of tools we’ll use

Assignments for week 1

Week 2 – Aug. 30

Browser and front-end basics

  • View source/Inspect element
  • Document-Object Model (DOM)
  • HTML review
  • CSS overview
  • Responsive web design discussion
  • Git and GitHub discussion

Assignments for week 2

  • Complete: Codecademy Learn CSS course lesson 1 and Make a website course lesson 2
    • “Setup and Selectors,” “Visual Rules,” and “A Closer Look at CSS”
    • Send screenshot of completed and expanded “syllabus” view to instructor by email showing 100% for the required lessons
  • Read: How to inspect styles
  • Read: W3 Schools – Responsive web design from “RWD Intro” through “RWD Videos”
    • familiarize yourself with with the the concepts — you don’t need to memorize this
  • Read: Getting your project on GitHub
    • familiarize yourself with with the the concepts — you don’t need to memorize this
  • Create a prototype homepage (e.g. for a personal site) using HTML and CSS
  • Add your prototype homepage to GitHub using the desktop app
    • Email repo link to instructor
  • Analysis/update post

Week 3 – Sept. 6

Scripting basics

  • CSS review
  • The DOM revisited
  • Client-side scripting vs server-side scripting
  • Intro to programming concepts with JavaScript

Assignments for week 3

  • Complete: Codecademy Learn JavaScript course lessons 1-5
    • Send screenshot of completed and expanded “syllabus” view to instructor by email
  • Work on midterm: Developer profile or technical project explainer
  • Analysis/update post

Week 4 – Monday, Sept. 10 or Tuesday, Sept. 11 (TBA)

Scripting revisited

  • Review JavaScript
  • Intro to jQuery

Assignments for week 4

  • Complete: Codecademy jQuery course lessons 1-4
    • Send screenshot of completed and expanded “syllabus” view to instructor by email
  • Work on midterm: Developer profile or technical project explainer
  • Analysis/update post

Week 5 – Sept. 20

Scripting continued

  • Review jQuery
  • Questions about and continue work on gallery assignment

Assignments for week 5

  • Complete: Gallery assignment
    • Create a gallery using HTML and jQuery, then use CSS to add styles
    • Include captions that also change with each photo
    • Add to GitHub and send repo link to instructor. Due: Sept. 25 by 11 p.m.
  • Work on midterm: Developer profile or technical project explainer
  • Analysis/update post
    • Include a brief pitch/preview of your midterm (the person or the project) and how you found them

Week 6 – Sept. 27

Databases, servers, different code environments

  • Intro to server-side scripting
  • Intro to databases for web applications
  • Intro to web servers and server stack

Assignments for week 6

  • Complete: Midterm: Developer profile or technical project explainer. Due: Tuesday, Oct. 2 by 11 p.m.
  • Analysis/update post

Week 7 – Oct. 4

Diving into WordPress development, part 1

  • Explanation of development, staging and production environments
  • Intro to WordPress
  • Intro to PHP
  • Intro to WordPress themes and plugins

Assignments for week 7

  • Complete: Learn PHP “learn the basics”
    • Send a full screenshot of each lesson — and be sure to include the “code” and “output” windows — to instructor by email
  • Pitch post: what your site will be conceptually (personal, portfolio, niche interest, side business, etc), why you choose this and who the audience is (tag: final-pitch, separate from analysis post). Due: Oct 9 by 11 p.m.
  • Bring your laptop to class on Oct. 11 for local development environment setup
  • Analysis/update post about learning PHP and more about WordPress

Week 8 – Oct. 11

Diving into WordPress development, part 2

  • How to set up self-hosted WordPress on your local machine and hosting service
  • Codex/documentation  overview
  • Themes, child themes and plugins explained
  • Post formats, custom post types, custom fields explained — oh, my!

Assignments for week 8

  • Complete: Finish setting up local and production development environments. Due Sunday, Oct. 14 by 11 p.m.
  • Read WordPress documentation entry excerpts to better understand customization options. Focus on fundamentals, key concepts and general steps.
  • Update pitch post: finish the pitch post you started by including what track you’re planning to do (front-end, back-end, full-stack) and what customizations you’ll include. View 2013 class pitch posts to see the required format and details. Due Tuesday, Oct. 16 by 11 p.m.
  • Add PHP to the old HTML homepage you created. Due Tuesday, Oct. 16 by 11 p.m.
  • Analysis/update post

Week 9 – Oct. 18

Project management and ethics

  • What is agile? What is waterfall?
  • What is user-centered design?
  • How to manage technical projects
  • Steps/checklist
  • Using GitHub for projects
    • Issues
    • Pull requests
    • readme/wikis

Assignments for week 9

Week 10 – Oct. 25

Final project questions, how to use FTP and guest speaker

  • Discuss projects and what customizations everyone is planning
  • How to update your live site using FTP
  • Guest speaker TBA
  • Project questions? Ask them!

Assignments for week 10

Week 11 – Nov. 1

APIs and final project workshop

  • Discuss APIs
  • Work on your final projects
  • Ask the instructor questions
  • Ask your peers questions

Assignments for week 11

  • Work on final project: Due Tuesday, Nov. 13 by 11 p.m.
  • Analysis/update post

Week 12 – Nov. 8

Final project Q&A and intro to command line

  • Intro to command line (CLI)
  • Final project updates and Q&A

Assignments for week 12

  • Work on final project: Due Tuesday, Nov. 13 by 11 p.m.
  • Analysis/update post

Week 13 – Nov. 15

Final project demos

  • Share projects
  • Take notes for feedback to provide as GitHub issues and, when necessary, anonymous
  • Discussion

Assignments for week 13

  • Write a critique with constructive feedback for each site and send to instructor by Friday, Nov. 16 by 11 p.m. for anything you’re not comfortable adding as a GitHub issue. The instructor will then compile the critiques, remove names and send by Friday night.
  • Make adjustments to your project based on feedback over the weekend. Send update message to instructor when initial changes (e.g. errors, bugs) are finished/fixed by Tuesday, Nov. 20 by 11 p.m.
  • Analysis/update post reflecting on final project and big-picture class thoughts and feedback by Tuesday, Nov. 27 at 11 p.m.

Week 14 – Nov. 29

Leveling up your skills and guest speaker

  • An overview of other web dev tools and what they are best used for
  • Guest speaker TBA

Assignment for week 14

  • “What’s next?” post: You’ve heard more about what more there is to learn, besides diving deeper into what we’ve started using in class. Now it’s time to create a plan for advancing your skills after the class. Devise a self-learning plan to use after the course ends, including goals and timetable, then post it to the class blog (tag: whats-next) Due: Sunday, Dec. 2 by 11 p.m.

Leave a Reply