Front-end development: key technologies and concepts

When you walk around the city, what do you see? The eye often stops at stylish shop windows designed to attract attention. You choose the most beautiful of them and go inside.

The same thing happens on the Internet. Wandering the Internet in search of what you need, you stumble upon the most suitable site at first glance and go to it.

But if the windows are transparent and show what is inside, they invite you to take a closer look at the goods, then for sites everything is a little different. What is hidden under the visible elements of the site, how do they interact with the user, with each other and with the system behind it all? Let’s find out.

What is frontend development? Frontend vs backend

The front end of a website is everything that a user sees and can interact with using a browser. Creating this visual part is called front-end development. Designers who create user interfaces can also be called front-end developers in a sense, because they work together on the same part of the project.

For front-end development, the basic tools used are: HTML (to create the basic structure of pages and content), CSS (to style the appearance) and JavaScript (to add interactivity). The same set of tools is used in the process of creating progressive web applications – mobile applications that look like native ones, but are created using front-end technologies. You can read more about this in the article at the link.

The backend is the server part of a web application, hidden from the user’s eyes. This concept includes the servers that host web pages and certain logic that controls the functions and processes of the site. Here you can read a more detailed description of the inner workings of web applications.

The backend is developed using a different stack of technologies, including Java, PHP, Ruby, C# and sometimes JavaScript, which we will talk about in the corresponding section of the article.

Request-response cycle

So, the basic set of tools for front-end development is well defined: HTML, CSS and JavaScript. However, this set can be greatly expanded to include package managers, CSS preprocessors, frameworks, and more.

HTML: a key front-end technology

HTML (from the English Hypertext Markup Language) is a hypertext markup language designed to create websites that can later be viewed using Internet access. HTML is commonly used to structure a web document. It defines elements such as headings or paragraphs and allows you to insert images, videos, and other media.

How HTML works. HTML code is a set of tags and is written in a text file. This text file is then saved as an HTML file that can be opened and viewed in a browser. The browser scans it, interprets the code into a visual form, and at best renders the page exactly as the designer intended.

Hypertext is the way we surf the Internet by following hyperlinks that lead to other pages. “Hyper” refers to non-linearity, which allows you to move to any place, since this process does not imply a predetermined order.

Markup defines the qualities that are given to text within HTML tags. Tags define how browsers format and display page content.

Being a language, it contains code words and syntax like any other language.

For example:

HTML code example

The paired <html> / </html> tag defines the boundaries of the web page, and the text between the <body> / </body> tags defines the visible content of the page.

<!DOCTYPE html> at the very beginning declares the document type for HTML5. If left unmarked, different browsers will display it differently.

That’s how smoothly we moved to HTML5.

HTML5

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

CSS: Styling

CSS (“Cascading Style Sheets”, from English. Cascading Style Sheets) is a language used for styling pages. It defines how HTML elements will look on a web page in terms of design, layout on different devices with different screen sizes. CSS controls the layout of many different web pages at the same time.

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

Selectors are used to interact with HTML in CSS. A selector is a piece of CSS code that determines which part of the HTML will be affected by CSS styles.

The declaration contains the properties and values used by the selector.

The properties define the font size, color, and padding. Each property has a value or set of values.

Let’s take as an example:

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

CSS is written as plain text in a text editor. There are three ways to add CSS to HTML:

Instead of adding CSS to every HTML element that needs to be modified, you can use an External style sheet, a text file that contains all of the CSS. The external style sheet is included in the .html file in the <head> container.

When using an internal style sheet, the CSS code is placed directly in the body of the <head> tag of a specific .html page.

Inline styling means writing CSS directly into the html code of the element that needs to be styled.

CSS frameworks. A CSS framework is a set of default CSS and HTML files that extends design possibilities. In addition to their usefulness in creating responsive design, CSS frameworks help create different layouts, which saves developers from having to write code from scratch in every case. They usually help a lot when developing web applications for different platforms and screen sizes. With common UI components, Grid Layout, and many other features, CSS frameworks greatly speed up your development workflow. There are different types of frameworks:

Maria Fassi
http://spinelwebstudio.com

Leave a Reply