6 months ago I handed in notice at BP as a Chemical Engineer with the idea that I was going to become a Web Developer. At the time, I had no clue how I was going to get employed. My 'portfolio' consisted of a site I'd built for a friend using a page builder and not much more than my word that I knew some code.
93digital (a WordPress agency based in London) took a chance on me and 3 months later I'm so ridiculously proud to say that they have taken me on full time as part of their dev team.
In this article, I want to share a little bit about what it was like being chucked in the deep end of a world that is pretty alien to me and 6 of the key things I've learned in the process. I'll also share some of my favourite resources to help you not to make the same mistakes I did. If you are just starting or you are looking to get involved, this one's for you.
This was just enough to get me through the door, but once I was part of the team I learned that there is so much more to being a frontend developer than I previously thought. Here are my top 6 takeaways from my first 3 months in the industry and some great resources to help you out if you are interested.
Honestly, you are.
You've probably heard of the phrase 'Imposter Syndrome'. There are many different spins on its exact cause/definition but for me it is a feeling you get when you are dealing with things you are not 'qualified' for.
Let me tell you, you might not have a piece of paper that says you know something about the web but you are almost certainly way more valuable than you think you are.
In just over a month of being there, I was collaborating with the lead front end developer and within 3 months I was building the front end for an entire project by myself.
Don't get me wrong, my input was far from seamless. Sometimes I messed up and sometimes I needed a lot of help but I still gave value and contributed and that did wonders for any form of imposter syndrome that crept my way.
Don't let the fear of not knowing enough stop you from trying to get your foot in the door as quickly as possible. You learn infinitely faster on a team and remember that you don't have to be great right now, you just have to show up with the right attitude and the potential to be great.
Our lead developer always says 2 things to me; extensible and maintainable.
One thing I learned very quickly was that how you write code is probably more important than knowing the language itself.
If you have been learning around this space for even a short while, this probably isn't news to you but let me tell you, implementing this principle is far harder than knowing it.
For example, I love this article on how architect good CSS.
In essence, your code should be contained, easy to understand and modular. I thought I understood this until it came to doing my first project.
Short story - after developing a component for a site I thought I'd just go and copy and paste this code everywhere in the site that it exists top to save me time. Bad move. This makes maintenance a total nightmare. Now you have multiple components scattered across the site with the same class names. So what happens if you want to change just 1 of them? Yep, you guessed it, they all change.
This brings me on to my second point here and that is to think before you code. Get a pen and paper out and start making diagrams and notes on how you would like to structure your code. This will help in creating a framework from which you code moving forward because humans are prone to making poor decisions under time constraints and pressure.
Learn git like you needed it yesterday.
This was my biggest hold up when collaborating with other devs. You will use it every day and it's so important to understand in any team.
On my first project, I would freeze up whenever I got a merge conflict or if a push to the server was rejected.
I found that it's all well and good knowing git commands but understanding GIT concepts goes a long way to levelling you up.
If you really want to understand git, check this article out.
It's not really. More often than not things work fine, but thinking like this helped me approach errors and debugging.
In my first month, any form of error would paralyse me and I thought getting errors meant I was doing a bad job but this isn't the case.
I would watch the other devs when they helped me solve my errors and sometimes they would take over an hour to fix but they always remained calm, persistent and logical in getting to the bottom of the problem. I saw that the best devs take errors in their stride and dealing with them just as much part of the process as writing code.
As a dev, your job is just as much to fix broken things as it is to create new things. You are, as our lead dev put it to me, a digital fireman.
For debugging and problem-solving, the Chrome dev tools are your best friend. If you aren't used to using them regularly, start making them part of your everyday workflow.
debuggeranywhere in your JS scripts will cause the browser console to open in debugging mode. Here you can hover over variables to see what they are holding and 'watch' them as they change value
Speed up your workflow by developing components inside the 'elements' pane rather than your IDE.
For front end devs especially, this is key. My first piece of real constructive criticism was that my work didn't look like the design.
To the untrained eye, it did, but as a frontend developer, your client is, in essence, the designer and they will spot a pixel off from a mile away.
It is your job to bring their creations and visions to life and details matter from the margins to the letter spacing.
I use this open-source ruler app just as much as I use my IDE and it is a total lifesaver.
if you think it looks right, inspect it, measure it, is it a pixel off? Good, change it. Trust me, it matters.
One of the best and worse things about the web is information overload. In some ways, it's the easiest and hardest time to learn web development because there are so many different resources out there to help you. If you don't know what to learn and when these articles will help:
That's it! Let me know what you think :)