Interactive Web
by Celeste Layne

Sequence: Interactive Web

ivan sutherland
Photo: Ivan Sutherland invented Sketchpad, the ancestor of modern computer-aided design (CAD) programs, in 1962 while at MIT.

Sequence Summary:

This sequence is an introductory guide to modern web design and development. It covers the foundational, front-end languages HTML, CSS and JavaScript as a tool for creating interactive content for the web.

Why?

The web is an integral part of our everyday lives – Amazon Echo Show, Google Nest, Zoom, FaceTime, Slack, Netflix, Apple Maps. As a communication medium, the web has its own inherent characteristics and ways of impacting the people that use it. Marc Andreessen, founder of Netscape, famously said, "Software is eating the world." By understanding the potentials and limitations of creating digital experiences through software (or hardware), architects have an opportunity to shape the future of both the built and virtual environment.

While this modules' focus is front-end web languages – those that work together to make up the visual side of web sites. The visual elements of all websites use a combination of three languages:

  • HTML — which stands for HyperText Markup Language and creates and controls content such as paragraphs, headings, links and more.
  • CSS — or Cascading Style Sheets, which sets how the content of websites (the HTML) should look, such as how websites look on a mobile screen, versus tablet or desktop.
  • Javascript – which defines how a user interacts with the web. For example, when a user types in their email address into an input field, JavaScript can check the text is correctly formatted. Anything that happens after a page has loaded is usually controlled with Javascript.

These languages form the foundation for further exploration into emergent technologies such as voice search or control, blockchain, conversational AI, development of the metaverse and much more.

Modules:

  • Javascript in the Browser I
  • Data and APIs
  • JavaScript in the Browser II
  • JavaScript in the Browser III

Github

At a high level, GitHub is a website and cloud-based service that helps developers store and manage their code, as well as track and control changes to their code. To understand exactly what GitHub is, you need to know two connected principles:

  • Version control
  • Git

What is Version Control?

Version control is the management of changes to documents, computer programs, websites, and other collections of information.

What is Git?

Git is a specific open-source version control system created in 2005 by Linus Torvalds, the creator of Linux. Specifically, Git is a distributed version control system, which means that the entire codebase and history is available on every developer’s computer, which allows for easy branching and merging. It can be used with any file type such as such as Word documents or Final Cut projects, but is most often used for tracking code files.

GitHub is a Git repository hosting service. It allows developers and engineers to create remote, public-facing repositories on the cloud for free. While Git is a command line tool, GitHub provides a Web-based graphical interface.

For the following reasons, GitHub is the version control manager of choice:

HTML Basics

HTML stands for HyperText Markup Language and was invented in 1989 by Sir Timothy Berners-Lee, a computer scientist. The fundamental building block of HTML is the element. Elements consist of an opening tag, closing tag and content (text, image, video) sandwiched in between. The content is what the user sees on the webpage. The tags tell the browser the type of content and how to present it.

CSS Basics

CSS stands for Cascading Style Sheet and was invented in 1994 by Håkon Lie. It handles the presentation layer of our webpage and allows us to associate style rules with HTML elements.

Web Typography

Layout Basics

Animation Basics

JavaScript Basics

DOM Manipulation Basics

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
[]