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 Developer
April 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 gure it out myself?
88
106
25
26
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 rst mistake and surprisingly very common even with senior developers is that most
of us dont plan.
Its boring, we dont know how to plan and we feel that its not our job.
Thats 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 nish on time everyday
And it doesnt 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 benet in the point #2.
Helpful tools for planning
Workowy (https://workowy.com/) dump a list of templates into a Workowy 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 eective 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 wont be delivered on time.
Proactively highlighting any roadblocks or delays is a very powerful way to keep everyone
happy.
Its ok if things are taking longer then initially planned, but its not ok to keeping this for
yourself.
Youre stacked with a bug or cant gure 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 doesnt 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 eort to
explore and understand them.
The bad and at the same time the beauty of front-end development is that its moving
forward very fast.
This means that you can quickly become an expert but also your skills can become very
quickly outdated.
Tip: You dont 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)
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 lter 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 dont 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, thats 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 doesnt 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://applylters.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. Dont 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 nish much smoother for everyone.
Tip: Dont 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 dont say no to everything.
Did you say no, sir?
6. Dont say NO to everything
Contradictory to the previous point, but also important attribute of a highly eective
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 rst 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?
Thats 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 dont 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 oce will sooner or later take its toll.
Thats why its 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,
dont 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 wont make you
feel refreshed. Anything that gets your blood pumping will.
I am o 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/)
Apple announces Flash support

(http://ihatetomatoes.net/apple-
announces-ash-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
Ra
April 9, 2014 at 2:24 am
Thanks a lot!
Thanks Ra, 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 benecial 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 surng 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. Im currently juggling multiple side
websites as well as a full time job. All the tips above are exactly how im keeping myself
sane! Im only lacking a mentor Lets 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 eort
man Cheers
Awesome ManNice 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 methanks peter
Thanks
very usefull post for newbies and also for me
Go ahed
This is the rst 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 cant 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.
Youre 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 o my
computer but I guess its time I lay o a little time time to stay healthy, thanks again
Petr, great post!
HI Daniel, we are all guilty of the last point. Its 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 stu, I will tell
to myself, I can do the same and immediately in next project, Ill 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 brainso 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 dont usually give feedback but this is well written, and full of good advice Good
job!
Thanks for reading Orion. I am glad youve found it useful. Cheers
Wow, a great and also encouraging post. My only question is how to nd 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 nd 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 dont speak French
and I cant express myself in English in the same way I do in my native language (and
you hardly nd French people who speaks English as well). Sometimes I get really
stressed watching people doing exactly what you said whats 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 dont have another option
do you?
Thats 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 elds 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/)
Parallax Scrolling Website (http://ihatetomatoes.net/demos/parallax-scroll-eect/)
Parallax Scrolling Website with Navigation (http://ihatetomatoes.net/demos/parallax-scroll-
eect-part-2/)
Simple Parallax Scrolling (http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/)
Ads by OnlineBrowserAdv ertising
bj1PbmxpbmV Ccm93c2V y QWR2ZXJ0aXNpbmcmaD1qZGwuZmluZHBy ZS5uZXQmYz1ncmV lbiZv PXdzYXImZD0mdD0xOzI7Mzs0OzU7Njs3Ozg7OTsxMDsxMTsxMjsxMzsxNCZhPTEwMTgmcz0xMDA1Jnc9aWhhdGV 0b21hdG9lcy 5uZXQmYj1iZDImcmQ9JnJpPQ==)

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/)
Ads by OnlineBrowserAdv ertising
bj1PbmxpbmV Ccm93c2V y QWR2ZXJ0aXNpbmcmaD1qZGwuZmluZHBy ZS5uZXQmYz1ncmV lbiZv PXdzYXImZD0mdD0xOzI7Mzs0OzU7Njs3Ozg7OTsxMDsxMTsxMjsxMzsxNCZhPTEwMTgmcz0xMDA1Jnc9aWhhdGV 0b21hdG9lcy 5uZXQmYj1iZDImcmQ9JnJpPQ==)

8 Tips To Become A Better Front End Developer

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

8 Tips To Become A Better Front End Developer

Uploaded by

Copyright:

Available Formats

(https://www.facebook.

Front-end web development blog.

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

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

Apple announces Flash support

You might also like