How to become a better front end developer

Is it better to use this plugin or that library? Should I plan this project first or jump right into coding? Should I seek assistance or figure it out on my own?

Does this sound familiar?

I understand how you feel. I had the same reaction. That all changed when I began incorporating the following points into my daily routine.

Whether you are a beginner or an experienced developer, some of these points will undoubtedly assist you in taking your front-end development career to the next level.

Here are some pointers to help you improve your skills as a front-end developer.

1. Plan your projects

The first mistake, which is surprisingly common even among senior developers, is that most of us do not plan.

It’s tedious, we have no idea how to plan, and we believe it’s not our job.

As a result, we frequently skip this crucial step.

A little forethought can help you to:

• save you a lot of time
• reduce stress when the deadline is approaching
• comfortably finish on time everyday

And it doesn’t have to be complicated.

Simply putting down a list of templates and elements which need to be converted from PSD to HTML or breaking up any complex elements into a smaller parts and writing them down is enough.

Making a simple project based to-do list will allow you to:

• stay organized
• keep your head clear and focused on the task at hand
• highlight any roadblocks early in the project phase
• easily keep your client, boss or project manager in the loop

More on the last benefit in the point #2.

Helpful tools for planning

• Workflowy – dump a list of templates into a Workflowy bullet list
• Writemaps – create a website site map
• Trello – create a project board and cards for each of your templates and elements
• Pen and paper – all of the above in an old fashioned but still effective way

Planning is important, but not always everything goes as carefully planned.

2. Be Proactive

Nothing is worse than informing a client or boss that things are taking longer than expected and that the project will not be completed on time.

Proactively highlighting any bottlenecks or delays is an extremely effective way to keep everyone happy.

It’s fine if things take longer than expected, but it’s not okay to keep this to yourself.

You’re stuck with a bug or can’t figure out what’s wrong? You are not alone; even the most experienced developers face similar challenges on almost every project.

When this occurs, make it known!

Everyone will appreciate the fact that you are doing your best and keeping them updated on your progress.

Do you want to delight your client and boss? Send them a short summary of what you did today and what you will be working on tomorrow, highlighting any concerns.

It should only take 5 minutes, and even less if you use the tools from #1.

They’ll appreciate it because it gives them time to consider a backup plan, which could be as simple as asking the client for more money or extending the deadline.

Other reasons to be proactive include:

• it makes you look more professional
• it boosts your credibility
• it helps to build a trust

Setting a daily or weekly reminder will help you to never forget to give a project progress update.

Helpful tools for reminders

• Google Calendar – create a simple reoccurring event
• Evernote – create a note with a checklist of your tasks and set a reminder
• iOS Reminders – doesn’t need a description, does it.

3. Be curious

Curiosity, I believe, is one of the most important qualities on this list.

Almost every day, new tools, plugins, techniques, and languages are released.

It is critical that you remain open to new experiences and make an effort to explore and comprehend them.

The bad and good news about front-end development is that it moves at a breakneck pace.

This means that you can quickly become an expert, but your skills can also quickly become obsolete.

Tip: You don’t need to know everything, just having a rough overview about a topic or technique is fine. You can then dive deeper into it when the right project comes along.

Helpful sources for front-end development news

• CSS Weekly
• HTML5 Weekly
• JavaScript Weekly
• Responsive Design Weekly
• Sidebar.io
• Web Design Weekly

Let others filter out the noise and concentrate on the top news only.

4. Invest in your skills

Front-end development and everything associated with it is simply a skill, and any skill, believe it or not, can be learned.

To advance, you must first invest in yourself. I’m not talking about spending money on expensive courses, seminars, or books; I’m talking about investing your time.

There is no shortcut to success, and studies show that it takes approximately 10000 hours to master a skill, which equates to approximately 4 years of 40-hour-per-week practise.

Expect late nights spent exploring other websites, experimenting with new plugins and frameworks, reading web development blogs, listening to podcasts, and chewing through thousands of tweets.

Tip: Schedule a time for self-development into your week. I know this might be harder if your employer doesn’t support you, but be prepared to invest some of your free time into your own career.

Helpful blogs and podcasts for front-end developers

• CSS Tricks
• Codrops
• ShopTalk Podcast
• Boagworld Podcast
• Apply Filters Podcast

BONUS TIP: Setting the podcast playback to 1.5x or 2x speed will help you to get through more stuff quicker.

5. Don’t say YES to everything

Clients and bosses are both demanding, as we all know.

However, saying yes to everything can backfire, and you will end up working for less, under pressure, and stressed out.

Examine the project requirements carefully and match them to your skills. Also, make sure to inquire about which browsers you must support.

There is nothing wrong with highlighting which parts of the project will require senior assistance or should be excluded from the project scope.

Highlighting these earlier in the project timeline will make the entire process much smoother for everyone from start to finish.

Tip: Don’t be afraid to call out functionality or feature which is out of your skill set. Being honest is the key, but also make sure you don’t say no to everything.

6. Don’t say NO to everything

Learning something new on every project, contrary to the previous point, is an important characteristic of a highly effective front-end developer.

Each project is a great way to learn how to use a new feature or try something new for the first time.

By saying no to everything and only doing what you know, you are effectively closing the door to personal and professional development.

You’ll soon drown in a sea of mediocre developers.

Exploring the unknown, on the other hand, will provide you with a sense of accomplishment and satisfaction, as well as keep you hungry to learn new things over and over again.

Tip: Pick a feature, plugin or a technique you wanted to use for some time and implement it in your next project.

7. Find a mentor

You want to learn but don’t know where to begin? What should your next step be? How should this or that be implemented?

Mentors are excellent for this.

Find someone who has more experience than you and is eager to help you grow.

Your mentor should be someone you admire and admire, someone you aspire to be like. Someone who can teach you how to code as well as what not to do.

This could be your boss, a coworker, or someone you will follow online.

While larger corporations may have a formal mentorship program in place, if you work in a small studio or on your own, search the internet.

Following developers like a Chris Coyier, Paul Irish or getting a mentor through Thinkful or similar programs might be a good idea.

Tip: If you are not going forward, you are going backwards, especially in web development.

A good mentor will help you:

• to get advice on your project approach
• to get a sense of direction
• to help you foresee any potential roadblocks

Tip: Remember a mentor is not a guy who will do everything instead of you and is not there to motivate you. You still need to be curious and self-motivated in order to grow.

8. Stay active

Working in the digital industry entails a lot of staring at a computer screen.

Sitting in an office for 40-60 hours a week will eventually catch up with you.

That is why it is critical that you take care of your body in the same way that you take care of keeping your markup neatly organized and commenting on everything you do.

A healthy body and mind equals a better code. So, when planning your week, don’t forget to include some non-digital activities, such as a walk, run, gym, or whatever else will distract you from all the pixels around you.

Tip: Watching YouTube or TV is not an escape from the tech world and won’t make you feel refreshed. Anything that gets your blood pumping will.

Conclusion

Do you agree or disagree with any of my suggestions? What are your recommendations and tips for aspiring front-end developers? What factors aided you in taking your career to the next level?

Is there anything I’ve forgotten? Please let me know in the comments section.