Roadmap to front-end development

Hey guys, I’m back after a long time with a new exciting topic related to the Roadmap to front-end development.

Roadmap to front-end development also known as client-side development is more of website or web application related stuff. Here, we are more focused on developing what a user sees or interacts with. With my new experience with front-end development, I can say it is awesome to work on things where you need to think more of an end user perspective.

In the earlier/start of my career, I worked more on back-end development using Java/JEE related technologies. Though it involved somewhat HTML, CSS and JavaScript but it didn’t give me much exposure to front-end development. Switching to front-end development was not easy, as I sometimes mixed up many concepts, also the callbacks, async flow in javascript put me in learning things and handling different scenarios.

So, with my current journey in front-end development, I thought of learning and sharing here.

Web development basics

To step into web development, we must first understand the basics of Web. During this pandemic time, I’m sure you guys must have spent more time online, surfing for content through web applications. So, you might have observed different experiences with different websites in terms of look, user experience, loading, performance etc. So these are basic factors considered while developing an application.

From a basic technology perspective, one must know about basics of the internet, web applications, protocols like HTTP, and web development in general using HTML, CSS and JavaScript.

• HTML- structure of website
• CSS- beautifying the website
• Javascript- Adding logic to the application

Beyond that, there are many frameworks available today, which ease the development, details are shared below. You can learn the basics of web development from many sources, most widely referred are the one I have shared for novice learners in the roadmap below.

Front-end vs back-end development

Front-end and back-end are the most used terms in a software industry. These buzzwords are available for many positions. So let’s look more about what the difference is, and different paths you can pursue.

Front-end development

As mentioned earlier, front-end also known as client-side development is more related to UI/UX. Here you will be designing web applications, look more into the user experience perspective, responsible for making applications responsive to different devices, making it faster and better performance etc. For this, you need to learn web technologies which must have basic skills like HTML, CSS, Javascript. There are many frameworks available today, these web Frameworks make the development and integration of front- and back-end programming easier.

The most common frameworks available to front-end developers are:

• Angular
• React.js
• Vue.js
• Bootstrap
• Semantic-UI

And there many more, each framework has its own pros and cons.

Back-end development

Back-end is more of behind the scene of what the user performs on any web application. The other term used for back-end is server side development. Back-end developers work with tech stacks that include operating systems, web servers, frameworks, APIs, microservices and more. The frameworks, languages and programming APIs in these tech stacks are used to serve sites, web applications and to create services that other applications can consume (using API). These can be developed using backend technologies as some of listed below:

• Node.js
• Java/JEE
• Go
• Python
• PHP

And there are again many languages and frameworks for these, which help in ease the back-end development.

If you like to work on user interfaces, visual aspects of creating apps, then the front-end development path you can choose as a developer. The front-end is exciting not only visually, but also from a programming aspect also, you will end up spending hours writing logic that will make a better look & feel and user experience.

If you like to build up things by solving business problems, writing algorithms, working in the cloud, and creating app services and APIs, then the back-end can be your choice.

As a developer if you enjoy both and feel equally excited and comfortable, you can do both front-end and back-end as a full-stack developer. You just don’t have to limit yourself to any specific development.

Roadmap to front-end development

So, here is the roadmap. If you are new to programming, I recommend you learn the basics of front-End development first and as stated earlier, those are HTML, CSS and Javascript. Start from below sources :

https://developer.mozilla.org/en-US/docs/Web

https://www.w3schools.com/

Here, things are very well documented, understand the basics and practice by building something of your own. 

Later, you can choose to work on JS library like JQuery and any of the JS and CSS framework from:

• Angular
• React.js
• Vue.js
• Bootstrap
• Semantic-UI

Learn to design responsive applications using frameworks, look for tools to optimise application performance. There are many add-ons with chrome and firefox to measure that, learn to apply those and enhance usability. 

I hope you enjoyed this post. If you have any question/suggestion, feel free to leave your comments below.

Image Source : https://www.google.com/

Dear reader, a sincere review from you would encourage me to write even more 😉

Stay tuned. Happy Learning.