Create Projects Courses Learn About
Reverse Engineer the Web

Reverse Engineer the Web is a short course that teaches you how to build simple web pages and apps. It begins from the simplest possible start — plain HTML à la 1993 — and builds up to include CSS and JavaScript so that students can experience a quick tour of Web History from a technical standpoint.

Notes and recommendations:

  • This course consists of 6 Jippity projects that span a range of web development techniques.
  • No programming experience is required for this course, though experienced students will be able to expand on projects to make them fancier.
  • Have students fork each project at the start of class and follow along with the code and notes. They can edit the projects as will, and should, to add their own style and new features.
  • Project 5 is a bit different than the others. It requires a teacher to run server code on their own machine so that students can connect to a simple chatbot as clients. All other projects run right in the browser (the Jippity editor) as-is.
  • Finish the course with independent projects: students will have the skills and information to build their own custom websites after working through the six projects.
HTML
HTML
undefined

An introduction to the basics of HTML.

Notes:

  • The notes for this project are in the web page itself.
  • Students and teachers should have no trouble editing the page. Go for it!
  • Ask Jippity for help if something goes wrong, like if a tag gets deleted or mismatched.

Goals:

  • Check out the basics of HTML — how text is shown on screen and how tags can influence the behavior of text and images.
  • Learn about some of the most important tags, like div, p, and a.
  • Preview styling with CSS.

Activities:

  • Read through the code that makes the project's web page and observe which text is visible and which (tags) is not.
  • Edit some text.
  • Edit or add some new tags to alter the layout and style of the page.
  • If students are feeling comfortable, have them make new web pages from scratch. Keep it simple!
CSS
CSS
undefined

Beautify your HTML with CSS.

Notes:

  • This project consists of two files: and HTML file as before, and a new CSS file that styles the HTML.
  • Once again, the class notes are the HTML content of the page itself. Those can be edited and students can add their own content at will.
  • This time, form is more important than content. Students should style and arrange the web page according to their visual tastes.

Goals:

  • Check out the connection between HTML and CSS. See how they "talk" to each other either via separate files or inline styling.
  • Learn how to make a webpage look less boring than the HTML default.

Activities:

  • Adjust fonts and colors using inline CSS as well as the style.css file.
  • Control the layout and positioning of text and/or images. Wrap some content in a div then style that div with CSS and describe where and how it should appear. Rows? Columns? Boxes? Fixed or flexible sizing?
  • Animate something, like a button.
JavaScript I: Dynamic Web Pages
JavaScript I
undefined

Use JavaScript to bring a web page to life.

Notes:

  • This project may represent a step up in difficulty for students who have never programmed. You can keep the programming light by having students make only small edits, but don't be afraid to rely on the Jippity AI! The comments in script.js include a link to a playlist about the basics of programming on Jippity as well.
  • You may also choose to survey the existing project then have students build their own custom projects from scratch, requiring dynamic elements in JavaScript. Again, make use of Jippity, which excels at writing boilerplate JavaScript based on simple descriptions.

Goals:

  • Check out how JavaScript (a new language and hence type of file) can create dynamic web page elements — that is, elements that respond to user input.
  • See how JavaScript communicates with HTML by identifying elements by ID.
  • Show that JavaScript can create HTML elements too, which students may prefer if they want to work only in JavaScript.
  • Get a sense of the geometry of image manipulation.

Activities:

  • Adjust the ranges of the sliders, or add new sliders/buttons altogether.
  • Add some click/drag functionality to the image manipulation.
  • Display multiple images at once.
  • Confident students may make their own webpages from scratch. At that point, they can go wild with any idea at all — JavaScript has no limits!
JavaScript II: Libraries and APIs
CSS
undefined

Use a library's API so that you don't have to reinvent the wheel.

Notes:

  • Jippity projects include p5.js by default. This project additionally includes howler.js for audio playback and also makes a call to the Open-Meteo weather API within the JavaScript file.
  • The two audio files in this project exist in the Assets menu. Students can upload new assets their to use with this project.

Goals:

  • Load in a library and call it using its API.
  • Wrap basic functions of the library in your own code, so that the style and idea is your own but the library does some heavy lifting in the background.
  • Check out a bit of documentation and/or ask Jippity to help explain how to make use of a library — form good coding habits!

Activities:

  • Add new cities to the weather list.
  • Add richer responsive visual feedback to the weather app.
  • Play different sound files in the audio app.
  • Process the audio files differently — alter speed, volume, or other properties using JavaScript code (and Howler's capabilities).
  • Find another library you want to use, load it in, and work with its API to add more to this app.
Client-Server Chatbot
CSS
undefined

Setup a secret chatbot just for the class.

Notes:

  • This project requires more setup than the others. The Jippity project runs client.js, which allows users to connect to a server and chat with each other. A teacher needs to run the server for this to work. The code for the server is in server.js in the Jippity editor. Copy the contents of that file to a local file on your computer called server.js (best saved in its own folder). Run the server however you choose — we recommend using node.js, which you have to download if you haven't before. If node is installed, all you have to do is:
    • Open a Terminal window.
    • Navigate to the location of server.js using cd commands.
    • Run npm install express ws once to install WebSocket functionality.
      • Run node server.js. (Subsequently you can skip npm install express ws.)
  • Once the server is running, students will be able to run the Jippity project (running client.js) as normal and connect to the server with the password — jippity by default.
  • IMPORTANT NOTE: in client.js, replace const serverIp with the IP address of the computer running the server. Do this before students fork the project or they'll all have to edit it manually.
  • Ask Jippity to help or reach out to [email protected] for assistance should you need it.

Goals:

  • Understand the ubiquitous client-server computing relationship.
  • Connect, as a client, to a server, knowing what information has to be passed where. Send messages over the server that other clients can read.

Activities:

  • Chat as a class!
  • Customize clients — each client can look and feel different as long as it communicates with the server properly.
  • Walk through the server code and understand potential security vulnerabilities. Think about examples from other client-server relationships on the Web.
A Tour of History
CSS
undefined

The history of the World Wide Web.

Notes:

  • As a break from the hardcore computing of Project 5, this Project has no code — just lecture notes meant to prompt discussion.

Goals:

  • Learn about the early history of the Internet and how it developed into what it is now.
  • Consider the ethics and the economics of the Web across its history and into its future.

Activities:

  • Think through and discuss the technical landmarks and big decisions that shaped the Web.
  • Check out some sites from the past — try to find websites that have not been updated in a long time and observe how different they are in style and function from sites of today.
  • Make some predictions about where the Web might go in the future. Discuss positive and negative outcomes with respect to accessibiltiy, privacy, economics, ethics, and aesthetics.