Front-end is about creating easy and interactive interfaces for web systems, websites, web applications, and even mobile apps.
When you begin in the computing world, you may not know what programming, development, web developer, or the focus term, front-end developer, means. However, here I am. In this series, I'll teach you about each term.
Everything in Computing is Code
First, you need to know that all information systems and devices are made with code, and that code is made by developers. When it's a web system, such as a website or other system on the web, we have web developers.
Programming is the art of coding.
Web Development
Web development is the creation of systems for the web, for the internet, using web technologies such as HTML, CSS, JavaScript, PHP, Java, etc.
Imagine you are in a restaurant. The menu has food options, and you interact with the restaurant through the menu. The order is sent to the waiter, and your food is made by the kitchen. In this analogy, the menu is a web page, the waiter is the API (Application Programming Interface), and the kitchen is the server. Similarly, the menu is the front-end, and the kitchen and waiter are the back-end. The API used to be part of the back-end.
Source: Image from pch.vector on Freepik
In other words, more technically, a web system, such as a website, has two main parts:
- Visual and Interactivity: Interactivity is about effects on click buttons, downloading data from the server, etc. This is called front-end.
- Logic and Business Rules: There is logic in the front-end, but in the back-end, the logic is more present. Business rules are rules for something to work. For example, to log in, the username and password must be the same as the username and password stored in the database. This part is called back-end.
Front-end
So, a front-end developer is part of web development and creates codes for the visual interface, creating interactivity between the user and the graphical interface, usually a browser like Google Chrome. In other words, the front-end creates and maintains the visual interface of websites and web systems.
Imagine you received a photo of a webpage. As a front-end developer, you will write codes that generate this site, with every button and other elements working. Each of the elements must be in its position, exactly like the photo received. And it should work correctly to receive the image from the client (browser) and send it to the server.
Then, what does a front-end developer do?
- Develop and improve the user experience (UX);
- Program web interfaces (UI - User Interface) where users interact with web pages;
- Develop the client logic, commonly in JavaScript;
- Develop web components (think that components can be buttons, menu etc.) to build the system interface and interaction;
- Take care of the website navigation.
Minimal Front-end Technologies
To work as a front-end developer, you have to learn, at least:
HTML (HyperText Markup Language)
This language defines the structure of a web page, its elements, data, and tags (markup). But what is the web page structure? The web page structure refers to where certain information will be, such as header, menu, footer, contact forms, main content, buttons, texts, and more. And all the information is tagged. It's totally possible to format text with HTML, such as text in bold or italic, but it isn't meant for that.
Below you see an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title page</title>
</head>
<body>
<!-- this is a comment: here will be page content -->
</body>
</html>
CSS (Cascading Style Sheets)
CSS styles are codes that set color, background color, text format, opacity, and other style options for elements. Besides that, CSS codes organize the position of elements. Remember, HTML marks the information, and CSS organizes and stylize it.
Below you see an example:
body{
background-color: red;
font-size: 16px;
}
JavaScript
JavaScript is a programming language that allows adding interactivity to web pages, downloading data, and lots of logic stuff. When you click on the button to update some element on the page, generally, it's JavaScript acting.
Below you see an example:
const url = 'https://randomuser.me/api';
const response = await fetch(url);
const responseInJson = await response.json();
console.log(result.results[0]);
Now you know what web development, front-end development, and front-end developer are. Also, at a minimum, you know what front-end is and what HTML, CSS, and JavaScript are for.
A almost complete list of front-end technologies
For knowledge, I'm a front-end engineer and I use these technologies:
- HTML5;
- CSS3;
- SASS (I like CSS Modules with SASS);
- TypeScript (and, then, we have JavaScript in version ECMAScript 6);
- ReactJS;
- Git for code versioning;
- TDD (Test-Driven Development, using React Testing Library). This includes Unit and Functional Tests;
- NextJS (when I need server rendering (SSR) or static generation (SSG) or other back-end functionality from Next.js);
- ESLint and Prettier for code linting;
Let's Go Beyond
In the next articles, I'll show a little bit about the career, salary, advantages, and disadvantages of a front-end career.
Credits
Vector in the top right of the cover: by Freepik.
Top comments (0)