Recently, some people approached me asking for advice on how to get started as a front-end developer. With its ever changing technologies and frameworks, it can be quite difficult and overwhelming starting out in the field of front-end development.
In this blog post, you can find 10 tips on how to become a front-end developer!
Front-end vs Back-end vs Full Stack
As a beginner, you might wonder which area of web development to pursue. If you’re not 100% sure which one to follow then I recommend you read this blog post on how to become a full stack developer.
If you’re already sure about front-end development, go ahead and read on.
Front-end development skills needed
When starting out in front-end, you might not be sure where to start. There are so many options available not only programming language-wise, but regarding tools, frameworks, and technologies as well.
So make sure to be prepared of open sea.
Or as Ivan would state it:
Front-end development is like an ocean. You happen to have a ship, but no map. First learn the shallow waters, then go deep.
1. Learn HTML & CSS. And become good at it.
I guess there’s no way around it. Learn HTML & CSS. Why? Because the basics matter.
There are all kinds of different online courses available on how to get started with HTML and CSS. First things first. Sign up at Online courses like Coursera or Team Treehouse. After finishing some initial courses, go ahead and create some static web pages and iterate over and over again.
I also recommend developing some small UI elements for practicing your newly learned HTML & CSS skills. Codepen.io is a great playground for that. Browse other people’s projects and participate in the community there.
2. Build things.
Don’t forget to challenge yourself by building first responsive elements.
So there’s only one way to becoming better at what you’re doing: Keep learning, keep building.
Putting these two together, build to learn! There’s no better way to learn than to get your hands dirty. You’ve probably heard this a hundred times by now, but it is for a good reason why this is the advice most often dished out.
3. Read, read, read
I guess there’s no way around this. Believe it or not. Your reading skills greatly influence your path to becoming a great front-end developer. Especially when starting out, there’s a lot of reading required. Why?
At first you’ll probably read a lot of articles, guides and manuals on how to do different things. You’ll also start reading other people’s code.
Or as Adam (UX Lead at CoachUp) would state:
4. There’s more to front-end development than building a website
If you followed my tips from 1 to 3, you have probably already done a course or have read a lot of tutorials and are now able to throw together a website.
However, that doesn’t equate to being a “front-end developer”. Knowing how to build a website is a very small part of the front-end puzzle.
I apologise if that sounds demotivating. But that’s actually the case.
There is a whole load of topics that you still should learn about. If we consider performance, testing, QA and many other areas, then you really need to become a deep diver as a front-end developer.
5. Know your tools
As you start your journey with front-end development, you will need to decide on your toolkit and the services you need to to make your life easier. Learning about the different tooling options is an important thing. Great tools will help you enhance and automate your front-end development workflow.
Additionally, node, npm, bower and many more excellent tools are there to facilitate your daily work. And don’t forget about versioning. 😉
6. Version control will save your life.
OK, maybe this sounds a bit too exaggerated. But trust me on that. Version control will save you some sleepless nights.
Instead of trying something and having it blow up in your face or hitting command+z a trillion times, you can simply trash your branch and roll back to what was working previously.
So make sure to become an expert at Git.
It will not only save you countless hours, but it will also give you more confidence to try new things. (Thanks Rob for pointing that out!)
7. Be the middleman
As a front-end developer, you need to be aware that you put yourself in some kind of middleman role. As a middleman, you are in touch with QA people, clients, UX experts as well as other developers. You will need to take different perspectives into consideration.
Or as Kyle stated it:
Always keep in my what good UX is not only from a user’s perspective, but also from other developers perspective.
8. Do not rush.
Along the way, you will ask yourself why you do this and you may want to just stop. It may be tempting to just give up. But don’t. If you’re at that point, I have only one advice for you:
Do. not. give. up.
Set aside one or two hours every other day to learn. Take a lot of breaks and make sure that you really know the basics. And never rush.
The basics form the foundation which will help you get to the next level.
If you feel stuck, don’t be afraid to ask questions. Everyone goes through this phase and having the patience to stick it out will help you come out in the end as a pro in front-end development.
9. Dive deep into frameworks
So, you made it until here. Awesome!
Now it’s time to get involved with certain frameworks. Start by looking at the more popular ones and work out for yourself why they do things in a certain way.
Figure out whether each one is a good thing. Understand how frameworks and industry standards have changed over the last couple of years. Looking at older frameworks, you will probably discover approaches and code which are now obsolete.
Do not forget: Sometimes, using a framework isn’t the best option, but most of the time it’s well worth knowing about them.
Thanks for the tip Robbie!
10. Get involved with open source projects
Contribute to FOSS on GitHub. Don’t shy away from big frameworks that seem well established. Even framework authors make mistakes.
You may be spending most of your time reading code but don’t see it as a waste of time.
You will pick up good habits and practices along the way and will gain some experience working with other developers. When you feel ready to write some code, go through issues on the repository and pick one problem which is manageable for you.
Getting involved with various projects, especially open source, will not only make you a better front-end developer, but it will also help you build up your very own online brand as an active, experienced developer.
Wrapping it up.
The path to becoming a front-end developer will definitely take some time. As presented in this blog post, becoming a front-end developer is not only about learning various front-end frameworks and programming languages. It’s about the interaction, responsibilities and roles as a front-end developer.
Because the web is a rapidly evolving universe, great front-end developers should never stop learning. Even little things like following front-end experts on twitter will have impact on your learning curve.
You need to have some patience to get there. Rushing doesn’t make sense because it won’t make you happy. Never forget to have fun while learning and experimenting.
This article was brought to you by Usersnap – a visual bug tracking tool for every web project.
What no one tells you about working in web development
Web development is probably one of the most interesting industries to be in right now. Whether you’re thinking about the Silicon Valley, the startup scenes or any new 1 billion dollar idea. It’s most likely that it has something to do with web development or at least with software in a more general sense. Web…
A practical guide to building fast web applications in the cloud (with PHP)
This post originally appeared on loige.co, written by Luciano Mammino. Luciano is a web developer & entrepreneur from Italy. In this article, Luciano highlighted some of the most common principles you should consider while building high performing web applications (specifically on the backend part). The following concepts discussed here can be applied to any language and framework.…
Why no one talks about agile testing…
… or how to be the first one who gets going with agile testing. When working on digital projects and products, you probably encounter the term ‘agile‘ a lot. The word agile is widely used (and sometimes misused). It refers to the methodology of project management which strives to establish certain principles of collaboration, flexibility…
Fundamentals on setting up your bug reporting workflow
With all these emerging new devices – from mobile devices, to wearables, to VR, to smart devices – having a proper bug reporting workflow in place becomes quite a challenge. Building web applications in particular might seem quite painful due to the different screen sizes of the used devices. It can even be worse than…
Get started in web development today. With these 9 basic tips everyone should know.
I have recently published a piece on “what no one tells you about working in web development” in which I shared some insights on how working on web development projects, well, works. Starting out in web development can be quite difficult, but it is a worthwhile adventure if well prepared. Here’s my web development tutorial…
What I’ve learned about growth after 1 year in a SaaS business
My journey with Usersnap started about a year ago, on November 3rd 2014. At that point, I’ve already gained some experience as a project manager in a digital agency and a media company. So I was already working on fast-moving projects beforehand. However, the last 12 months have been an incredible journey with a lot…
Streamline your client approval process
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.