Tips for Teaching your Web Programming Course

Avatar photo Dr. Frank McCown

Web programming is one of my favorite courses to teach. Having taught web programming to computer science (CS) undergraduates for more than 20 years, I have suggestions for instructors who are new to teaching web programming or wondering what to teach in their web courses.

Natural Division

The field of web development can be divided into two parts:

1. Front-end development focuses on the design and creation of web pages and user interfaces for web applications. Front-end technologies run in a web browser: HTML, CSS, and JavaScript.

2. Back-end development focuses on the infrastructure needed to make a website work, including business logic, data storage, and authentication. Back-end technologies run on the web server: server-side programming languages like PHP, Python, and Java that interact with a database.

Prerequisites for both are a good understanding of web servers and web browsers and how the two communicate using HTTP.

Because of this natural division, a common practice at many universities is to focus on the front end in one course and the back end in a second course.

Front-end Emphasis

A first course on web programming should focus on the front end. Possible topics include:

  • Understanding web fundamentals such as web browsers, web servers, URLs, DNS, and HTTP
  • Building web pages with HTML and CSS
  • Introducing accessibility
  • Creating responsive web pages for various screen sizes
  • Adding interactivity to web pages using JavaScript
  • Using CSS libraries such as Bootstrap and/or CSS preprocessors such as Sass 
  • Creating web forms and performing data validation with JavaScript
  • Creating web applications with React, Vue, or Angular
  • Fetching data from third-party web APIs with JavaScript
  • Implementing various tools like TypeScript, Babel, webpack, etc.

Teaching all the above topics in a single semester course is not possible, so an instructor should prioritize those topics that meet the department’s desired learning outcomes and focus on those topics that play to the instructor’s strengths and student interest.

Back-end Emphasis

A second course on web programming can focus on the back end. Possible topics include:

  • Configuring a web server
  • Creating dynamically produced web pages and/or web applications with:
    • PHP with perhaps a framework like Laravel 
    • Node.js with Express
    • ASP.NET with C# and Razor Pages
    • Python with a framework such as Django 
    • Java with a framework such as Spring
    • Ruby on Rails
  • Creating and interacting with RESTful web APIs
  • Implementing authentication
  • Integrating with relational databases using SQL and ORMs
  • Integrating with NoSQL databases like MongoDB and ODMs
  • Using web sockets
  • Using a technology stack like LAMP or MERN

Most instructors find it helpful to choose a programming language based on the students’ and/or instructor’s familiarity with the language. For example, students who have learned JavaScript in the first web programming course can continue using JavaScript when using Node.js and Express to build web applications and web APIs. Introducing students to a new language is beneficial in expanding a student’s skills and experience, but more time must be spent learning the language.

Single Course

Some departments may be unable to offer two web programming courses, so a single web programming course may cover both the front end and the back end. Such a course will need to focus on the bare essentials, including:

  • Understanding web fundamentals such as web browsers, web servers, URLs, DNS, and HTTP
  • Building web pages with HTML and CSS
  • Adding interactivity to web pages using JavaScript
  • Creating a web API with PHP, ASP.NET, Node.js, Java, or Python
  • Integrating the web API with a relational or NoSQL database
  • Posting and fetching data to and from the web API with JavaScript

More time might be allocated to the front end by providing a lot of scaffolding for the back end. For example, an instructor might provide all the necessary web API code to access hard-coded data and have students write only the code necessary to connect the API to a database. Covering React might be possible if more back-end scaffolding is provided.

Even a two-course sequence can benefit from mixing front- and back-end technologies in both courses. My university offers a two-course sequence with some back-end programming in the first course and front-end programming in the second course.

Identify your Audience

The content of the web programming course will depend on the students’ incoming skill set. If students have familiarity with programming concepts, a front-end web programming course can spend less time teaching JavaScript and more time applying it. If incoming students have no programming experience, the course might spend more time teaching JavaScript or significantly limit the students’ exposure to JavaScript. 

Prerequisites like Networking and Databases for a back-end web programming course allow students to gain familiarity with back-end technologies quicker at the expense of lowering the number of students eligible to take the course. Back-end programming involves more programming than front-end programming, so programming prerequisites are more common for back-end courses.

Assignments

Giving frequent auto-graded assignments provides students with lots of practice and immediate feedback. Instructors benefit from having more time to help students and prepare for class. 

However, instructors might also consider larger projects that students can personalize. For example, allowing students to develop a website focusing on a personal hobby can give students intrinsic motivation to learn more. Working with larger projects mimics the complexities of real-world projects. Working in small teams and presenting their projects to classmates foster the soft skills that employers are looking for.

Classroom Engagement

Web programming is a skill that instructors can model to their students. A great way to spend class is typing code along with students and then giving students time in class to work on short exercises individually or in pairs. 

Instructors and students can also benefit from in-class polling questions that verify students have a good understanding of material from a previous class or material just presented. Polling questions can also serve as examples of questions that students might see on formal assessments such as exams.

Having students read and/or watch a video lecture before class, known as the “flipped” model, allows more class time for programming, polling, and engaging students.

Teaching Web Programming with zyBooks

Teaching with the Web Programming zyBook has been a joy. The online book covers many of the front-end and back-end topics mentioned above with minimal text, engaging animations, interactive programming exercises, and learning questions that my students appreciate. 

Here is how I use the book:

  • Before the semester begins, I arrange the zyBook content into chapters to match the course modules in my CMS. I also create zyBook assignments that automatically transfer student activity directly to my CMS. 
  • Students read two to four assigned sections and complete Participation Activities and in-book programming exercises before coming to class. This ensures that students are at least somewhat familiar with the topics I want to cover in class.
  • Students complete Challenge Activities, small auto-graded assignments, that I assign for homework after covering all topics in class. These are randomized and give students lots of practice opportunities.
  • Students complete zyLabs, larger auto-graded assignments, at the end of each module. In the past, students had to use their own text editor and upload their answers for grading, but newer zyLabs have a built-in IDE that allows students to enter and run their code within the lab. The labs spin up a remote web server that can run Node, PHP, React, and other project types. I can assign labs that come with the zyBook or create my own.
  • Exams are composed partly of questions that come with the zyBook.

I hope you’ll find these tips helpful. Feel free to reach out to me at fmccown@harding.edu.

Avatar photo
Author Bio

Dr. Frank McCown

Dr. Frank McCown is a professor of computer science at Harding University in Searcy, Arkansas, where he regularly teaches web, mobile, and desktop application programming. He is a two-time winner of Harding's Teacher Achievement Award. Frank is also a senior content developer at zyBooks and the primary author of Web Programming.