Skip to main content

7 Skills You Should Have As A Front-End Developer

Lyle King Red

By Lyle King Red | December 2019

We’re not talking about languages or frameworks

These items are on every list and in all honesty, seem to be obvious. If you want to be a web developer, you will need to know the programming languages associated with the career. If you’re not familiar, before you become a front-end developer you will need to learn HTML, CSS, and JS (recommend that exact order).

As for frameworks we developers can argue all day and night about which is the best (React vs. Vue or Bootstrap vs. Foundation) but the truth is all frameworks are valuable and could be useful for your career. I would recommend reaching to the companies you want to work at and see what frameworks they are using and start learning those first.


Become a keyboard shortcut pro
Master every program you use

Keyboard shortcuts save time. You simply need to build the muscle memory to master them. The fastest way to build that muscle memory is by reading the full list of available keyboard shortcuts and then forcing yourself to use your mouse as little as possible. I would start by learning the shortcuts for your code editor first (VS Code, Sublime, Atom). This is the application you spend most of your time in so mastering its shortcuts will save you the most time. You might not know this, but even WordPress has keyboard shortcuts, including the new Gutenberg editor that has support.

Additionally, you can even save more time by using gaming mice and keyboards and applying single click macros for the most common functions you perform. I love having the two additional keys on my mouse for copy and paste.


Understand the art of proper commenting
and when to comment

Commenting is a basic function in any programming language, but a majority of the time classes and lessons will not cover when you should comment or what to include a comment. The short version is comments allow you to document and clarify a section of code. These comments should also be easy to read and follow the structure of your code.

The truth is, overall, we tend to under comment so if you are not sure if it needs a comment, just do it.

Besides, we tend to think comments are for other people so if you’re a team of the one you might skip this altogether. Please don’t. Often, you will look back at your code and get lost. So, these clarifying comments will be read by you when you are making future updates.


Master the power of Inspector
All browsers have them

Today, all modern browsers include some form of Dev Tools or Code Inspector. This tool will become your best friend as a front-end developer as these allow you to quickly test and debug your code. They are updated regularly and consistently receiving new features so that you can take advantage of the latest programming techniques.

Take the time to learn all that you can accomplish within the browser Dev Tools and I recommend these newer features below:


Learn to translate dev talk to plain English
No matter how basic, your team members still won’t get it

There is a reason we call them “programming languages.” In the same way, you can’t speak Japanese and just assume everyone around will understand, you cannot speak “dev talk” and assume your team will comprehend.

A big issue is many of the development topics we use every day are full of abbreviations and acronyms. We need to make sure to fully explain these terms. Otherwise, we sound like a teenager using text talk with their parents. They either don’t understand and become confused—or assume it means something completely unrelated.

Example of common Dev terms

  • SSL (Secure Sockets Layer): Is a standard security feature that displays a green padlock symbol when your customers come to the site.
  • DNS (Domain Name System): This will be where your domain is managed to allow us to launch your website
  • SFTP (Secure File Transfer Protocol): This is a username and password allowing us access to your server in which your website resides.
  • WordPress Gutenberg: The new content editor recently launch by WordPress
  • WYSIWYG (What You See Is What You Get): This is a content editor that allows you to see a visual preview of the finished product as you work.
  • Accessibility: Just as any public building needs to have handicap parking or an entrance ramp, on a website, you need to take steps to ensure users of all abilities (and disabilities) have a comparable experience.
  • Plugins: These are add-ons to WordPress that allow you to attach new functions or features that are not part of the core platform.
  • CMS (Content Management System): A database-driven, software platform that allows its users to edit page content directly, often without requiring coding experience or technical assistance.


Never stop learning
Our industry never stops evolving

We all know technology is continually evolving and at a rapid pace. The same goes for development and the languages used to power that technology. The great news is, you do not have to go to college and go into debt to stay knowledgeable. There are many affordable and even free classes, tutorials, and step-by-step guides you can find online.

Learn by doing. Start experimenting and trying new things and create something just to see if you can. CodePen is without a doubt the best tool for this.


Don’t be afraid to ask questions
Other devs, team members, or clients

Along with our previous tip, you can’t learn without asking questions no matter how dumb you may think they sound. Especially if you’re starting a new job or new career, do not be afraid to ask the senior developer. It will not affect their view of you and, since you are new, they will expect it. It is always better to ask now then guess and hope everything works out.

Ask your team members questions. This is how you become a team and not just strangers working in the same room. Most of your questions will be directed towards the designer as the designer to developer handoff is a huge pain point in our industry. The best way to improve that process is by asking them questions and clearing everything that may be confusing. Again, it is always better to ask now then guess and hope everything works out.


Track everything you do
Improve your estimate accuracy

All developers hate the questions, even though it’s in many interviews, “How long does it take you to build a website?” Websites have different levels of complexity, therefore each takes a different amount of time, but in a work environment, you will need to be able to supply accurate time estimates for a project. The truth is, it takes experience to be able to accurately estimate, but by tracking your tasks, you will become familiar with your work speed and be able to provide accurate estimates sooner.

Do you have these 7 skills?
If not, then let’s start today

The best part of this list is that you can start and master everything on this list in less then 24hours. So why implement all of this into your workflow today?


BONUS: It may be not your job but understand the basics of SEO
You’ll be surprised just how much our code affects it

Search Engine Optimization is an important concept in our industry, and it’s likely your team will have a separate team member just for it. However, it’s important to learn more than just how to install Google Analytics, Google Tag Manager, and The SEO Framework. You might be surprised just how much your programming will affect SEO when not following best semantic practices.

For example, do not simply use H3 (skipping the H2 tag) because you want smaller typography. Use the H2 tag and restyle specific to this purpose.

Lyle King Red

Written by

Lyle King Red

Lyle works side by side with our design team, figuring out the best way to bring the artwork they create to life.

More from Me


Effectively Working With A Team: A Developer’s Perspective

By Lyle King Red

Your smartphone is already self-aware

Your smartphone is already self-aware—forget Skynet!

By Element5 Digital

8 Developer Tools We Use to Make Our Jobs Easier

By Lyle King Red

Need our help on a new project?

Shoot us a message. We'd love to hear from you.

get a quote