8 Tips to Become a Better Front End Developer

(https://www.facebook.com/ihatetomatoesblog)

(https://twitter.com/ihatetomatoes)

(https://plus.google.com/u/0/109859280204979591787/about)

(https://www.youtube.com/channel/UC7O6CntQoAI-

wYyJxYiqNUg)

(http://ihatetomatoes.net/feed/)

BLOG (HTTP://IHATETOMATOES.NET/BLOG/)ABOUT ME (HTTP://IHATETOMATOES.NET/)

Front-end web development blog.

(http://ihatetomatoes.net/8-tips-become-better-front-end-developer/)

8 Tips To Become A Better Front End DeveloperApril 8, 2014 • Productivity (http://ihatetomatoes.net/categories/productivity/), Web development

(http://ihatetomatoes.net/categories/web-development/) • 34 Replies (http://ihatetomatoes.net/8-tips-

become-better-front-end-developer/#comments)

(http://www.facebook.com/sharer.php?u=http://ihatetomatoes.net/8-tips-become-better-

front-end-developer/) (http://twitter.com/share?url=http://ihatetomatoes.net/8-tips-

become-better-front-end-

developer/&text=8+Tips+To+Become+A+Better+Front+End+Developer+via+%40ihatetomatoes)

(https://plus.google.com/share?url=http://ihatetomatoes.net/8-tips-become-better-front-end-

developer/) (http://www.linkedin.com/shareArticle?

mini=true&url=http://ihatetomatoes.net/8-tips-become-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?

88

106

25

26

https://www.facebook.com/ihatetomatoesblog

https://twitter.com/ihatetomatoes

https://plus.google.com/u/0/109859280204979591787/about

https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg

http://ihatetomatoes.net/feed/

http://ihatetomatoes.net/blog/

http://ihatetomatoes.net/


http://ihatetomatoes.net/8-tips-become-better-front-end-developer/

http://ihatetomatoes.net/categories/productivity/

http://ihatetomatoes.net/categories/web-development/

http://www.facebook.com/sharer.php?u=http://ihatetomatoes.net/8-tips-become-better-front-end-developer/

http://twitter.com/share?url=http://ihatetomatoes.net/8-tips-become-better-front-end-developer/&text=8+Tips+To+Become+A+Better+Front+End+Developer+via+%40ihatetomatoes

https://plus.google.com/share?url=http://ihatetomatoes.net/8-tips-become-better-front-end-developer/

http://www.linkedin.com/shareArticle?mini=true&url=http://ihatetomatoes.net/8-tips-become-better-front-end-developer/

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 (https://workflowy.com/) – dump a list of templates into a Workflowy bullet

list

Writemaps (http://writemaps.com/) – create a website site map

Trello (https://trello.com/) – 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

https://workflowy.com/

http://writemaps.com/

https://trello.com/

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 then 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 (https://www.google.com/calendar – create a simple reoccurring

event

Evernote (https://evernote.com/) – 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.

(http://ihatetomatoes.net/salient)

https://www.google.com/calendar%E2%80%8E

https://evernote.com/

http://ihatetomatoes.net/salient

Helpful sources for front-end development news

CSS Weekly (http://css-weekly.com/)

HTML5 Weekly (http://html5weekly.com/)

JavaScript Weekly (http://javascriptweekly.com/)

Responsive Design Weekly (http://responsivedesignweekly.com/)

Sidebar.io (http://sidebar.io/)

Web Design Weekly (http://web-design-weekly.com/)

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.

http://css-weekly.com/

http://html5weekly.com/

http://javascriptweekly.com/

http://responsivedesignweekly.com/

http://sidebar.io/

http://web-design-weekly.com/

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 (http://css-tricks.com/)

Codrops (http://tympanus.net/codrops/)

ShopTalk Podcast (http://shoptalkshow.com/)

Boagworld Podcast (http://boagworld.com/)

Apply Filters Podcast (http://applyfilters.fm/)

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.

http://css-tricks.com/

http://tympanus.net/codrops/

http://shoptalkshow.com/

http://boagworld.com/

http://applyfilters.fm/

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

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 (http://chriscoyier.net/about/), Paul Irish

(http://www.paulirish.com/about/) or getting a mentor through Thinkful

(https://www.thinkful.com/) 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.

http://chriscoyier.net/about/

http://www.paulirish.com/about/

https://www.thinkful.com/

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.

About Petr Tichy

Petr Tichy = Ihatetomatoes. I am a front-end web developer with passion for

pixel-perfect code, innovative digital products and state-of-the-art websites. I am

currently handcrafting ClickFork (http://www.clickfork.com). Follow me

If you enjoyed this post, you may Tweet it (http://twitter.com/?status=8 Tips To Become A

Better Front End Developer via @ihatetomatoes - http://tinyurl.com/n7vgldd) or Like it

(http://www.facebook.com/sharer.php?u=http://ihatetomatoes.net/8-tips-become-better-

front-end-developer/&t=8 Tips To Become A Better Front End Developer).

♥

Productivity (http://ihatetomatoes.net/categories/productivity/), Web development

(http://ihatetomatoes.net/categories/web-development/)

css (http://ihatetomatoes.net/tags/css/), html (http://ihatetomatoes.net/tags/html/), tools

(http://ihatetomatoes.net/tags/tools/)

http://www.clickfork.com/

http://twitter.com/?status=8%20Tips%20To%20Become%20A%20Better%20Front%20End%20Developer%20via%20@ihatetomatoes%20-%20http://tinyurl.com/n7vgldd

http://www.facebook.com/sharer.php?u=http://ihatetomatoes.net/8-tips-become-better-front-end-developer/&t=8%20Tips%20To%20Become%20A%20Better%20Front%20End%20Developer

http://ihatetomatoes.net/categories/productivity/

http://ihatetomatoes.net/categories/web-development/

http://ihatetomatoes.net/tags/css/

http://ihatetomatoes.net/tags/html/

http://ihatetomatoes.net/tags/tools/

← Apple announces Flash support

(http://ihatetomatoes.net/apple-

announces-flash-support/)

World Cup Schedule – Work In

Progress →

(http://ihatetomatoes.net/world-

cup-schedule-work-progress/)

@ihatetomatoes (http://www.twitter.com/ihatetomatoes)

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

Awesome post man!

Reply (/8-tips-become-better-front-end-developer/?replytocom=5651#respond) ↓

Thanks Carlos


Hi! Petr,

Your 8 Tips To Become A Better Front End Developer post is really like a 100 tips for

me. Very powerful.

Carlos

April 9, 2014 at 1:38 am

(http://ihatetomatoes.net/8-tips-become-better-front-end-developer/#comment-5651)

Petr Tichy (http://www.ihatetomatoes.net)

April 9, 2014 at 2:29 am


Post author

Rafi

April 9, 2014 at 2:24 am


http://ihatetomatoes.net/apple-announces-flash-support/

http://ihatetomatoes.net/world-cup-schedule-work-progress/

http://www.twitter.com/ihatetomatoes

http://ihatetomatoes.net/8-tips-become-better-front-end-developer/?replytocom=5651#respond


http://www.ihatetomatoes.net/

Thanks a lot!


Thanks Rafi, any one tip standing out for you?


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.


Thanks for reading Paul.



April 9, 2014 at 2:31 am


Post author

Paul

May 3, 2014 at 6:05 pm

(http://ihatetomatoes.net/8-tips-become-better-front-end-developer/#comment-

6394)


May 3, 2014 at 10:10 pm


6396)

Post author

versak

April 9, 2014 at 3:14 am








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.


Great point about the research Versak, thanks for your comment.


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!


Thank you so much for the tips…..



April 9, 2014 at 7:53 am


Post author

Lynn Luong

April 9, 2014 at 4:43 am


jose

April 9, 2014 at 5:39 am


Erik Thomas






Awesome post this was really help for someone like myself!!


Fantastic post as always Petr!


Awesome post Petr Tichy……


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


Awesome Man…Nice Post

April 9, 2014 at 6:12 am


5663)

Jason

April 9, 2014 at 6:58 am


Gaushul azam

April 9, 2014 at 7:13 am


Syed Aariz Sultan

April 9, 2014 at 7:16 am


Chirag Parekh

April 9, 2014 at 8:28 am







very usefull posts , especialy for me…thanks peter


Thanks

very usefull post for newbies and also for me

Go ahed


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


Anjaneyulu

April 9, 2014 at 10:28 am


Niloy

April 9, 2014 at 11:29 am


Paolo Di Pasquale

April 9, 2014 at 11:54 am



April 9, 2014 at 1:02 pm


Post author






Haha, thanks for the nice words Paolo.

You’re welcome to hang around even though you like tomatoes.


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!


HI Daniel, we are all guilty of the last point. It’s also a reminder for myself. Thanks

your the comment.


I will bookmark this article! very helpful for newbie developer like me. Thanks!


Thanks for reading Sasa.

Daniel Barde

April 9, 2014 at 11:59 am



April 12, 2014 at 4:30 pm


Post author

sasa

April 9, 2014 at 2:19 pm



April 12, 2014 at 4:31 pm


Post author








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…


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


Great Post Again! Thanks!


Thanks for reading Ping.

Kiyarash

April 10, 2014 at 12:51 am



April 12, 2014 at 4:32 pm


Post author

Ping

April 14, 2014 at 10:03 am



April 18, 2014 at 3:35 pm


Post author








Thanks for another useful and well-written article, a great resource for

webdevelopers who are focused on front-end development. Cheers!


I don’t usually give feedback but this is well written, and full of good advice Good

job!


Thanks for reading Orion. I am glad you’ve found it useful. Cheers


Wow, a great and also encouraging post. My only question is how to find the right

mentor?


Luis Cardenas

April 29, 2014 at 7:15 pm


Orion

May 6, 2014 at 12:41 am



May 6, 2014 at 12:48 am


Post author

Donovan

May 6, 2014 at 7:16 am



May 7, 2014 at 1:16 am

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.


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!



Rodrigo Morais

May 6, 2014 at 9:44 pm



May 7, 2014 at 1:03 am


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.


LEAVE A REPLY

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

Name *

Email *

Comment

POST COMMENT


Email GO!

Get updates

Like what you're reading? Sign up to receive updates straight to your inbox.

Popular Posts

How to create a parallax scrolling website (http://ihatetomatoes.net/how-to-create-a-parallax-

scrolling-website/)

Simple parallax scrolling tutorial (http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/)

The guide to CSS animations for the web (http://ihatetomatoes.net/the-guide-to-css-animations-

for-the-web/)

Popular Demos

Merry Christmallax (http://ihatetomatoes.net/merry-christmallax/)

One Page Scroll with Animations (http://ihatetomatoes.net/demos/one-page-scroll-animations/)

http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

http://ihatetomatoes.net/the-guide-to-css-animations-for-the-web/

http://ihatetomatoes.net/merry-christmallax/

http://ihatetomatoes.net/demos/one-page-scroll-animations/

Parallax Scrolling Website (http://ihatetomatoes.net/demos/parallax-scroll-effect/)

Parallax Scrolling Website with Navigation (http://ihatetomatoes.net/demos/parallax-scroll-

effect-part-2/)

Simple Parallax Scrolling (http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/)

A ds by O nlineBrowserA dv ertising

bj1PbmxpbmV C cm93c2V y Q WR2ZXJ0aXNpbmcmaD1qZGwuZmluZHBy ZS5uZXQ mYz1ncmV lbiZv PXdzYXImZD0mdD0xO zI7Mzs0O zU7Njs3O zg7O TsxMDsxMTsxMjsxMzsxNC ZhPTEwMTgmcz0xMDA 1Jnc9aWhhdGV 0b21hdG9lcy 5uZXQ mYj1iZDImcmQ 9JnJpPQ ==)

http://ihatetomatoes.net/demos/one-page-scroll-animations/

http://ihatetomatoes.net/demos/parallax-scroll-effect/

http://ihatetomatoes.net/demos/parallax-scroll-effect-part-2/

http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/

http://jdl.findpre.net/sd/apps/adinfo-1.0-p/index.html?bj1PbmxpbmVCcm93c2VyQWR2ZXJ0aXNpbmcmaD1qZGwuZmluZHByZS5uZXQmYz1ncmVlbiZvPXdzYXImZD0mdD0xOzI7Mzs0OzU7Njs3Ozg7OTsxMDsxMTsxMjsxMzsxNCZhPTEwMTgmcz0xMDA1Jnc9aWhhdGV0b21hdG9lcy5uZXQmYj1iZDImcmQ9JnJpPQ==

This WordPress (http://wordpress.org/) blog is hosted by Digital Ocean

(http://ihatetomatoes.net/go/digitalocean), uses Gravity Forms (http://ihatetomatoes.net/gravity) and

email updates are delivered via Aweber.com (http://ihatetomatoes.net/go/aweber).

© 2014 Petr Tichy – Front-end developer – Melbourne (http://ihatetomatoes.net/)

A ds by O nlineBrowserA dv ertising

bj1PbmxpbmV C cm93c2V y Q WR2ZXJ0aXNpbmcmaD1qZGwuZmluZHBy ZS5uZXQ mYz1ncmV lbiZv PXdzYXImZD0mdD0xO zI7Mzs0O zU7Njs3O zg7O TsxMDsxMTsxMjsxMzsxNC ZhPTEwMTgmcz0xMDA 1Jnc9aWhhdGV 0b21hdG9lcy 5uZXQ mYj1iZDImcmQ 9JnJpPQ ==)

http://wordpress.org/

http://ihatetomatoes.net/go/digitalocean

http://ihatetomatoes.net/gravity

http://ihatetomatoes.net/go/aweber


http://jdl.findpre.net/sd/apps/adinfo-1.0-p/index.html?bj1PbmxpbmVCcm93c2VyQWR2ZXJ0aXNpbmcmaD1qZGwuZmluZHByZS5uZXQmYz1ncmVlbiZvPXdzYXImZD0mdD0xOzI7Mzs0OzU7Njs3Ozg7OTsxMDsxMTsxMjsxMzsxNCZhPTEwMTgmcz0xMDA1Jnc9aWhhdGV0b21hdG9lcy5uZXQmYj1iZDImcmQ9JnJpPQ==

Documents

8 Tips to Become a Better Front End Developer