How to hire a front-end developer
沙巴体育足球开户Your website is a sum of layers—structure, data, design, content, and functionality. Creating that user-facing functionality is the job of a front-end developer. Using a combination of markup languages, design, and client-side scripts and frameworks, the front-end developer creates the environment for everything that users see and touch: content, layout, and interaction.
沙巴体育足球开户So, how do you find a freelance front-end developer who can deliver the experience your visitors are looking for? Here are key considerations, essential skills, and other factors you may want to consider during the selection process.
How to shortlist front-end developers
As you’re browsing available front-end developers, it can be helpful to create a shortlist of the contractors you may want to interview. Do a quick screen for the basic skills and qualities such as:
- Excellent collaboration. A front-end developer will work closely with UI designers, web designers, and back-end developers. Expect there to be a bit of a feedback loop and rounds of revisions to get it right—any changes they make to the UI will result in some reworking, and the back-end has to be designed to support that.
- Testing. A familiarity with unit tests a la TDD (Test-Driven Development), or a general penchant for testing code throughout the lifecycle of a project goes a long way towards preventing headaches on launch day.
- Security, SSL certificates, and HTTPS protocols. A good front-end developer should at least be familiar with the fundamentals of network security.
- Performance and scalability of code. Professional front-end developers know how to write clean, modular, well-annotated code that will make it easier to maintain, update, and scale-up as your web project grows.
How to write a job description for front-end developers
The way you write a description will determine the quality of developer that you’ll attract. It’s important to be concise yet detailed enough so developers interested in your project can submit proposals with fairly accurate cost and time estimates.
The title of your job description should be able to grab the attention of the developer that you’re looking for—are you looking for a senior developer or will an entry level coder suffice for your needs? Did you have any specific frameworks, libraries, or tools in mind? Customize your title so that it specifies the main traits you’re looking for in your desired developer.
The second part is the main body of your project description, the project overview. This is where you elaborate on the details of who you’re looking and what you’re trying to accomplish. This a good place to link or attach any wireframes, mockups, creative briefs or other documentation that clearly illustrate your ideas or other aspects of your project. The goal is to strike the right balance between detail and brevity to ensure that the developer has a clear picture of the work to be done. If you need the developer to sign an NDA (non-disclosure agreement), you can also specify this requirement in your description.
沙巴体育足球开户The final part of a good project description is to touch upon your desired development schedule and deliverables—any designs, documentation, or source code.. The source code is usually delivered using a version control solution such as Git.
Sample Project Description
Below is a sample of how a project description may look. Keep in mind that many people use the term “job description,” but a full job description is only needed for employees. When engaging a freelancer as an independent contractor, you typically just need a statement of work, job post, or any other document that describes the work to be done.
Title: Front-End Developer for a MEAN Social Media Platform
Description: We’re looking for an intermediate front-end developer to help build an exciting new social media platform for independent filmmakers, fans, and film festival venues to connect with one another. The project is based on the MEAN (MongoDB, Express.js, AngularJS, and Node.js) stack, so familiarity with at least AngularJS is required.
The right developer will have expertise in the following:
- Translation of designer mock-ups and wireframes into front-end code
- Front-end integration with a MEAN back-end
- Unit testing with Karma
- Familiarity with API Creation and RESTful services
Project Scope & Deliverables:
While much of the project has already been completed, we still need additional support to help us polish our product and meet our launch deadline in 6 months (mm/dd/yyyy). We will need the following three deliverables:
Deliverable #1 by (date)
Deliverable #2 by (date)
Deliverable #3 by (date)
We are Carnivale, an innovative startup seeking to bridge the gap between independent filmmakers, fans, and festivals.
That’s enough about us, to ensure you’ve read the entirety of this message, please include the name of your favorite film alongside your portfolio in your reply.
*Note all company names and dates, were created solely for the use of this example.
Sample questions for the interview
- “What are some of the most common mistakes you perceive in front-end development?” The depth of a developer’s knowledge can be measured by the number of mistakes they’ve made or seen, and how they were able to overcome them.
- “Describe one of the biggest challenges you had coding some tricky front-end functionality and what you used to solve it?” This gives the developer a chance to show you what they’ve got. Whether it’s the time they tried to launch their own social media app or had to tackle a particularly daunting project for a client, this question serves as a simple prompt to let them tell you where they really tried to test the limits of their abilities.
- “Knowing what our site/app is trying to do, what do you think some interactive front-end challenges we may face could be?” Asking this question doesn’t just indicate whether they’ve done their research, it also gives them a chance to show their experience tackling different types of sites and coding challenges.
- “What are some of your favorite front-end frameworks, and why?” This is a good opportunity to let them explain their favorite tools and technologies, and how they apply them to different types of apps. It also lets you hear about their production style, how they like to streamline work (say, with CSS preprocessors), and how they leverage certain frameworks for their strengths.
- “How do you typically tackle testing of your code?” It’s always a good sign if your developer is a practitioner of TDD or familiar with writing unit tests. Karma, Protractor, Mocha, Jasmine—these are just some of the popular test tools out there that you can look for in your candidate’s responses.
FRONT-END DEVELOPERS FAQs
What does a front-end developer do?
Generally, a front-end web developer’s services include:
- Tailoring user experience
- Production, modification, and maintenance of websites and web application user interfaces
- Creating tools that enhance how users see and interact with your site in any browser
- Implementing responsive design for mobile sites
- Contributing some back-end experience, collaborating on APIs, and more
- Maintaining software workflow management with a project management tool like GitHub and task runners like Grunt and Gulp
- Consulting on SEO best practices
- Testing the site during development for usability and fixing any bugs
How much does it cost to hire a front-end developer?
There are a number of factors you’ll have to consider first before you can hone in on the true cost of your project.
Cost factor #1: Project scope
One of the first factors is project scope. Is your intention simply to engage someone to set up a quick landing page to gather email subscriptions for your eventual product launch? Or are you looking for something more long-term, someone to build the client-side of your website from the ground up, with an emphasis on performance, scalability, and maintenance? Costs will vary from one end of the spectrum to the other.
This is especially true for front-end development, where top-level decisions such as whether or not your plan is to monetize an existing WordPress blog or develop dynamic single page application (SPA) from scratch, will ultimately determine which technologies your front-end developer will have to use. To help you out, we’ve categorized some of the languages, frameworks, and other technologies that a developer may possess, to help you search for the right developer for your needs.
Typical Rates Charged by Front-End Developers*
|Type of Front-End Developer||Description||Average Hourly Rate|
|Intermediate – Advanced Front-End||Beyond fundamentals, also skilled in one or more chosen frameworks like AngularJS, CSS preprocessors like LESS/SASS, and CSS frameworks like Bootstrap.||$35-100 +|
|Full Stack Developer||Mix of front-end and back-end technology expertise. Solution stacks like MEAN or LAMP. Server-side technologies like ASP.NET, Ruby or Python.||$30-150 +|
沙巴体育足球开户*Reflects rates charged by freelancers on Upwork in North America with over 1,000 hours and 90% success rate.
Cost factor #2: Experience
沙巴体育足球开户The more experienced the programmer, the higher the rate—so you’ll want to make sure you’re optimizing your resources when you find a developer for a job. If all you need is someone to set up a simple landing page with Joomla, you can easily find a developer to do it for you who charges $15-20/hour.
沙巴体育足球开户On the other hand, if you wish to create a fully customizable SPA (single-page application), a senior AngularJS developer can charge you upwards of $60/hour. The cost is worth it when you consider that you’ll want someone who has experience taking an app from conception through completion—they’ll know how to handle any bugs that appear before production.
Tip: Sometimes it can be cost effective to just hire a “unicorn“—those rare front-end developers who also double as UI/UX designers. They can help you carry your small-sized project from wireframing and storyboarding through development, testing, and production.
Cost Factor #3: Location
沙巴体育足球开户While it’s true that rates charged by freelancers vary by location, keep in mind that front-end developers across the globe still pay the same expenses for services such as AWS (Amazon Web Services), GitHub, and G Suite, or training through programs offered by online course providers such as Lynda.
6 common front-end web development mistakes to avoid
SING Front-end designers and programmers are responsible for developing everything that users of a site or app see and interact with. This includes coding and bringing interfaces to life that are engaging and aesthetically pleasing to viewers. Just because a customer-facing interface functions well doesn’t mean it will be a success. The wrong design can destroy a site’s user base and cause a dramatic drop in revenue, and getting that design right is the role of a front-end developer.
In front-end development, it’s very important to understand users and their behaviors to build a beautifully functioning front end, but there are also a few common coding mistakes to avoid. Here are a few to keep an eye out for when developing a site or application as well as some tips and best practices that can help you keep your projects on track:
1. Using tables instead of div containers
沙巴体育足球开户Tables were the de facto way of HTML element placement years ago. They almost seem easier to work with than using div containers and CSS when you’re starting a front-end design career. However, tables can be pretty messy and can cause design flaws and misplacements in different browsers.
沙巴体育足球开户Table designs have been replaced more and more by CSS and div containers as a more optimal way to place elements and create a layout. Tables are still useful when displaying charts of information, but they’re rarely used to create layouts. Try to opt for “table-less” layouts when designing your front-end HTML code.
2. Coding with old HTML elements
HTML5 is the newest form of the HTML coding language, and it’s provided a lot of changes to standard page design. HTML5 replaces elements such as Adobe Flash with the <canvas> tag. The new standards also deprecated some tags such as <frames> and <center> for CSS design.
It’s usually best to avoid coding with older HTML standards. Front-end design depends heavily on browser support. Older HTML support is not always available in some browsers, and it’s bad practice that can put your site at a disadvantage in the long run. (Not to mention, HTML5 has many awesome advantages that will make a site more modern and secure.) The code can be harder to support and in some cases, it can leave your site more vulnerable to security attacks.
3. Forgetting to test for each major browser
You should also determine the oldest browser version you’ll support. Many users stick with the same older browsers as their computer ages, so you should weigh the pros and cons of possibly alienating these users with the effort it takes to maintain code for both older and newer browsers. Decide the oldest browser version you’ll support and then test on these older versions.
4. Forgetting responsive mobile design
Mobile is the new generation web browsing. Tablets and smartphones are the most popular ways for browsing the web, increasingly replacing desktop browsing. Your front-end design should always be responsive and support mobile devices, or you’ll risk penalties in search results. You can also create a separate site for mobile (also called “m sites”) on a subdomain, but responsive design should be the default in modern front-end coding.
After you make your design responsive, you’ll want to test it as well—with all browsers and browser versions. Remember that mobile devices have several different screen sizes, so ensure that your code supports all possible breakpoints. You can use emulators that help you test so that you don’t need to have several devices on-hand to test.
5. Not prioritizing site speed
It’s difficult to predict what a developer will do with a project years from now, but you can view its popularity by searching the number of support communities online. For instance, you can’t go wrong with AngularJS or KnockoutJs libraries—they’re popular and supported by big brands.