HTML CSS JS

Intro to Frontend Web Development

Lessons

The Basics of HTML, CSS, and JavaScript

The predominant underlying markup technology behind the web is HTML (Hypertext Markup Language). Together with CSS (Cascading Style Sheets) and JavaScript, HTML web sites can be powerful, flexible, usable, accessible, and beautiful.

Watch a 10min Intro Video Lesson
Watch a 5min Review Video Lesson

Front-end web development is the practice of producing HTML, CSS and JavaScript for a website.
– Wikipedia

Three Core Front-end Technologies

HTML for Markup, CSS for Styling, and JS for Scripting
These three core technologies are almost as old as the web itself and there are no signs that they will be replaced or diminished any time soon. Tim Berners-Lee invented the Web in 1989; HTML was created in 1990, followed by CSS in 1994, and JavaScript in 1995.

HTML (Hypertext Markup Language) is the standard markup language for creating web pages and web applications. HTML elements are the core building blocks used to describe the overall structure of a web page and its content. As a markup language, HTML provides a way to “mark up” content in order to create meaningfully structured documents using semantically appropriate elements for different types of content, such as text headings, paragraphs, lists, links, quotes and other items including images and videos.

CSS (Cascading Style Sheets) is a “style sheet language” used for describing the presentation of a HTML document. As a style language, CSS was designed primarily for the presentation of content, such as a web page’s layout, colors, and typography. One of the key benefits of CSS is how a single CSS file can be shared across multiple HTML files, or web pages, thus allowing changes to the visual design of an entire site (whether it is a small site or a large one consisting of thousands of pages) to be made quickly and easily by simply editing a few lines in a shared CSS file, rather than by changing multiple lines of markup throughout many documents.

JavaScript (JS) is a programming language based on ECMAScript, a scripting-language. It is often times used as a scripting language for basic client-side manipulation of the DOM, or Document Object Model, to add advanced interactivity to web pages. All modern web browsers support it without the need for a plug-in. In recent years, JavaScript engines have become embedded in many different types of software, including the server-side via web servers and databases and in various runtime environments that allow JavaScript to be used for writing mobile and desktop applications. For example, JavaScript is used to write server-side web applications and services using Node.js.

The Client-Server Relationship and the Role of the Browser

How the Web Works
The Web consists of many different documents (not just HTML) that are identified by Uniform Resource Locators (URLs). HTML documents are particularly powerful because of their ability to link to other documents (hypertext “links”) and their easy ability to be rendered by any web browser. A typical web page is essentially a HTML-formatted text document that may also contain images, video, and other web resources that are rendered in the user’s web browser.

The client–server model is often used to explain how the web works by separating the providers of a web content (servers) and the requesters (clients). For example, when a user types in a URL for a web site, the request is sent to a web server that then serves the requested web page to the browser that then is able to render the page for the user. The term “client” is often times used to describe both the user and the browser.

When browsers receive HTML documents from a web server (or from local storage), they are able to render them directly into web pages without any other technology (no server or database or special plugin required). When a HTML document includes (or is linked to) CSS, the browser renders the page with presentation styling also without any other technology (no special plugin required). Lastly, when a HTML document includes (or is linked to) JavaScript, the browser is able to add higher-level functionality, such as make changes to the web page’s content and presentation based upon user actions and events directly inside of the browser without any other technology (again, no server or database or plugin is required). In other words, all browsers support HTML, CSS, and JavaScript right out of the box, and this is one of the reasons why these three technologies have been around for so long and continue to play such important roles in web design and development.

The Separation of Content and Style

The Design Principle that Separates HTML & CSS
One of the guiding principles for front-end web development is the separation of content and presentation (a.k.a. the separation of content and style). This general design principle is an important guideline for web designers and developers to keep in mind, for its fundamental role in splitting the core front-end technologies of HTML (content) and CSS (style). The separation of HTML from CSS makes it easier to maintain sites, to share styles across multiple pages, and to customize pages to different environments (e.g. print-specific styles, screen-size-specific styles, etc).

Summary

Front-end web developers use HTML, CSS and JavaScript to build websites so that a user can see and interact with them directly via a browser. As tools and technologies change over time, these three core front-end technologies have endured the test of time thanks to their universal browser support.

Related Resources and Reading

Go Further

Author Notes

This was written specifically to help aspiring web designers as they aim to:

  • Learn the basic concepts and principles of front-end web development and its three core technologies: HTML, CSS, & JS.
  • Understand the basic history of the web and the underlying principles of how the client-server model works to deliver web pages to users.