It seems like everyone is using applications these days. Let's say you are opening an application. The first thing that you see is the screen filled with attractive colors, well-ordered interacting elements, the aesthetic background design, and so on...or it may be filled with irritating and annoying interacting elements. I said maybe 😅. Any interface that helps you to interact with the website or an application is the UI. It's the front-end through which the user access or enter data, communicate and avail services of the application. In other words, anything that the user can see on a website or an application is the front-end.
The front-end consists of buttons, scroll bars, hyperlinks, clickable images, drop-down lists, and many more interactive elements. Technically, we can say front-end (client-side) is an abstraction, simplifying and underlying component by providing a user-friendly interface. Front-end development refers to the development of the client-side visible part of any website or an application and the person who is interested to do this job is honored as a front-end developer.
BASIC FRONT-END TECHNOLOGIES:
The front-end developer architects and develops the front end of the website/application. to become a front end developer, you need to start with the basic technologies like,
HTML
CSS
JavaScript
CSS
JavaScript
We use HTML to build the structure of the application/website, CSS to make them attractive and JavaScript to add functionalities to the elements. Let me give you an analogy, think of a human body, composed of a skeleton to provide and support the body structure, muscles to give an extra look, and nerves to connect and provide the functionality to every body part. By comparing with this, we can say HTML is to provide structure, CSS to give a visual effect, and JavaScript to provide functionality.
Every website or application that you use is composed of these three technologies. So, to begin with, you should be well versed with these technologies.
FRONT-END FRAMEWORKS/LIBRARIES:
To speed up the work, most of the developers use some tools called frameworks or libraries. Building a website/application includes a bunch of repetitive tasks. so to ease this work, we use frameworks or libraries which consist of a lot of predefined codes that can be reused. So, the job can be done faster. Most of the developers these days, using one of these popular frameworks,
AngularJS ReactJS VueJS
More accurately ReactJS is not a framework, it's a library. The key difference between the framework and the library is the "Inversion of control". A framework is the software product to develop and maintain complex projects. Frameworks provide the pre-defined structure and you can fill the structure with your own features, but the library is the set of reusable codes, you can call into your program.
Some of the front end frameworks are:
JQuery
Backbone.js
Ember.js
Semantic-UI
Svelte
Foundation
Preact
Ember.js
Semantic-UI
Svelte
Foundation
Preact
VERSION CONTROL SYSTEMS:
It's not sure that the project development involves only one person. It may involve more than one, in that case, every developer involved in that project should be able to work with that. The only possible way to ease this process is to maintain the history of the project. Version control system helps a lot for this purpose. It helps to collaborate the different developers working on the same project, stores the different versions of the project, backing up the original version in the repository.
A version control system records all the changes made to the file, so a specific version may be called later if needed.
Some of the best version control systems:
GitHub
GitLab
Perforce
BeanStalk
AWS CodeCommit
Apache Subversion
Team Foundation Server
Mercurial
bitbucket
Concurrent Version Control
GitLab
Perforce
BeanStalk
AWS CodeCommit
Apache Subversion
Team Foundation Server
Mercurial
bitbucket
Concurrent Version Control
CSS PRE-PROCESSORS:
For larger websites/applications, Writing CSS code is a hard task because of its fault tolerance mechanism. To simplify this, we can make use of the CSS preprocessor. It compiles the CSS code which is written using a special compiler. Developers then use that to create a CSS file, which can then be referenced by the main HTML document.
Some of the best CSS pre-processors:
SASS
LESS
Stylus
PostCSS
LESS
Stylus
PostCSS
This scenario happens in JavaScript too. in that case we use tools like TypeScript, CoffeeScript, and so on...
Apart from these, we need to know more. Let's explore the front-end fundamentals in the upcoming posts. stay connected to extend✌️.
This is a reference Blog
Ok