The most fundamental front-end technology is the web browser that is used to display web pages. Web browsers are sophisticated software applications that act as the interface between the user and the data and software that is sent through the internet. Despite their importance, web browsers are not often included in the list of web technologies. There are only a handful of modern and reliable browsers out there and they tend to be developed by a limited number of software developers. Most front-end programming activity is centred around code that will run inside the browsers. As a front-end developer, you will need to be aware of the capability and limitations of the different browsers. But you will most likely never be involved in developing a web browser.
In the early days of the web, the front-end was mostly concerned with the static presentation of content. This has changed as more and more functionalities have become available in the browsers. The effort to standardise specifications across different browsers is essential for the success of these technologies. The following is a list of the main front-end technologies. It is not complete but can give you a starting point to find your way around the different languages and standards.
HTML is tightly linked to the idea of the web. It is the format of almost all web pages that you look at in your browser. HTML is a mark-up language. This means that it provides structure for content and allows references to other content. In fact, we celebrate the invention of the HTML language as the birth of the World Wide Web.
While HTML gives structure to your content, it does not do much in terms of the visual appearance of the page. The CSS language allows front-end developers to specify the visual design of web pages. CSS, which stands for Cascading Style Sheet, uses so-called selectors that reference specific parts of an HTML document. Visuals styles such as colours, fonts, or layout can then be applied to these parts of the document.
This is not a technology as such but a way of writing CSS styles. In CSS version 3 styles and layout can target individual screen sizes. This makes it possible to change the layout of a page depending on the size of the device. The same web page can be optimised for mobile phones and for desktop screens at the same time.
CSS is the styling language that browsers can understand. But it turned out to be very clumsy. Web designers had to write the same text over and over again. Two extensions of CSS were developed almost at the same time. These are called SASS and LESS. Both provide variables and the ability to write re-usable CSS code which can be mixed into styles in various places. SASS and LESS are not understood by the browsers. This means a compiler will convert the SASS and LESS files into CSS before being published on the web.
Maybe not directly a front-end technology, but a skill that is needed by any web designer. Without high-end graphics, web pages look dull and uninteresting. Creating stunning graphics or making an initial website design often requires image manipulation software. Adobe is the market leader by far in this sector. If you want to become a web designer, Photoshop and Illustrator will be your permanent companions.
The technologies listed above provide the basic functionality for the front-end. But writing everything from scratch for every single web site or web application would be much too tedious. There are numerous frameworks that provide functionality out of the box. Knowing these frameworks is essential to becoming an effective front-end developer.
Bootstrap is a CSS framework that makes it easy to implement responsive web sites. It provides a set of classes that can be applied to HTML elements in the document. By combining these classes content can be made to reflow depending on the screen size. It also provides lots of default designs for typography, buttons, menus, and more. Bootstrap uses the LESS extension of CSS to compile style sheets for the browser.
This is another CSS framework for responsive web site design. The basic concepts of Foundation are similar to Bootstrap. But Foundation has a lot more freedom for individualising the styles. It has a shorter release cycle, meaning that new features are added more regularly. It is considered the more professional choice of CSS framework. On the downside, Foundation tends to be more heavyweight. The style sheets are bigger, putting more burden on the client and slowing download times. Foundation uses the SASS extension of CSS.