I want to become frontend developer

August 24, 2024

Hello boys and girls, if you read this text, it means you are interesting in programing and to be more precisely in web programing. I'll try to explain in which steps frontend development is made of by my point of view.

First of all I want to emphasize that in computer sciences are many directions: web-programing, system administrator, UI-UX designer, data engineering and so on, and it’s doesn’t mean if you code on Java for example you for sure must know how to change password on neighbors WIFI, it’s a exactly same if you ask oculist what to do if you problem in stomach!

So, let’s start talking about web-programing. As you may heard web-programing consist with frontend and backend development. Frontend part is a part what can you see on web-page, images, buttons, text, heading, some beautiful animations ad other. To put it simply for now backend is a part of programing what handling your request and shows what you ask to it, it took information from database and give us as JSON format, but we will talk more detail about backend part in next post. In this post I’m going to talk more detail about Frontend part.

I started web programing in 2017, At the beginning everything was less tangled than now. It was enough to know basic HTML, CSS and little bit JavaScript to create something very simple web-page (I don’t mention Backend technologies like PHP, MySQL and others on purpose). The main hard part at that time for me was to write everything by my own in Notepad++ it was little boring, but it changed and now we have “smart” code editors with auto autocorrection and hotkeys and it’s easier to code. By the way you can check one of the oldest webpage still working: acme here you can see that they don’t use web responsive approach or some modern frameworks or libraries. Pritty scary right? Lets check some modern webpage, (if you use Google Chrome download plugin from Google Web Store named: Technology profiler Wappalyzer - Technology profiler to check used technologies and tools) for simplicity lets be YouTube if you use plugin we installed you can see tons of understood technologies and yes it is modern web-development!

Still here? want to dive deeper

Let's divide modern web-development in to the small parts. Those are topics what you need to dig deeper by your own, use google or youtube or whatever you prefer:

  • Web basics (HTML/CSS/JAVASCRIPT)
  • JQUERY
  • MVC
  • Processors and bundlers (Package managers Task managers)
  • Component based programing
  • More CSS, responsive webpage
  • whats next?

Web basics (HTML/CSS/JAVASCRIPT)

So what is web basics? Every webpage in the end it still goes to the point that we have HTML, CSS and JavaScript. You can check this if you open any webpage’s inspect element. HTML is structure how our webpage’s frame should look. Imagine you bought a space in the skyscraper’s 18 floor, you have only black walls with very basic structure of your future home we can describe HTML in the same way. It has structure and basic structure looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>I’m title</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

After a black wall in our house, we of course need design and beauty, not the abandoned construction. Here is a moment when we need CSS do beauty our space. We need to add color of wall, style of windows, and other things to make the house useful for life. We can add internal CSS rules to our HTML tags, but better approach is to separate CSS file from HTML and link it in head.

<head>
    <link rel="stylesheet" href="style.css">
</head>

And last part and most complicated it JavaScript, you may ask in the house example for what we need JavaScript because our house is ready, but here is a trick! We need functionality on our webpage and also at home. JavaScript in the house example can be related to electrical wiring, held water pipes, is it safe to go to the balcony and other things.

let's go further to jQuery

after a lots of troubles in frontend part, it was necessary to move to the next level of programming, write on clean Javascript was very boring and hard, that's why was created tool named jQuery. It was very useful to work with element of the page with very comfortable syntax. jQuery was a new generation of JavaScript where people can create many useful plugins and reusable blocks of code, that was good for saving time and also for creating some standart aprroaches in frontend development. But of course not everything is so cool and perfect, new opportunities have sparked more and more innovation and our code become very big and mesy, it was a new side effect of using jQuery.

MVC

The best idea was to transfer server pattern to web and its name is MVC (Model-View-Controller). The main idea behind MVC stand to split content for a three part.The Model stands for all data related to logic. The View stands for UI logic of application, It generates a user interface for the user and the controller is the component that enables the interconnection between the views and the model so it acts as an intermediary.

here we can mention SPA it is also modern frontend approach. If we use SPA it means we fetch HTML code from server only on first load and when we need some data we only fetching JSON format data from server with API not a whole HTML/CSS code.

Minifier, Compressor and Beautifier

I think we must mention one very useful tool that works under the hood of every modern web-app. As you already know we are using lots of technologies in web for various services, but most important part of every webpage is speed. No metter how good beautiful and informativ it is we need fast webpages, ALWAYS. JavaScript use tool called uglify, it is responsible for compress data what must be sent to use, it removes spaces, makes variable names shorter and much more interesting things. The result file what must be sent to use can be 2 file instead of 20.