Coming from common programming languages to web development, one expects to find parallelism with what we already know. After all, that it’s how we learn most languages and frameworks. We expect certain things to be present such as for loops, if statements, closures, and other common programming language constructs. For web development, I would expect these constructs to be present in its three foundational technologies: HTML, CSS, and JavaScript. Not ever being exposed to web development, I felt that it would be interesting to approach learning these tools with this outlook and see where my expectations are met and where do they deviate. This is especially interesting because I’ve always felt that web programming was not taught like other programming languages. Maybe this is because there are many people without a computer science background going into web development, so there is more of an emphasis on getting things done (e.g., learning multiple recipes or frameworks; tweaking examples), rather than on mapping web development concepts to a typical computer science understanding. I will do this superficially, as I’ve only now started learning web development.

A good way of thinking about the browser is as a code interpreter and to think about web development as, approximately, developing code that gets interpreted in the browser. Browsing can be thought as accessing and running a program on the web or navigating through a graph of programs (web pages). The browser is the interpreter of these programs, whose execution is a combination of the actual code and the input of the user that is provided by interacting with the page.

The language that is most often associated with web development is HTML. HTML curiously, is not a programming language in the usual sense, but rather I think it is best thought of as data to be interpreted by the browser. The purpose of HTML is not to perform computation, but rather to have content and to display it a certain way. HTML is mostly passive, composed of elements that are to be assembled into a page layout and then styled. Dynamic web pages are simply HTML code (i.e., data) that are constructed on the fly by the server based on whatever state or information that they depend on. This is not unlike the a returning data from a function call in a typical programming language. Of course, HTML itself has features that allow it to define different elements and to combine them into new elements, but overall it is closer to the passivity of data.

After HTML, we have CSS. If HTML is about the structure of the page, CSS is about its styling, i.e., how should the page be presented such as color, size, formatting, margins, and so on. The main objective of CSS is to define semantic formatting that then gets used in HTML. This decomposition is convenient because it separates the content from its styling. Additionally, CSS also provides selectors to style groups of elements satisfying certain conditions. Similarly to HTML, CSS is best thought off as data (rather than code), although the use of selectors for applying the styling has the flavor of computation, I would argue that the main goal is the definition of the styles first and foremost, with its programmatic application being secondary (although, still very important).

The final main technology is Javascript. Javascript is perhaps the closest to a typical programming language. The main differentiator is that in web development, we are invariably dealing with the presentation of content. In a typical programming language, the focus is on the computation rather than on the visual presentation of the result. In web development, the focus is on the presentation of the content and on the interaction of the user with that content. That being said, much of this programming is based on events and callbacks and the modification of the HTML and CSS data as a result of this interaction. Fundamentally, the interaction with the HTML and CSS data is accomplished in a highly programmable and idiomatic way.

If you only care about creating a static web page that is going to show content in a single way that expects no interaction from the user, there is likely no point learning anything beyond HTML and CSS. Frameworks (e.g., Jekyll) simply help you define this data through high-level constructs. To define your HTML and CSS data, anything goes, e.g., you can write a Python program that outputs your page as a function of whatever information and processing you want. You don’t have to restrict yourself to an oppinated framework about how this data is to be described. Frameworks are similar to libraries in typical programming languages: they supplement the functionality of the language by making specific constructions more easily expressible but they don’t change the fact that, underneath the surface, code in the underlying language is still being run. Additionally, an equally large set of relevant problems may not be well captured by the library, so we cannot be solely reliant on it for all use-cases. Largely absent from this discussion is server-side programming, but a simple mental model for it is that some computation is to be offloaded to the server. There are web development constructs to do this offloading. All the technology discussed here runs in the browser.

In conclusion, the main takeaway is that, for the purpose of establishing a parallel with typical programming languages, HTML and CSS should be regarded as data to be manipulated, and Javascript should be regarded as the language that allows this manipulation. I recommend you browse the following links. What is important in this browsing is that you validate what you’ve learned here and therefore have a mental image of what you expect to see in each of them.

  1. See this link for a reference of HTML constructs. Keep in mind that the goal is to express a specific structure, with little regard for the visual look of it (this is what CSS is for). The styles that are plugged into the HTML code are better thought of as being defined in CSS.
  2. See this link for a reference of the use of CSS to define and apply styles. See what are the properties that are modifiable.
  3. See this link for a cheatsheet of Javascript functions. Given the discussion in this post, two things should be clear. First, many of the programming constructs are just as those that you would expect in a typical programming language. Second, all the other constructs are either for interacting with the page (i.e., getters and setters for the various attributes of different elements) or ways of triggering computation with the different events.