What Does a Front-End Developer Do?

Before describing my work, let me explain what a front-end is. The front-end is the visible part of a website or application, everything that the user sees and interacts with. All those buttons, all those blocks, all that beautiful animation. All the things that catch your eye when you go to a website and think, "Wow! What beautiful slides! What cool pictures pop up!" That's all done by a front-end developer.

My main task is to create a user-friendly, understandable and functional website so that it would please both the user and the owner. So what does a front-end developer's job look like?

Collaboration With UI/UX Designer

I work closely with the UI/UX designer who is responsible for the overall user experience and design. A well-designed user experience can increase user satisfaction and engagement. If a website or app is easy and fun to use, people are more likely to spend time on it and come back in the future. This is especially important for businesses, as a positive user experience can lead to increased sales and customer loyalty.

As a front-end developer, I turn a design layout into a working website and bring the user interface to life.

1) I make layout, add text content, images, buttons, chats, icons and pop-ups.

For example, I implement the button operation in such a way that it is clear to the user that the loading process has begun as soon as the button is clicked. For this purpose, I include a spinner that informs the user that their request is being processed.

2) I make sure the site displays correctly on different devices.

A person can use an application on different devices (computer, laptop, tablet, phone). I do all the adaptive part of the work, which is very important. What does it mean? Things can look completely different on different screen extensions. Somewhere the block is floating, somewhere the text is not rendering properly, on some devices and in some browsers the animation is not showing. This is also a problem I have to solve as a front-end developer. There are different types of browsers (Chrome, Opera, Safari). Sometimes it happens that what works in Chrome doesn't work in Safari, or vice versa. I have to solve this problem as well.

Collaboration With Back-End Developer

The front-end interacts with the backend to receive data and send user requests. The backend processes these requests and sends the required data back to the front-end.

I can describe our collaboration in simple terms with an analogy. Think about your favorite restaurant that you frequently visit. When you go there, you are greeted by smiling waiters taking your orders. Meanwhile, the cooks in the kitchen are busy and ready to prepare your favorite dish.

Similarly, a website or application is made up of different parts that work together to give the user a great experience. A front-end developer is like a waiter taking your order, while a backend developer is like a cook in the kitchen. The latter works behind the scenes and creates the parts of the website that you can't see, like databases and servers.

Explaining Front-End Developer's Work

Let me give you a step-by-step explanation of my work, using the example of a car sales website I have recently worked on.

The task came from the customer himself, who described in detail how he envisioned his future website. For example, he wanted to have blocks of cars on the page so that users could read complete information about each car, see the price, and also browse through the photos without clicking on the block. The client also wanted users to be able to see the seller and even calculate the credit when buying a car.

In general, it is incredibly challenging to meet the customer's expectations solely by relying on their verbal instructions. I, as a front-end developer, can do it the way I see it, but the customer may imagine it quite differently. And, accordingly, he will not like my version and I will have to change it. That's why I believe that a UI/UX designer is always needed on a project. First, because it is easier for the designer to redesign the layout, and secondly, because an experienced designer has a good eye.

Also, design is required for all types of devices. In the project I am describing here, we had an adaptive layout for laptops, computers, both for large expansion and small.

In adaptive design, different layouts are created for each device on which the website is opened.

Responsive design, on the other hand, can change its layout and appearance depending on the screen size of the device it is used on - from a large desktop computer to a small cell phone.

When the designer drew all the screens (for a cell phone, tablet, laptop, computer) and saved the mock-ups in a folder, I started working with it. My goal was to make the layout and website match 100%.

If I had any questions, the first thing I would do was go to the designer and ask, "Why did we do it this way? It could be much simpler." For example, why does a customer have to go to the car card to open the list of allowed colors? Why can't he see them right on the card? My suggestion was to add a drop-down list that would allow users to view all the colors.

During the front-end development process, I worked on all elements of the website: header, footer, main section or body, shopping cart.

Header is usually a strip at the top of a web page with a large heading and logo. It also usually contains general information about the site, such as site navigation and basic contact information.

Footer is the strip at the bottom of a web page. It usually contains copyright notices, quick access links, and/or contact information. Generally, the header and footer remain the same depending on which web page the visitor navigates to.

Body is the large area in the center that contains most of the unique content of a web page, such as blocks with images of cars that site visitors can purchase.

The cart page is where customers gather and review their selected items, make changes, and prepare for checkout.

If we return to the car sales website, the user could create a shopping cart and select the brand of a car, its color and technical specifications. Depending on the buyer's preferences, they were presented with cards of cars that would be suitable for them. Once they had chosen a car, they filled in a field where they had to provide details about the driver's license and insurance. The customer could then select the term for which he or she wanted to take out a loan and calculate the approximate loan amount.

After the customer clicked "save," their application would appear in the main window and be processed. After a few minutes, they would receive a call from a car service specialist to confirm the information.

Work Challenges

Based on my experience, I can tell you that it often takes much longer to complete tasks than originally planned.

For example, if a customer decides to translate their website from English to Arabic, I estimate that the task would take a month. Why so long? This task is not only about translating the language, but also about the fact that the website needs to render the content in right-to-left format. Normally, I always estimate tasks with some leeway because I do not know how everything will turn out, whether all aspects of the task will work properly. Also, I need time for testing.

If the customer's application is large and multi-component, I would add a function to each component where there is text that needs to be translated. I can get this function from the library, which is a set of pre-written code that enables me to swiftly accomplish specific tasks. All front-end developers use libraries because they speed things up and offer ready-made solutions for common tasks and functionalities. They allow us to focus on building the core features of their application rather than reinventing the wheel.

Another difficulty at work has to do with human nature, strange as it may sound. People tend to change their minds, and customers of apps or websites are no exception. Sometimes they change their wishes after the previously set task is completed. As a result, new time costs arise. For example, if I need to change the color design of the website, it's done in a few minutes. But if the changes affect the structure of the website, it takes more time.

What Skills Do Front-End Developers Need?

• HTML to create the structure of web pages. HTML stands for HyperText Markup Language and forms the basic building blocks of webpages.
• CSS (Cascading Style Sheets) to style and layout web pages. It allows styling of HTML elements like colors, spacing, sizes etc.
• JavaScript to make HTML elements interactive, to handle events like click, hover. Knowledge of JavaScript is also necessary to make asynchronous requests to server.
• Responsive design skills to create web pages that adapt and respond to different screen sizes and devices, providing an optimal user experience.
• Git version control to track changes, collaborate, and manage different versions of their codebase, ensuring efficient and organized development workflows.
• Cross browser testing to ensure consistent functionality and appearance for all users.
• Ability to use tools/frameworks like React, Vue, etc. to build interactive and dynamic user interfaces for web applications.
• Understanding of browser rendering to optimize performance and troubleshoot rendering issues.
• Debugging skills to identify and fix errors or issues in code, using various techniques and tools to diagnose and resolve problems in web applications.

Conclusion

When someone visits your website for the first time, it's their initial impression of your company. Therefore, it's crucial to have an attractive, strong, and clear website design and structure that immediately captures their attention.

It is essential to ensure that your website functions properly and is free of errors and bugs. This includes having a well-organized interface where everything is in its correct place. Front-end development plays a crucial role in achieving this by strategically placing the right elements in the right locations. By creating a visually optimized web design that immediately grabs visitors' attention, they won't feel the need to search for better alternatives to find what they are looking for.