Skip to content

Jan 21: Introduction

Learning Objectives

After today's class, you should be able to:

  • Explain the role of HTML, CSS, and JavaScript in web application development.
  • Use developer tools to preview the mobile version of a website with throttling.
  • Identify strengths an areas of improvement for a website from the community.

Lesson Outline

Welcome Back [10 min]

Course Website [15 min]

  • About the course, instructor, syllabus, calendar, etc.
  • Question: what is one thing you are excited about?

Mini Lecture [10 min]

Pair Activity [40 min]

  • Critique the Web
  • Demo of DevTools

Critique the Web

In this activity, you will critique a website of your choice.

Site List

  1. Massanutten Regional Library
  2. Magpie Diner
  3. Riner Rentals (or any property manager in town)
  4. On the Road Collaborative
  5. Harrisonburg Electric Company
  6. Cuban Burger
  7. Bella Luna
  8. Taste of India
  9. Next Level Martial Arts
  10. Friendly City Food Coop
  11. Harrisonburg Farmer's Market
  12. Any instructor at JMU who has a website

Part 1: Review

  1. Identify a partner.
  2. Each of you select a website from the list above.
  3. Open any editor you would like for taking notes. (Ex: VS Code, Word, Google Docs)
  4. Work quietly, individually for about five minutes to draft a critique of the website you chose. Include at least these details:
    1. What is the URL of the website you chose?
    2. Tell about the site's visual style. What is pleasing to look at and interact with? What isn't pleasing? Be opinionated.
    3. Tell about the site's usability. Is anything broken? How are the pages organized? How does one navigate between pages?
  5. Take turns with your partner each sharing your critiques.
  6. Augment your critique with anything that comes to mind from discussing with your partner, or by adopting elements you thought were interesting from their critique.

Part 2: DevTools

  1. Install Firefox if you don't have it already. We will use Firefox for this course. You can have some other browser too, like Chrome or Safari. But you need to use Firefox for the labs, project, etc.

  2. Here's a short video that introduces the browser's developer tools. You will need these features for the last parts of your critique.

  3. Augment your critique with the following:

    1. Compare the site between desktop and mobile browsers. How do the experiences compare?
    2. Open your browser's developer tools and reload the page with network throttling on. (If needed, search the web for how to do this.) How will visitors with low-speed internet fare?

Part 3: Present

Be ready to share your critiques with the rest of the class. As time permits, we will discuss your critiques today and Thursday.