We all know how there isn’t a definite age when y’all should start coding. It just depends on how much you love and enjoy it right? Maybe you, reading this, are a kid, getting the hang of what coding is, or you’re an adult pursuing your passion. Or you’re stranded in-between, trying to be better just as you go along.  Either way, I’m gotta get you acquainted with some aspects today, that can help the coder in you shine his way through all the potential bugs!!!

Taking it right from the top, there are two aspects of development. The back-end, which comprises of the actual coding, it determines how what you can see on the screen is going to act.  Whereas, the front-end is something that focuses on the appearance. How the page is actually going to look. What colors depict everything in the best possible manner, what the layout will be, which picture/logo will be placed where so on and so forth.

Simple enough? But wait. It isn’t as simple as it sounds.


As it goes these days, Appearances matter. So whether you live in close vicinity to coding or not, I’m sure you aren’t oblivious of how widespread the scope of front-end is. Making your app/website appealing to the user is as important as using the most optimal code at the back-end. There are so so many tools that go behind it.

The said tools and tricks, collectively, in all their Glory are known as the front-end spectrum.


As I mentioned just now, there are several tools that go behind making your website/app as spectacular as it looks. Each of them, adds their own hue to the whole scenario, forming collectively the spectrum, as the name goes.

So what I am going to do is, I am going to start from the first element, and explain all of them briefly. Here we go:

THE BUILDING BLOCKS, from the core of development: The core of the front end deals with the most significant elements at work. They are the basic building blocks upon which the rest of the stuff is built. The elements falling under this category are:

  • Web Components: It includes the API that facilitates making new tags and stuff. As we know, there is always a need to do new stuff. So the new tags, created with the help of these APIs help you achieve that. Other components include templates, web modules, etc.
  • HTML, CSS, and JavaScript: These are the tools that go into the making of the appearance.

TEXT EDITORS, because editing is inevitable:

These are the tools, offering an environment for writing the code in HTML, CSS or JavaScript. There are a bunch of these available, with a range of different features. Some are more popular than others. For instance, WebStorm, Sublime Text, Visual Studio Code and Atom etc.

UI FRAMEWORKS for the win: So, let me ask you this. What do you think is THE most important thing that you work towards achieving, as a developer? The best user experience? Of course. So this portion names some frameworks, that help you get to the stage where you can provide your user, the best of the best experience when he lands at your app/website. Examples include Ionic, bootstrap, etc.

RESPONSIBLE WEB DESIGN, because even with great talent, comes great responsibility.

This portion puts forth a couple of things, the first one being responsiveness. Its when the website/app adjusts itself, according to the device which is accessing it. 

Then comes Accessibility, it means that people of all backgrounds and abilities, no matter how naive they are, can access the product with ease. Lastly, Progressive enhancement, stating it very simply, it tells the developer, to start with the basics, and go on improving and adding gradually, depending upon the end-user. Quite brilliant if you ask me.

TEMPLATING, the new way to go about things: Templating can quicken things for you. It involves working with ready-made fragments of code, which could otherwise take a lot of time to make. The tools that can do your bidding in this, include jade, handlebar, etc.

Image result for JS templating moustache

BROWSER REFRESHING, taking ease up a notch: Browser refreshing means you don’t have to refresh the screen every time you want to view the effects of the changes you made. It is made possible using tools like the guard and live-road.

CSS PRE-PROCESSORS, why use CSS only? The CSS pre-processors allow you to accumulate logic building elements along with the conventional front-end stuff. Cool, right?

OOCSS, working conventionally: The next concept, Object-Oriented CSS, brings about the object-oriented concepts into the world of HTML, CSS. This is done from the point of view of enabling the re-use of repeating lines of code. It comprises of elements ranging from pattern lab to BEM. We’ll be discussing these in detail, some other time.

VERSION CONTROL, your software, your version: It is a system, that allows you to track the layers of modification by numbering them, benefits? You can always skip back to previous versions, to check one thing or another, if you have kept logs. There are standalone applications for the very same, nowadays, GIT being the most prominent one.

Image result for version control

PACKAGE MANAGER, automating all that is important: It deals with packages. Package managers comprise a bunch of other elements and end up automating everything from installing, uninstalling and all in between. That means you don’t have to go to the trouble managing all of all that. About time!!!

FRONT-END PERFORMANCE, the key to the lock called success: Performance is usually the threshold on which your skills as a developer are going to be judged and which ultimately is going to result in success. Various tools are out there to measure the front-end performance like Picturefill and webpagetest.

JS FRAMEWORKS, taking the help of one of the most popular languages: There are a number of JS frameworks, you can take advantage of these, to add some extra functionality to your product. You can choose the one that catches your fancy.

JS PRE-PROCESSORS, assisting the browser: Of course, you know they process the code. But why? That is because browsers can’t understand some lines of code, so you need to use the pre-processor that understands your code and outputs the desired result. It acts as an assistant to your browser. Fair enough?

PROCESS AUTOMATION, because why not? Automation is everywhere, right? So why not use is where it can be most useful? There are tools like gulp, which can eliminate the need to do recurring tasks, saving both time and resources.

CODE QUALITY, analyze what you write: Code quality can mean different things, in programming analogy, it means how bug-less your code is. There are different software for this purpose, for example, ESlint. However, optimal code can also mean how clean a code you’ve written.

TOOLS BUILDERS, DIY in web development: There are certain means that take the building phenomena is their own hands, process your data like code, images, etc and get you a much sought-after result. The example is Webpack. What a self-suggesting name!!

TESTING, be sure before you finish off: Coming to one of the most significant steps, which is testing. It becomes absolutely necessary to test the code, upon various standards and measures before you deploy the product. There are tools that can help you out with this, like Jasmine, which is really popular.   

BACK-END, We’re a team!! The back-end is concerned with the actual code, what goes on behind the scenes. There are several tools that you can use for this purpose. There is NodeJs and then there is Rails, these two are extremely popular.

Concluding, I’ll say that, both front-end and back-end are a team, one can’t exist without the other. If and when both of these work together, only then we get a wonderful outcome.

Understanding these, should not take a lot of time and effort. If, though, you have any difficulty, we’ll be discussing these in detail. Stay tuned!!