A message for all grumpy developers

8 Tips To Become A Better Front End Developer

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

Planning Tools for Front End Developers

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

Reminder Tools for Front End Developers

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

Newsletters for Front End Developers

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

Invest in your career

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

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

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 things again 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

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

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.

Conclusion

Agree or disagree with any of my tips? What would be your suggestions and tips for a felow front-end developers? What helped you to bring your career to the next level?

Have I missed anything? Let me know in the comments.

8 Tips for Front End Developers

115 thoughts on “8 Tips To Become A Better Front End Developer”

  2. Rafi

    Hi! Petr,
    Your 8 Tips To Become A Better Front End Developer post is really like a 100 tips for me. Very powerful.

    Thanks a lot!

    Reply ↓
      1. Paul

        The No. 2 tip stands out for me. Sounds so easy yet many developers fail to stay proactive. Extremely beneficial I tell you.

        Awesome list.

        Reply ↓
  3. versak

    Been a front end designer for over 6 years professionally (more freelancing) and found that the more research I do (or, web surfing if you will) the better feel I have for current design trends and tools. Trying to create a look that is original yet current can be tough, especially with things like Bootstrap doing so much of the work for you. I like to inspire myself with many styles of sites and even standard art concepts and theories.

    The biggest challenge I have is color scheming.

    Reply ↓
  4. Lynn Luong

    This is great! Thanks for the quick reminders. I’m currently juggling multiple side websites as well as a full time job. All the tips above are exactly how i’m keeping myself sane! I’m only lacking a mentor 🙁 Let’s not forget to test, test, and test!

    Reply ↓
  9. Syed Aariz Sultan

    Very very nice post peter ! I hope it will help me out in my career. Not promise but will give it a shot and will try to practice it in my daily routine too. Thankx for the effort man Cheers 🙂

    Reply ↓
  13. Paolo Di Pasquale

    This is the first time I have read an article on this site. I was made aware of it via Twitter and I must say I am impressed with the article and the design and layout of the site.

    I can’t agree with the domain name though, I love tomatoes!!!

    Thanks,
    Paolo

    Reply ↓
  14. Daniel Barde

    Great post, missing out on some things though but will implement them starting this weekend, especially on the last tip that deals with the health, am hardly off my computer but I guess it’s time I lay off a little time time to stay healthy, thanks again Petr, great post!

    Reply ↓
  16. Kiyarash

    That was a great complex of important things.
    GOD bless you, I enjoy reading this…
    I learned and believed that a good developer have to be brave…
    Every time I see a very advance and complicated application or a special stuff, I will tell to myself, I can do the same… and immediately in next project, I’ll start to try it out…
    I think the best developer like you, are human just like me… 😉
    So, if you could learn and write an advance app, I can either…
    Thank you again…

    Reply ↓
    1. Petr Tichy Post author

      Exactly Kiyarash, we are just human. Two legs, two hands and a brain…so lets create something awesome. Thanks for reading and your comment. Cheers

      Reply ↓
  18. Luis Cardenas

    Thanks for another useful and well-written article, a great resource for webdevelopers who are focused on front-end development. Cheers!

    Reply ↓
    1. Petr Tichy Post author

      Thanks for reading Donovan. You might find your mentor at work, some more experienced developer. Follow the right people on Twitter or stay in touch with my blog.

      I will be sharing more tips not just from the coding category but also some soft skills that are so ofter overlooked by most of the front-end developers.

      Reply ↓
  21. Rodrigo Morais

    Petr, this post just came right in time for me. I am in France since 2 months ago working in a 3 month e-commerce. But as I never left my country (Brazil) since I was born, this is being a truly “getting out of comfort zone” lesson. I don’t speak French and I can’t express myself in English in the same way I do in my native language (and you hardly find French people who speaks English as well). Sometimes I get really stressed watching people doing exactly what you said what’s wrong. I confess that in the beginning I did wrong things sometimes because being here makes me afraid of comunicating, and being rejected exposing my ideas to make the project better. Fortunately things are going great and people are recognizing my work for doing things like you said (lots of Google Drive shared to-dos made things faster and all the team could know what was my status without asking for it).

    Reading your post makes me feel that I am in the right way, of course, there is alot to learn yet.

    Keep the nice work!

    Reply ↓
    1. Petr Tichy Post author

      Hey Rodrigo, thanks for reading and for sharing your story. Your English is perfect and I am sure you will quickly learn French as well. You don’t have another option do you?

      That’s how web development also works. You will learn how to swim when you are thrown into the sea.

      Good luck with your journey.

      Reply ↓
  22. Chuyi Huang

    I like this post. Can I translate this article to other language? I will show the source link.

    Reply ↓
    1. Petr Tichy Post author

      Hi Chuyi, sure you can translate it, please include a link to the original article and a clear credits in the opening of the translated article. Cheers

      Reply ↓
      1. Chuyi Huang

        Thank you. I will include a link to the original article and a clear credits in the opening.

        Reply ↓
  23. David

    Nice post Petr. Trello was exactly the kind of tool I had been looking for to track project development.
    Some of the other newsletter and blogs were great as well.

    So I work full time around a lot of non-web developers. I really need a mentor in something like .js or .php so any advice on finding mentors like that is greatly appreciated. I think Thinkful becomes costly when you sign up which isn’t really my cup of tea.

    Reply ↓
    1. Petr Tichy Post author

      Thanks David. The other option to find a mentor is to regularly attend meetups, user groups and conferences in your local area and build a relationship with more experienced developers that way.

      Reply ↓
  25. Tahir Taous

    One more Tip:

    Don”t waste time learning everything from scratch, use available tools and frameworks to make workflow faster. For example as a beginner or intermediate developers you can use Twitter Bootstrap and foundation framework to create responsive design, no need to waste time learning responsive web design from scratch.
    Use Emmet for faster coding sitepoint.com/faster-workflow-mastering-emmet-part-1/ may be helpful.

    Reply ↓
    1. Petr Tichy Post author

      Hey Tahir, thanks for the comment. Love Emmet, hope everyone is also using it. I agree that using frameworks helps speed up the development, but if someone is in a phase of learning how responsive grid works, there isn’t a better way to learn then try and create your own from scratch. I got your point though. Cheers

      Reply ↓
  26. Simon Duun

    Just read your article. It gave me alot lot of courage to keep on learning and stay healthy. Thanks! 🙂

    Reply ↓
  27. Web Designers in Coimbatore

    Great blog. Your blog teaches lot of information to me, that helps me to find better way to reach my goal as a front end developer.. Thanks for sharing an informative blog.

    Reply ↓
  28. La Casita Del Cuco

    Realy great tips, have changed my way of working drasticaly after a few fall backs and made up a list in mind how I should work. Nice to read that a few of your tips go along with mine and that others will improve my work. For sure will check out a few of the tools as well.

    Reply ↓
  34. Huong

    This is awsome. Your post is very detail, every step is clearly and helpful, and i love number eight advice “Stay active”. Thanks you so much for sharing

    Reply ↓
    1. Petr Tichy Post author

      You’re welcome Huong. I think that the “Stay active” point is the most important from all the tips.

      Spending too much time in from of the screen myself:(

      Reply ↓
  37. John

    Thanks for the advice sir! You’re very awesome and inspiring. Hope i do well in the future, im a web development student and looking forward to be a Front End Developer in the future! I am very eager to learn and i think your tips will help me a lot. Thanks for sharing!

    Reply ↓
  38. Nancy

    Thanks for the perfect write-up. I am working towards front end development. Your post is certainly crisp and with apt references.

    Reply ↓
  39. Jonathan

    Really thanks petr for sharing your knowledge. This post was really great and as a newbie like me, it really helps me a lot to move to another steps. GOD Bless.

    Reply ↓
  43. Jakub Kohout

    Thank you very much for this amazing article. I already see what will improve my workflow and myself too 🙂

    btw. I wanted to ask, if you know about some good website, where I could hire some good html/css coder from India or other eastern countries?

    Once more, thank you very much.
    – sorry for my english 🙂

    Reply ↓
  44. Dennis Park

    Hi, There! It’s very good arcticle to me!! Thank you
    I’d like to translate and share this article for korean guys, if you agree with it.

    Reply ↓
  46. Lemosys Infotech

    This post is very old but given detail and point is always new and useful for user.like me i learn about this.and this blog is very helpful that time we develop new website.

    Reply ↓
  47. Casey232

    I can suggest you to visit our blog http://lezgro.com/blog/what-can-go-wrong-with-web-front-end/
    Here you can also found an interesting information about front end development.

    Reply ↓
  48. Salaheddine

    Great Tips & advice, such a great ressource to regain focus and self-motivation (Helpd me to know what should I learn and what to do to keep the good things up, after a very very long nap – I felt retarded after I read about PHP 7, If you know what I mean XD).

    I so greatful for the links you provided, and looking forward to exlpore them all, that is a very good thing which will save me priceless time looking for deferent types of ressources.

    Hope I stil have a good english, take care dear Petr!

    Thanks a lot Man !

    Reply ↓
      1. Salaheddine

        All of them!

        But the most imorptant thing for me is that you gave us such helpful links to many good ressources, and that is the most heplful thing.

        Thanks again !

        Reply ↓
  49. Chandra

    amazing stuff, thanks for sharing.
    After holidays I am working from tomorrow.
    This article is like a power pack.

    cheers
    Chandra

    Reply ↓
      1. reza Khosroshahi

        This sentence “Being honest is the key, but also make sure you don’t say no to everything.” For me very useful!

        Reply ↓
  53. behnaz changizi

    Hey,
    A small typo “It’s ok if things are taking longer then initially planned, but it’s not ok to keeping this for yourself.” then -> than!
    Thanks,
    Behnaz

    Reply ↓
  54. Khusanbek

    Very straightforward and useful article. Especially I liked the part about investing time for self development. Most of the time developers don’t work on their selves and so use the same junk of code over and over again while there are new frameworks and libraries coming up. At any time the demand in the market may shift to new framework as now there is huge demand on bootstrap development, so we always have to update our knowledge. Once more, thanks for this article.

    Reply ↓
  60. MJ Shaine

    Wow great article!
    It helps me a lot on how to a face client and bosses when there is upcoming project. And especially taking care of your health.
    Looking forward for more articles.

    Cheers,
    MJ

    Reply ↓
  65. BYUN Sangpil

    Thank you for sharing Tips.
    It’s looks like common but very very helpful.

    I will escape from drown in the sea of average developers.!!

    Thank you very much.

    Reply ↓
  70. Appers

    Its pretty common to hear the title of Front End Developer being thrown … This became a big problem for me when I was trying to learn the ropes. … Once you feel you have a good understanding of the basics of JavaScript you can go all the way thanks for the share.

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.