Frontend development: how to learn?

In this quick beginner’s guide, we will try to understand client-side web programming. We will learn about the knowledge necessary for this demanded area, the conditions for training and promising opportunities.

What is frontend development?

Frontend development is an area of web development that focuses on interaction with the user of a resource by converting the code into an external graphical browser interface that simplifies the perception and understanding of the information presented on the site.

It is the front end design that draws the audience to your site and keeps them there for a long time, making it readable, attractive and easy to understand. In general, everything that you see on the browser screen: text, pictures, buttons, menus, and a navigation bar that appears out of nowhere is the work of a front-end developer.

The front-end usually includes a number of roles: web programmer, coder, UI tester.

This direction is rapidly developing and has a huge community of followers, many ready-made solutions for any project and thousands of kilometers of written code, so it should be considered as one of the possible options for the future IT profession.

In fairness, it is also necessary to mention backend development, which is responsible for the interaction of the resource with the server, but this is a completely different story.

What a frontend developer needs to know and be able to do

Interface specialists use many technologies in their work, but the tools that are unchanged and fundamental to this area are: hypertext markup language (HTML), cascading style sheets (CSS) and the JavaScript programming language.

Let’s analyze each of them in more detail:

HTML

We use HTML to mark up the page. We divide it into blocks and fill them with the necessary content: text, images and videos. The building blocks of the language are tags – keywords that let the browser know what the element is and how to display it correctly. Most tags consist of two parts: opening and closing, between which the content we need is written, for example:

<div> // opening tag

// some content

</div> // closing tag

More details about the markup language can be found here.

css

CSS (Cascading Style Sheet) is a set of options applied to an HTML element to control its appearance. The main role of styling is to make the content more attractive to the reader.

The fact is that all HTML tags by default have an unremarkable appearance. If they are not correctly highlighted on the page, then the user’s brain may incorrectly interpret the information provided. For example, let’s take two identical documents, one of which is styled with CSS.

Before adding styles:

Frontend development

After including CSS:

Frontend development

Which option would make more sense to you?

The answer is obvious.

With CSS, you can adjust many different settings: sizes, color, transparency, block position along the axis, shadow, glow, change on hover, gradient, stroke, and much more. For more information on proper use and formatting of CSS code, see here.

JavaScript:

JavaScript (JS) is a scripting language for browsers designed to intercept events and perform various actions.

Let’s say one of the users of your resource clicked the mouse button on some part of the web page, thereby triggering the click event. Using JS, we can bind this event to the execution of the function we need, for example, to open a modal window or change the color of an element.

Tooltips, rotating images, all kinds of falling snowflakes and other anime stuff are all the work of JS.

Developers use the language to make the site interactive, that is, to allow the user to interact with its elements. Responsiveness of the resource makes it more interesting. JavaScript is loved and hated, but modern web development is indispensable without it! More details about the language features can be found here.

Responsibilities of a frontend developer

Design

Since, in most cases, the developer needs to create a web page interface based on the layout provided by the designer, he must be able to use design tools such as Sketch, Figma or Photoshop, at least at a basic level.

At this level, you should be able to:

measure the elements and the distance between them;

find out the shade of the necessary elements, transparency;

work with hidden elements;

work with raster and vector images;

work with layers;

determine the size and type of font used;

define the intended JS implementation of the elements on the page.

Cross-platform and cross-browser

Now you can access the Internet browser from any “iron”, so the developer must adapt his project to different devices with different screen sizes/parameters. You don’t want your site to float away or vice versa – all the elements “run into” each other. Knowing the principles of responsive design and how to implement it into code is crucial in modern layout. A layout designer is an integral part of a frontender.

It is also necessary to take into account the behavior of your resource in popular browsers among users. Although most of them are currently able to maintain a consistent display of site content, there are still a number of properties that need to be prefixed with additional prefixes in order to make them friends with the browser.

CSS preprocessors

As the amount of CSS you write increases, there is a risk of inadvertently overriding properties you’ve already written with the wrong class name and wasting time writing the same code over and over again. This is where CSS preprocessing comes into play. In fact, this is another way to make your life easier. SASS, LESS and Stylus are solutions that allow developers to write code in the preprocessor language, structure it intelligently, and then convert it into a regular style file. This approach makes it easy to edit the code and avoid the aforementioned errors.