Should I use this plugin or that library? Should I plan this project or dive straight into coding? Should I ask for help or figure it out myself?
Sounds familiar?
I know how you feel. I felt the same way. That all changed when I started implementing the below points into my routine.
Whether you are a newbie or professional, chances are that some of these points will help you to bring your front-end development career to the next level.
Here are 8 tips to help you to become a better front-end developer.
1. Plan your projects
The first mistake and surprisingly very common even with senior developers is that most of us don’t plan.
It’s boring, we don’t know how to plan and we feel that it’s not our job.
That’s why we quite often skip this very important step.
Good planning 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 organised
- 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
There is nothing worse then telling your client or boss, that things are taking longer than expected and that the project won’t be delivered on time.
Proactively highlighting any roadblocks or delays is a very powerful way to keep everyone happy.
It’s ok if things are taking longer than initially planned, but it’s not ok to keeping this for yourself.
You’re stacked with a bug or can’t figure something out? You are not alone, everyone even the most experienced developers have the same issues on almost every project.
When this happens, call it out!
Everyone will appreciate that you are trying your best and keeping them in the loop with the 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 if you use tools from #1, even less time.
They will love you for that because it gives them a time to think about a plan B, which might be simply asking the client for more money or extending the deadline.
Other reasons why to be proactive:
- 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.
Curious about the next point? Great.
3. Be curious
I believe that one of the most important attributes on this list is being curious.
New tools, plugins, techniques and languages are being released almost every day.
It is very important that you stay open to all the new things and will make an effort to explore and understand them.
The bad and at the same time the beauty of front-end development is that it’s moving forward very fast.
This means that you can quickly become an expert but also your skills can become very quickly outdated.
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
Let others filter out the noise and concentrate on the top news only.
4. Invest in your skills
Front-end development and everything related to it is just a skill and any skill, believe it or not is learnable.
You will need to invest in yourself in order to grow. I don’t mean spending money on expensive courses, seminars or books, I am more thinking about investing your time.
There is no short-cut to success and researches show that it takes around 10000 hours to master a skill, that’s around 4 years practicing 40 hours a week.
Be prepared to put up with late nights exploring other websites, experimenting with a 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
BONUS TIP: Setting the podcast playback to 1.5x or 2x speed will help you to get through more stuff quicker.
Did you say yes, sir?
5. Don’t say YES to everything
Clients and bosses are demanding, we all know that.
But saying yes to everything can eventually turn against you and you will end up working for less, being under the pump and stressed out.
Carefully evaluate what are the project requirements and align that with your skills. Also be sure to ask which browsers you need to support.
There is nothing wrong in highlighting which parts of the project will need a senior assistance or will need to be left out of the project scope.
Highlighting these earlier in the project timeline will make the whole process from start to finish much smoother for everyone.
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.
Did you say no, sir?
6. Don’t say NO to everything
Contradictory to the previous point, but also important attribute of a highly effective front-end developer is learning something new on every project.
Each project is a great way to implement a feature which you are not familiar with or you do something new for the first time.
By saying no to everything and only doing the things you are familiar with, you are essentially closing the doors for personal and career development.
You will soon drown in the sea of average developers.
On the other hand, exploring the unknown will give you a great feeling of achievement, satisfaction and will keep you hungry to learn new thingsagain and again.
Tip: Pick a feature, plugin or a technique you wanted to use for some time and implement it in your next project.
And if you need, use a mentor to steer you into the right direction.
7. Find a mentor
You are keen to learn, but not sure where to start? What should you learn next? How to implement this or that?
That’s what mentors are great for.
Find someone with more experience than you, someone who is keen to help you to grow.
Your mentor should be someone who you respect, someone who you would like to be like. Someone who can teach you how to code and what to avoid doing.
This could be your boss, your colleague or someone online who you will follow.
Bigger companies might have a formal mentorship program in place, but if you are in a small studio or on your own, look on 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.
Still with me? Great..thanks, but don’t forget to move.
8. Stay active
Working in the digital industry means that we spend a lot of time staring at the computer screen.
Sitting 40–60 hours in the office will sooner or later take it’s toll.
That’s why it’s vitally important that you look after your body the same way as you take care of keeping your markup nicely organised and commenting everything you do.
Healthy body and healthy mind means a better code. So when you schedule your week, don’t forget to include some non digital activities — walk, run, gym or whatever else will make you forget about 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.
I am off for a run now.
BONUS:Always test your code across different browsers and mobile devices.You can build your own cross-browser cloud infrastructure and mobile device lab or you could just use Endtest.