From bedroom to agency: How to get your first front end development job

Getting your first development job is hard – really hard. Job offers usually require at least one year of experience for a junior position, there are tons of different languages to choose from, hundreds of boot camps, and thousands of articles and tutorials to read. All of this can be daunting when you're first starting out.

So where do you start? In this blog post we'll cover CV writing, portfolio building and tech busting to help you land that first dream job.

What do you want to do?

The first thing when even considering getting into development is finding out what you want to do. It may seem simple, but it will determine what and how you learn to get your foot in the door.

Front end or back end? What does that even mean?

A front-end developer takes care of the general aesthetics of a website, which is usually what the user sees, touches and experiences. Generally referred to as the trifecta of web development – HTML, CSS (Cascading Style Sheets) and Javascript.

A back-end developer is responsible for communicating with the server, database and the main logic of the web application.

What language?

There are vast amounts of languages to choose from and it's hard to know where to start. Most agencies hiring a junior developer are looking for someone who can translate designs into a working resource or website, so start with HTML. A solid understanding of the semantic markup of a page and what each tag does will put you in good stead. 

The next step would be to learn CSS, which is responsible for the visual styling of a website and defines how the website will look on screens, paper and other media.

Javascript is responsible for interaction, animation, and communicating with the backend of a website. It’s a great programming language to start off with as HTML, CSS and Javascript are inherently easier to understand than the more complex back-end languages. It’s also the easiest and fastest path into a programming life.

Be careful in your approach to online tutorials. Most of them teach the concept first and leave the fun stuff until the end, which can leave you a little deflated.

How to make a dev portfolio

A solid portfolio is as important as your CV, if not more! Showing your potential employers that you can do what you say you can is crucial.

A common mistake when making a portfolio is to overcomplicate things. Remember, with web development you are responsible for translating designs, not creating them. Don’t be afraid of copying other people’s designs. After all, it’s what you’ll be doing when you get your first job.

I used to obsess about how my builds looked, and spent hours and hours on Adobe XD trying to perfect my designs. Whilst it’s good to have a solid grasp on UI/UX design fundamentals (colour & contrast, whitespace, visual hierarchy, complexity vs simplicity, consistency and scale), you need to learn to code, not design. 

Check out this video from Gary Simon, a very talented designer and developer, who briefly goes over design fundamentals.

Visit Theme Forest, Dribbble and awwwards to get some inspiration. Then, attempt to copy a design you like using any framework or technology you see fit. This will show to your future employer that you’re comfortable with translating designs

Create a profile site

The next step is to create a profile site. Go out and buy a relevant domain (preferably using your own name) and hosting. Get your feet wet with DigitalOcean and spin up your own server – this will give you a huge boost in server side technologies. 

Try to avoid shared hosting, as they are extremely slow, and are rarely used in a professional environment. Medium have a great article on how to host a static website on DigitalOcean.

Obtain an email address (such as info@yourname.com) and create a well-laid-out email signature. This shows potential employers you are passionate and take your work seriously. Take some time to create a well-crafted website that you’re proud of, but remember: don’t make it overly complicated.

Remember: Employers don’t want to see the project you made at university that is completely irrelevant to the job you are applying for. So try to tailor it to the job you are applying for, and most importantly, don't use a template. As a junior dev, you should be able to make the themes, not copy them.

How to write a CV for developer jobs

Keep your CV concise; even a one-page CV would do. The average recruiter spends six seconds scanning your CV, so don't waffle.

It’s important here to consider your skill set and the transferable skills you have from the industry you’re currently working in. Just because you work as a waiter, it doesn’t mean you haven’t got any relevant web developer skills. I studied Music Technology at university, then fell into hospitality. But I realised I wanted to do something I was truly passionate about, and work at a job where I wanted to go in on a Monday morning.

I felt it was nearly impossible to transition over to something that couldn’t be more different, but you have to take a look at the skills you use day-to-day that are relevant to becoming a developer. Illustrate your problem-solving abilities and exude passion on your CV; this will work wonders to get you that initial interview.

There’s no harm in touching up your CV to make it look professional – perhaps follow the same branding of your website and create a logo.

Northcoders go into a little more depth on the ins and outs of CV writing for a junior developer role.

Tech Busting

Wait, what’s bash, bootstrap, sass, npm, github, webpack, task runners, ajax, linux, nginx, apache? Learning these terms can be incredibly overwhelming when you’re first starting out, and some web articles are inherently flawed in that they describe the nitty gritty of the piece of tech but not simply what they are. Below is a very brief and simple description of each piece of tech.

Code Editors:

Each developer dwells on code editors, plugins, and every piece of tech under the sun. These pieces of technology make it a lot easier to procrastinate. It doesn’t matter what code editor you use, because they are all producing the same output. You can even use notepad; just don't get distracted.

Web Servers:

One thing that really struck me when trying to learn the ins and outs of front end development is how a web page is served over the internet. It’s a big rabbit hole to get into, but basically: when you visit a web page, a request is made to a server, which is responsible for serving your web files to a browser. These servers usually run on the Linux operating system. 

More details can be found at the MDN web docs.

CSS Framework:

A CSS Framework is a helper that allows you to create responsive websites quickly, meaning they look desirable on phones, tablets and desktop viewports. They usually feature a grid system, comprising of containers, rows and columns. This allows you to set an element wider or narrower depending on the screen size.

A popular choice is Bootstrap, but arguably better frameworks include meshCSS and Materialize as they are a little more user-friendly and have a materialistic theme.

Bash: 

Bash is a command line interface (CLI) language, used in Linux and Mac operating systems. Think of it as a language that interacts with a computer via the terminal. It’s important to get a grasp on how to run simple commands with Bash as you will be using it a lot. Some scenarios are using Git, running npm tasks, and configuring your server.

Try out some simple commands to begin with, like navigating the file directory and creating new directories. The Bash Academy has a great intro to the ins and outs of the language.

Git/Github:

Most people will refer to Git as a version control system but what does that even mean? It’s a way to have files and folders on a remote location (usually Github or Bitbucket) that allows you to track back through your changes via commits (uploads). Think of it as a time machine for your website which allows you to create separate versions of your project, whilst implementing team collaboration effectively.

Git and Github are not to be confused – Git is the command line tool and Github is a hosting service for repositories.

SASS/SCSS:

SASS or SCSS is a CSS preprocessor which allows you to use features that aren’t in CSS initial standard. A big plus for using SCSS is the use of variables, which allows you to define global wide variables, such as colours, and use them wherever you like. A great intro to SCSS can be found here.

npm:

Node’s package manager, or npm for short, is a way of pulling other people’s code from a central software registry. It means you can quickly and easily add open source code to your web project via the terminal. Traversy Media outlines the basics of npm here.

Task runners:

Task runners – run tasks!

We talked about SASS previously, which is something that needs to be compiled. A task runner such as Gulp or Webpack will help you to do so. It compiles all of your SASS and adds autoprefixing, adds Javascript support for legacy browsers, and minifies (the process of removing whitespace on a file to reduce file size), plus a lot more.

I recommend Gulp– it’s beginner friendly and easy to get your head around to begin with. See more details on task runners at Smashing Magazines.

AJAX/Axios:

These technologies are helpers for making XMLHttpRequests from the browser. But what the hell are those? They’re a way of communicating JSON (Javascript Object Notation) to get or post data to the web server. Let’s say you have a form on your website that you want to store in a database, you can use one of these methodologies in order to send and retrieve data without refreshing the page.

Don’t give up

Sometimes it can be a lonely journey learning to code, so reach out to other people, attend code meet-ups, and don’t be afraid to ask questions.

If you put enough dedication, time and effort into becoming a front-end developer, you will reap the rewards. Sometimes it seems impossible to get a job, and it's even more disheartening being rejected. But see it from this perspective: you dictate the market, and you are the one with the skillset. You just haven’t found the right fit yet, so don’t give up.

About the writer: Ainsley worked in the hospitality industry for nine years, including as a restaurant floor manager, before deciding a change of career was in order. He started learning how to code in his spare time, then applied for a Junior Developer role at Reddico, joining the team in January 2019. He was promoted to Midweight Developer in July 2019.