Considering the process of creating sites, many simply do not understand its real structure and the relationships between elements. Therefore, when it comes to creating your own resource, many face difficulties.
What Technologies Are Used in Front End Development?
Looking ahead: without skills in HTML, CSS and JavaScript, you will not be able to customize the visible part of the site. Front end development services require understanding from users.
Therefore, it is better to entrust the issues of creating and designing your own store or other web resource to professionals.
Description of the essence of the processes
Front end technologies are defined as web technologies whose source code is executed by a client-side processor (that is, in practice, the web browser of the local computer).
Since these files must be sent to our local computer from the server before being executed, of course, these codes can be viewed completely openly they are, as we say: explicit.
Html
It is a descriptive language in which we use tags (tags) to define what a given subpage contains these can be:
- hyperlinks,
- Images,
- edit fields,
- buttons,
- tables,
- numbered lists,
- containers for content,
paragraphs of text, headings, etc.
In addition to the content of the page, in HTML, we also define important parameters of the website the title and description in Google search results, the language and character set appropriate for the given country.
Note. Many authoritative sources and textbook authors believe that HTML is not a programming language mainly because it cannot decide whether to execute loops, select statements, etc. Therefore, it is assumed that it is only a so-called descriptive language.
CSS
They are called cascading style sheets. They are used to describe the appearance of site elements previously defined in HTML. In the style sheets we find the following entries: property colon value.
Of course, using CSS stylesheets also means understanding what so-called classes, IDs, descendants, hovers, etc. are, but now is not the time for that. Using CSS code, we can also influence the position of elements and the relationship between them.
And why are these cascading style sheets?
A cascade is a type of waterfall with a stepped structure. This is a clear hint of a powerful “step by step” mechanism that will save us a lot of work in many cases, but now don’t worry about it you just know where the “C” in CSS comes from.
Our inquisitive mind asks itself another annoying question: where did this (seemingly strange) idea of separating the content of the site from the layer of its appearance come from?
Well, this makes a lot of practical sense we will feel it, for example, when we manage to change the color of all buttons on a website with one entry in a CSS sheet.
This was possible because all the subpages on the site used the same stylesheet attached to each of them. This is a powerful and ingenious mechanism in its simplicity, a natural evolution as the appearance was defined in HTML, for example, with the reuse of tags. Fortunately, those days are gone forever.
JAVASCRIPT
It is a complete scripting language in which we can use the entire repertoire of classical language constructs:
- conditional statements,
- cycles,
- variables,
- arrays,
- selection operators,
- own functions, classes, etc.
JavaScript (not to be confused with Java, that’s another matter) is a powerful front-end processor with which we can create a website that is unique in terms of design and interface.
At the very beginning of our web developer adventure, we most often use JS to improve the interface of a website, enriching it with additional features not available in HTML or CSS.
JS scripts allow us to create efficient sliders, animated photo galleries, pop-up navigation bars, interactive menus, clocks, animations, etc.
JavaScript allows (after loading the page into the browser) to replace the selected piece of HTML or CSS code without having to re-interact with the server.
The slide can change on the screen, the clock will keep counting every second, the holiday photo gallery will show us the view of the full photo after clicking on its thumbnail, and the navigation bar in an animated form will unfold in front of us, opening up additional possibilities of interaction.