An Introduction to Web Programming and Development

Learn how to bring together HTML, CSS, and JavaScript to create web pages

An Introduction to Web Development


  1. Introduction to HTML
  2. URLs and Links
  3. The Codio Editor
  4. CSS
  5. Chrome Developer Tools
  6. Classes and IDs
  7. Margins, Padding, and the Box Model
  8. Floats and Layouts
  9. An Introduction to JavaScript in the Browser
  10. Accessing and Modifying Content with JavaScript
  11. An Introduction to jQuery
  12. JavaScript and HTML Forms
  13. Build a Music Player


Interested in evaluating An Introduction to Web Development for your class? Sign up for a Free Instructor Account to access and customize this Codio Resource for free!

Build Something Meaningful

The Introduction to Web Development culminates with a project to build a music player. Students can upload their own music and images for the player. They can also use their web development skills to personalize their music player.

Constructing Knowledge Through Coding

An Introduction to Web Development emphasizes students applying and exploring the information presented. Students are presented with a code editor so they can put into action each concept they learn. In addition, the content provides code snippets to get students started.

Beyond a Simple Introduction

This content provides a well-rounded introduction to the core concepts of web development. It also goes beyond the basics by presenting students with lessons on how to developer tools in the browser to help debug their code, using the jQuery library to increase their productivity, and how to use web forms.

Lowering the Barrier to Entry

An Introduction to Web Development reflects the need for computer science education to meet students where they are. Like any specialized community, computer science has its own jargon. The formal teaching of computer science should not burden students with the assumption that they are fluent in this special language. The lessons assume no prior experience with coding, provides boilerplate code so students can focus on the lesson, and introduces how to use the Codio platform.

Take a peek inside...

  • Images help call out important details
    Example code snippets that can be copied
  • Full IDE in the same browser window
  • Interactive output
  • Run code with a click of the button

Ready To Get Started?

Try our code plagiarism checker with a free Codio Instructor Account to start taking advantage of our coding course resources!!