Introduction

So you went through the page of Apple’s iPhone 12 Pro and wonder how come it's so cool , or you went through the documentation of nodejs.dev and wondered how come it has such a simplistic yet aesthetic look ?! Or maybe you ran into the thought of making your elegant frontend site but not knowing the ins and outs. If that happened, trust me you are not alone. A lot of the people out there don’t know how to start and get overwhelmed by the fear that it will be a tough journey, well I have been there too.

But to be honest, it's not as tough as it looks. Getting started is the key. Let’s discuss, shall we? To set the tone, we will be discussing the ins and outs of frontend development, and the nitty-gritty aspects of it.

What is a Front End Developer? 🧑🏽‍💻

So let me ask what does a frontend developer do? You might say that he/she is a person who sits in front of a couple of screens, setting up the UI and tone of a site and translating the designs given by the product team. 
 If you thought the same, well you are halfway there. But there’s much more to add apart from what we discussed. Here we go : 


• A front-end developer works on optimizing the performance of the site and components.
• Also, the developer needs to take care of responsiveness and making the site look and fit well across various resolutions and devices, platforms.
• Using SEO Best Practices while developing the sites or product.
• Fixing the bugs and maintaining the product throughout the SDLC.
• Use the best practices to develop the product components and avoid tech debts, involve in code reviews loop, and work across the team.
• Work in a collaborative coding environment with knowledge of CI pipelines, Git, SVN, and deployments. 


Well, you didn’t see that coming, or did you? If yes, great you are on good pages, else no worries, we all are learning.

Myths surrounding Frontend Development? 🥺

I am sure that you may have heard from somewhere that Front-end developers have easy work, or their work requires no logic. Or Frontend developers don’t know much about the backend. Right? Let's discuss these myths too.

• Frontend Development is easy: Well this is quite common as a myth but it may be easy to lay some pages using HTML CSS and Javascript but trust me it takes much more to build a premier site. Anyway frontend development might be easy to learn but it takes time to master, especially on larger products full of frameworks.
• Frontend developers need no logic: I don’t know from where this came, but when you have to make reusable modules or pages that involves plenty of events, states, and components, each one of which needs to be responsive, trust me it takes strategy and patterns, logic, and knowledge of life cycle.
• Frontend developers are paid less: This is NOT at all true, it all depends on the JD, profile and your skillset, if you are having good niche skills, for sure you would be paid handsomely.



There are many more myths to bust but I think this proves the point that frontend development is not as easy as it looks. It's worth rewarding and the learning curve is steep, day in, day out.

Why Frontend Development? 🚀

So let's discuss why Frontend development. Well for starters, you can determine this by yourself. If you have a knack for creating surfaces, pages that not only provide a good UI but UX as well to the user, and you have skills to give life to a boring site. Well, you are in the right place.

The demand for frontend developers is substantial, and since web applications are growing day by day, the demand will keep on continuing. Also, the community of front-end developers is widely growing so every time you run into an issue, you have their support readily available.

What will your role be like?

So your role won’t be just limited to the creation of UI and components but would encompass various requirements such as follows :

• Understanding the intricacies of every requirement
• Making a scalable and reusable component, every time
• Achieving levels of simplicity both in terms of code and UI levels
• Taking charge of what you build, being accountable to make it successful in production
• Testing the code, maintaining the code trunk/branch, constantly working on code reviews, feedback to improve the performance.

Skills needed to be a Front End Developer ⚙️

Coming to the point of this blog, what it takes to be a Frontend Developer? While this list is comprehensive, it covers pretty much most of the skills that are expected from a front-end developer. The skills are listed in higher to lower priority, higher implying most needed knowledge.

1. HTML & CSS

This is the most obvious skill set that is expected from any Front End developer. Since every browser interacts with HTML and CSS in the purest form, it is the most expected skill that is required. HTML is the wireframe of the page and CSS being the styling rules for the pages. Though this is easy to learn, it takes time to master and excel these two.

2. Javascript

Javascript is the brain of the web page and is constantly evolving. It gives life to the websites by handling events, triggers, clicks of users and processing of information, and much more. Its community is widely growing too since the arrival of React.js, Angular.js, Vue.js, and much more such frameworks.


 3. ECMA ES6


 ES6 be the set of the best practices, features, and standards/syntaxes that the developers must use to make the most out of Javascript. And ECMA is the association that puts the guidelines for the same. To be a strong developer who knows the potentials of Javascript, ES6 guidelines are good/must to know.


 4. DOM Knowledge / Virtual DOM


 Every time a page is created, a Document Object Model is generated which is the tree structure of elements that are used in the browser. DOM is the programming API for Documents. Knowledge of DOM enables the developer to understand the nitty-gritty aspects of how the browser treats the components and elements and how it renders the page. A developer with thorough knowledge of DOM is powerful to avoid performance issues.


 5. Browser Developer Tools

Every browser comes with a power-packed Developer tools option, to make the developer utilize Browsers most capability. It's the friend of the developer all in all. Here you would work if not all but on Network tools, DOM Elements, Developer Console, Applications/Storage, Lighthouse, and much more. The capabilities of Developer tools embedded in Browser are vast and are a must for any developer. Wish I could rank this higher in the list.


 6. Frameworks and Libraries


 Frameworks provide the way to ease the development process, and almost every company uses a lot of frameworks and libraries to power their systems to max potential. In my current company, Bootstrap, Angular is the popular frontend framework used. The advantage of frameworks is that its well tested across all platforms and it eases out the development process. Having used frameworks such as React, Bootstrap, Lightning Components (Salesforce Framework), I am eligible to say that these frameworks saved a lot of time and effort while developing.

While it depends on personal choice which framework to go with, all of these frameworks are evolving and hence it is important to learn a framework that you think suits your need. Here’s a list of some popular frameworks:


 Frontend Development Frameworks

1. React.js
2. Angular.js
3. Vue.js
4. Svelte
5. Bootstrap 


CSS Frameworks

1. Tailwindcss
2. Bootstrap
3. Semantic UI
4. Foundation


 7. Version Control Tools and Deployments


 This is inevitable. Every x, y, z team involves in development needs Version Control tools. Knowledge of this is the least expected skill, yet quite handy to be good at it. Working on Git, handling Pull Requests, making clean check-ins, handling merge conflicts are the things you would encounter daily. It's good to have a good hands-on tools such as Github/BitBucket/Gitlab and SVN tools. Apart from that, managing deployment and understanding the branches, the trunk is expected from developers.


 8. Mobile-First Approach and Responsiveness


 I wish if I could rank this higher. Unless a website is made strictly for larger screens, all the projects would need you to follow the Mobile First approach. So every time you develop something, you would have to take into perspective that it would be used on mobile-first and hence coining the term. Also, responsiveness is a requirement easily said than done. It takes a lot of effort to make a site responsive but is a virtue for a product.


 9. Testing and Debugging


 Where there is development, there is testing. Knowledge of unit testing the code is key and is necessary while working in agile teams. Knowledge of frameworks such as Cypress, Jest is expected from developers to test the UI and Frontend logic. 


10. SEO knowledge


 SEO knowledge is essential because a Good SEO process can take the website to a great level. The better the SEO, the better the ranking of the site. Optimized site architecture, relevancy in meta tags, security of the website, and a lot of SEO concepts are needed to be taken care of by developers for better site ranking, and accessibility on the web.

11. CSS Preprocessing


 CSS preprocessors can make the work more flexible. In the context of large projects, it's not easy to handle the project as we can’t use variables and functions in CSS, so CSS preprocessors become an integral part which, when used can ease the styling and rules of projects using variables. 


12. Performance Analysis

If your website is beautiful but runs slow it will rank lower and will be a bad UX for the users. Managing the throttling, performance, efficiently processing the images and data, caching data, and minifying/optimizing CSS and Javascript is necessary. Understanding performance and improving performance are the two sides of the same coin, which must be taken care of. Chrome has an in-house performance analysis tool that generates the result of your site’s performance, which is a tool one must use and explore/understand. 


13. Design Tools and Icon/SVG Libraries


 Working with design tools and UI-UX teams is something that would be a part and parcel of your work life. It's good to be acquainted with design tools such as Figma, Adobe Xd, etc.

That's not all ?! 🤔

All that we discussed so far is must to have skills in a Frontend Developer. Doesn’t seem like an easy thing right? Well, that’s what is the essence of it. With consistency, one can learn much of it. But that’s not all. Some skills can be learned with time while some skills need to be inculcated. Didn’t ring a bell? Haha. Well, my focus is on soft skills, here we go : 


Problem Solving


 The role would test your problem-solving skills, how to best fit the requirements when the design is unclear. When a problem comes your way, the deadline is close, how best you resolve it, your approach to find a solution would determine your progress into the role. 


Communication Skills


 Communication is a part and parcel of every role, and it plays a vital role in gathering the requirements, working in a team be it agile or not, keeping up with the pace of the project and other people in the team. Conveying the doubts effectively, using the forums to discuss the issues, or attending standup calls and discussing the progress or roadblocks. etc. It all is an implicit part of your soft skill.

Creativity


 You may not be designing the creative palette or theme of the product but understanding the requirement, deciding how to best implement it takes the ultimate test of creativity. Thus it's necessary to think creatively to best match the requirements.




Conclusion 🙏🏻

While you have understood the intricacies of this role, there’s still a bigger question as to how to be a good frontend developer, how to gain the skills, and how to apply them in real life. Well, it takes time, consistency, and persistence. And the best way to start learning is to build something, and learn along with the process, be it in form of tutorials or projects, whichever suits them best. I think projects are most rewarding since it gives you a good experience and will help to develop a good portfolio and power-packed resume containing projects.

While frontend development is a job role but is itself a way of mindset/thinking that you chose to go with. Every time I visit a great site, I would be subconsciously thinking of how to implement that in the best possible way with what I know and what I can explore to implement. Frontend Development is a creative journey, which becomes a part and parcel of life. Who knows you may be able to develop a cool frontend that you want to have for your next million-dollar idea! :)