Who is a front-end developer
A front-end developer creates web pages from design layouts using HTML code for proper display on various devices such as phones, tablets, and laptops.
HTML allows creating the structure of a website with basic elements such as blocks, images, video, or audio files. In addition, HTML allows creating interactive elements, such as changing the background color of buttons when hovering over them.
CSS is used for the visual design of a website. It sets styles such as colors, fonts, and groups objects and blocks together. Thanks to CSS, a front-end developer has many opportunities for creativity and implementing design ideas.
Therefore, a front-end developer is almost a programmer who can understand design ideas and create working versions of web pages from them.
Hard skills for a web developer
Let's dispel the myth that HTML and CSS are the only skills a web developer needs. There are many useful technologies and tools, but there are some must-haves for any web developer. Let's list everything you need.
Design fundamentals. It's important for a web developer to understand the basic concepts of UX/UI design, such as the fact that a font size of 12 may be too small, or that light gray text on a white background may be difficult to read. To improve your knowledge in this area, you can start by reading Steve Krug's book "Don't Make Me Think," which is a timeless classic for anyone working in web design.
Preprocessors. Preprocessors make web development more convenient and faster. For example, with Sass, you can use variables and functions in CSS, and with Pug, you can do the same in HTML. Additionally, Pug allows for nested structures without brackets and even interacts with JavaScript code.
Pug does not extend the HTML language, but allows the use of additional constructs such as loops. For example, if you need to display multiple product cards on a static page, in HTML you would have to manually create each card. In Pug, you can create a card template and use it for all cards, which saves time and simplifies layout.
Sass solves similar tasks. For example, if we have a button template - it represents a set of styles that other button elements on the page inherit. Without a preprocessor, we would have to copy all the styles and create a separate class for each button. And with Sass, we only need to override some properties of the class. You can even create a mixin - a template that we will call "button" and use every time we need another button.
Another example. Suppose a designer has created 50 icons with five different sizes, and a separate class is needed for each one. You can take a straightforward approach and copy the selector 50 times, then change the name in each copy. Alternatively, you can create an array in Sass and make 50 icons within it. In general, it is much easier to program the preprocessor than to write everything manually.
Bootstrap and other frameworks. In Bootstrap, all the settings are located in one file, _variables.scss, which significantly simplifies the code and its understanding. This file also contains all the colors, button and element rounding parameters, fonts, and margins, which can be easily set using a single variable.
It is recommended to learn at least one popular framework, as you will inevitably encounter them in commercial development. Knowing one framework will help you quickly understand others, both in terms of documentation and code. Keep in mind that Bootstrap's documentation covers only the basics, and it can only be truly mastered during development.
JavaScript. The minimum requirement is the ability to connect third-party libraries or configure a slider. A front-end developer not only works with style, but also creates basic functional elements, checks how buttons behave, and sends data. In projects, simple things like sliders, toggles, and basic animations are often written in JavaScript. All of this is assembled in vanilla JS, making it a must-have skill. And if your team works with React, you will need to learn it at a basic level.
Build tools (such as Webpack). Knowing how to launch them according to instructions is sufficient. A beginner front-end developer does not need to have a deep understanding of build tools, as they are usually handled by other front-end developers on the project.
Virtual environments. Knowing how to set them up and configure them, pass packages, and reinstall variables is enough.
Additionally, you will likely find these additional tools useful:
- Git - to store and manage projects.
- Docker - to package projects with all environments and dependencies (if Docker is used in the company).
- Linux or macOS command line - to automate work.
- Node.js - to install, update, and delete npm packages.
The rest depends on the technologies used in the specific company. Some write in PHP, while others in Ruby or Python. For example, at Hexlet, our front-end developers sometimes even dig into Ruby and build business logic for the components they design. But this is more of an exception than a rule.
But even when you master all of this, you will have to constantly learn new things. Web development is not a static subject, specifications are constantly changing, and you need to keep up with what's happening in the industry.
Empathy is the main soft skill of a web designer
A web designer must be empathetic. Whatever designers and developers say, the most important thing is what the user sees, and this idea must be conveyed to the management.
In addition, a web designer must understand what accessibility means. It is necessary to simplify interaction with the site for users with limited abilities, such as visually impaired people or people with musculoskeletal disorders who work only with the keyboard. To do this, you need to think about what the input will be and describe the label as much as possible. It is important to consider that the site may look good visually, but a screen reader may not always explain what the text field is for.
A good way is to visit a popular site, turn off the screen, turn on the screen reader, and perform a scenario, such as ordering a ticket. This will help to understand the nuances of working with users who use screen readers. At the same time, it becomes clear that books and articles do not always talk about all the nuances of working with such users.
The advice may seem obvious, but many web designers do not think about it. Although their task is to make the site work - including with a screen reader program.
How much do web designers earn?
Your salary in Europe can easily reach 10000€ or more. On average from 1500€ to 6000€, but remote work is usually paid a little lower, but it all depends on the company. An important point is that in most cases you will have to move to a specific country in Europe, unfortunately or fortunately.
How to Learn as a Beginner
There are a lot of educational materials and resources on web development and design out there. Here are some of my favorites that I recommend to all beginners.
Books. Be careful when it comes to books, as a significant portion of HTML and CSS books are in English. By the time they get translated, standards may have already changed. However, there are good recipe books out there, such as "CSS Mastery" by Keith Grant or "CSS Secrets: Better Solutions to Everyday Web Design Problems" by Lea Verou. It's best to check the examples as standards change frequently, and some recipes may already be outdated.
Websites. There's an excellent portal called CSS-Tricks that posts recipe collections and code examples. You can also check out authors on CodePen, where they publish code and layout examples, problem solutions, and organize layout competitions.
On YouTube, there's a cool channel called keyframers with animation streams. We also hold webinars and publish video tutorials on our channel, some of which are led by me.
Courses. The main mistake that beginners make when self-studying is jumping to new topics without mastering the basics. As a result, they may know what grids are, but they don't understand what document flow is, how they overlap, and how to change that order. This can be particularly challenging in practice and in commercial development.
If you don't know how to organize your learning process on your own and are grabbing all topics at once, courses are a good way out. If you've already managed to master a few technologies on your own, write in a server language, and understand how to move through the material correctly, then you can handle layout.
However, keep in mind that courses are not enough to enter a new profession. No school can provide you with enough practice, so try to come up with exciting projects for yourself or gain experience in freelancing. The worst strategy is to limit yourself to course assignments, educational projects, and trainers.
Practice is a key part of learning. Even if you read tons of the best books, you won't be able to learn everything at once. You need to constantly consolidate theory in practice: start with text layout and gradually move on to more complex topics.
You can grow from scratch to being able to create a landing page in a month. All you need is practice - not only at home but also in commercial development. It's great if, after several educational projects, you get a job and learn in production.
It's best to break down the educational material into small topics and immediately after studying each topic, complete practical assignments. It's better to do this daily and regularly rather than once a week for ten hours straight.
Lastly, let's dispel one big myth. Some people say that layout is easy. We can agree with this statement, but only when it comes to the beginner level. The further you go, the more challenging it becomes. Even after working as specialists for ten years, they may say that their knowledge of layout is not perfect. To this day, they learn something new by reading articles and translations. So the learning process is endless.