What do you see when walking around and staring at the cityscapes? Probably, among the first things are shop fronts, shining and beckoning, created to draw you inside. You choose the most attractive, open the door, and enter.

The same happens on the web. Surfing the Internet for things you need, you come up with the most engaging site, open it, and there you are.

But if the shop windows can show you what’s inside it, invite you to touch the goods, understand that it’s different for websites. What elements are hiding under the hood of the website’s visible elements, how do they interact with a user, each other, and the system behind it all? Let’s find this out.

What is front-end development?

The website’s front end is everything you see and can interact with using a browser. So, creating this visual part is called front-end development. You could even say that designers creating user interfaces and planning experiences are also front-end developers, as they are working in collaboration on the same part of the project.

To create the front end, engineers use the combination of HTML (for basic page structure and content), CSS (for visual editing), and JavaScript (for making websites interactive). The same set of tools is used to create progressive web apps –  mobile apps that look and feel like a native one but are created with the use of front-end technologies. There’s more about that in the linked article.

On the other hand, the back end is everything that happens, well, backstage. It contains servers where your web pages are located and the underlying logic that governs the website’s functions and processes. We have an in-depth description of the inner workings of web applications if you want to check it out.

The back end is built using a different set of technologies, including Java, PHP, Ruby, C#, and sometimes JavaScript, which we’ll explain in a corresponding section.

The basic toolset for a front-end is well-defined: HTML, CSS, and JavaScript. The frontend development technologies may be however extended with package managers, CSS preprocessors, frameworks, and many more.

HTML: the key front-end technology

HTML (or Hypertext Markup Language) is a computer language designed to create websites that later can be explored by anybody who accesses the Internet. HTML is normally employed to structure a web document. It defines such elements as headlines or paragraphs and enables embedding images, video, and other media.

How HTML works. HTML is composed of a series of shortcodes called tags, normalized into a text-file by a site creator. The text is then stored as an HTML file and observed through a browser. The browser scans the file and interprets the text into a visible form, and in the best case, renders the page as the designer had planned.

  • HyperText is the way by which we travel across the web by clicking hyperlinks – specific texts taking you to other pages. Hyper means it’s non-linear, which allows for moving to any other place, as there is no predefined order to do so.
  • Markup determines the qualities that HTML tags apply to the text inside them. Tags mark it as a particular type of text.
  • As a Language, it holds code words and syntax like any other language.

For example:

html-code

The example of HTML code

The text between <html> and </html> specifies the web page, while the text between <body> and </body> determines the visible content.

<!DOCTYPE html> on the top is the Document Type Declaration for HTML5. If it’s not included, different browsers will render it in their way.

This is how we gradually move to HTML5.

HTML5

Since its initial release in 1991, HTML has undergone many updates. HTML5 released in 2014. It has added such features as offline media storage support, more precise content elements (i.e. header, footer, navigation), and support for audio and video embedding.

CSS: Styling your facade

CSS (or Cascading Style Sheets) is a style sheet language. It’s applied to define how HTML elements are supposed to be presented on a webpage in terms of design, layout, and variations for diverse devices with different screen sizes. CSS masters the layout of numerous different web pages at a time.

How it works. CSS interacts with HTML elements, the components of a web page.

  • To communicate with HTML, CSS uses selectors. A selector is the part of CSS code defining which HTML piece the CSS styling will impact.
  • declaration contains properties and values that are employed by the selector.
  • Properties define font size, color, and margins. Values are the settings for these properties.

If we take an example,

css-code

The example of CSS code

P (for paragraph) is selector, {  font-size:24px;  color:blue;  } is a declaration, font-size: and color: are properties, while 24px; and blue; are values.

CSS is written in plain text over a text editor or word processor on a computer. If you were to examine how the CSS code is implemented to HTML content, there are three ways to do so:

  • External style sheets are stored as .css files and can be applied to define the appearance of a whole website via a single file, instead of putting extra instances of CSS code to every HTML element which has to be modified. To use an external style sheet, .html files need to contain a header section that connects to the external style sheet.
  • Internal style sheets are CSS directions put straight into the header of a particular .html page.
  • Inline styles are snippets of CSS recorded into HTML code itself.

CSS frameworks. A CSS framework is a set of default CSS and HTML files. It extends a front-end developer’s capabilities for website design. In addition to assisting while building a responsive design, CSS frameworks also present distinct and symmetric layouts, saving developers from writing code from ground zero at every occasion. They are usually considered a good choice to fit diverse platforms and screen sizes. With common user interface components, grid systems, layouts, and many other features, CSS frameworks considerably accelerate development workflow. Many frameworks exist in the CSS Universe:

  • Full featured (Bootstrap, Foundation, Semantic UI, and more),
  • Aimed at Material Design: (Materialize and Material Design Lite), and
  • Lightweight (Pure).

We won’t describe them all. You can examine our comparison table instead.

Most popular CSS frameworks

Most popular CSS frameworks

Preprocessors – Sass and LESS. Drafting CSS is routine, while short tasks such as looking up color values, closing tags, or any other repetitive operations take a lot of time. That’s where a preprocessor comes in handy. A CSS preprocessor is a scripting language that expands CSS and assembles it into general CSS.

Sass and LESS are the most common preprocessors. They share some common basics, such as:

  • Syntax elements and
  • Backward compatibility with normal CSS files.

However, there are also a lot of differences between them.

  • Sass means Syntactically Awesome Style Sheets. Sass runs on Ruby and is rendered on the server side. Due to its Ruby language origin, the installation is provided via so-called gems (multiple Ruby/Rails libraries).
  • LESS stands for Leaner Style Sheets. It’s a JavaScript library and is rendered on the client side in the browser. Developers choose LESS much more regularly when using JavaScript with style sheets. It resembles composing regular CSS. The technology allows for reusing pieces of CSS within LESS files.

DOM: the web page structure

The Document Object Model (DOM) is defined as a programming interface for HTML and XML documents. It interprets the page so that programs can modify the document structure, style, and content. The DOM renders the document as nodes and objects, enabling programming languages to connect to the page.

The HTML DOM tree of objects

The HTML DOM tree of objects

Source: W3Schools

How it works. Consider a web page as a document that can be either presented in the browser window or as the HTML source code. The Document Object Model (DOM) represents this document so it can be modified. The DOM is an object-oriented representation of the web page, which can be altered with a scripting language like JavaScript.

JavaScript: making the Web alive

JavaScript (JS) is one of the most popular scripting languages. It’s mostly renowned for providing a full stack of technologies for both front-end and back-end development. As we are talking about the first one, it’s applied to make web pages dynamic.

How JavaScript works. JS boosts a website’s overall interactivity. It enables modeling animated UI components such as image sliders, pop-ups, extensive site navigation menus, and more. JavaScript provides a website with extended functionality that isn’t otherwise achievable with HTML and CSS alone. JavaScript allows web pages to reply to users’ actions and dynamically refresh themselves. Thanks to JavaScript, this process doesn’t demand a page reload to alter its representation.

JavaScript frameworks and libraries and why we need them

Those who are just entering this field of expertise may think that frameworks and libraries do the same thing, allowing different visual elements to interact with each other. And let’s be honest: It’s not too far from the truth. However, there are a few distinguishing peculiarities. So, let’s define what makes a JS framework, what a JS library is, and what purpose they both serve.

Frameworks are templates to create a website or a web application. They provide a structure (such as a skeleton or scaffolding) on which to arrange the whole project. While the framework sets the page templates, they build the structure with particular allocated areas to embed a framework code in.

So, JavaScript frameworks are complete sets of tools to form and arrange a website or web application.

Libraries are sets of prewritten code snippets used and reused to implement core features of JavaScript. The snippet can be easily integrated into an existing project code when necessary.

So, libraries are specialized tools for particular coding needs, not an all-purpose machine for grooming the whole existing project.