Front-End Web Developer Skills in 2019
Front-End Web Developer Job Titles in 2018
The common, or most used (i.e., generic), title for a front-end developer is, “front-end developer” or “front-end engineer“.
Front-End Developer
A front-end web developer describes a developer who is skilled to some degree at HTML, CSS, DOM, and JavaScript and implementing these technologies on the web platform.
Front-End Engineer (JavaScript Developer or Full-stack JavaScript Developer)
The job title given to a developer who comes from a computer science, engineering, background and is using these skills to work with front-end technologies. This role typically requires a computer science degree and years of software development experience.
Additionally, the when “JavaScript Application” is included in the job title, this will denote that the developer should be an advanced JavaScript developer possessing advanced programming, software development, and application development skills (i.e has years of experience building front-end applications).
Front-End Testing/QA
When “Testing” or “QA” is included in the job title, this will denote that the developer has extensive experience testing and managing software that involves unit testing, functional testing, user testing, and A/B testing.
Front-End Dev. Ops
When “DevOps” is included in the job title, this will denote that the developer has extensive experience with software development practices pertaining to collaboration, integration, deployment, automation, and measurement.
Front-End Accessibility Expert
When the word “Accessibility” is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies that support accessibility requirements and standards.
Front-End SEO Expert
Search engine optimization involves making small modifications to parts of your website.
When viewed individually, these changes might seem like incremental improvements, but when combined with other optimizations, they could have a noticeable impact on your site’s user experience and performance in organic search results.
When the word “SEO” is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies towards an SEO strategy.
Web/Front-End User Interface (aka UI) Developer/Engineer
When the word “Interface” or “UI” is included in the job title, this will denote that the developer should posses interaction design skills in addition to front-end developer skills or front-end engineering skills.
Front-End Web Designer
When the word “Designer” is included in the job title, this will denote that the designer will posses front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and Interaction Design) skills.
Front-End Web Development Skills
Here’s a list of skills that Front-end Developers and Software Engineers should be familiar with.
- Progressive Web Apps (PWA)
- Content Management Systems (CMS)
- Node.js
- Cross-Browser Testing
- Cross-Platform Testing
- Unit Testing
- Cross-Device Testing
- Accessibility / WAI-ARIA
- Search Engine Optimization (aka SEO)
- Interaction or User Interface Design
- User Experience
- Usability
- E-commerce Systems
- Portal Systems
- Wire-framing
- Prototyping
- CSS Layout / Grids
- DOM Manipulation (e.g., jQuery)
- Mobile Web Performance
- Load Testing
- Performance Testing
- Progressive Enhancement / Graceful Degradation
- Version Control (e.g., GIT)
- MVC / MVVM / MV*
- Functional Programming
- Data Formats (e.g., JSON, XML)
- Data APIs (e.g Restful API)
- Web Font Embedding
- Scalable Vector Graphics (aka SVG)
- Regular Expressions
- Content Strategy
- Microdata / Microformats
- Task Runners, Build Tools, Process Automation Tools
- Responsive Web Design
- Object-Oriented Programming
- Application Architecture
- Modules
- Dependency Managers
- Package Managers
- JavaScript Animation
- CSS Animation
- Charts / Graphs
- UI Widgets
- Code Quality Testing
- Code Coverage Testing
- Code Complexity Analysis
- Integration Testing
- Command Line / CLI
- Templating Strategies
- Templating Engines
- Single Page Applications
- XHR Requests (aka AJAX)
- Web/Browser Security
- HTML Semantics
- Browser Developer Tools
HTML
Hypertext Markup Language, or HTML, was primarily designed to provide a means of creating structured scientific documents.
HTML can embed scripting languages such as PHP or JavaScript to affect the behavior and content of web pages. The World Wide Web Consortium (W3C) maintains both the HTML and CSS standards.
To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
CSS
Cascading Style Sheets, also known as CSS, is a declarative language that controls how webpages look in the browser.
The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.
CSS is one of the three core Web technologies, along with HTML and JavaScript. CSS usually styles HTML elements, but can be also used with other markup languages like SVG or XML.
JavaScript
(JS) or JavaScript, is a lightweight interpreted or JIT-compiled programming language with first-class functions.
While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat.
JavaScript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior.
Responsive Web Design
The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn’t optimized for those mobile devices.
Mobile devices are often constrained by display size and require a different approach to how content is laid out on the screen.
Responsive web design is made up from 3 basic ingredients.
Flexbox Grid will allow you to quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
A multitude of different screen sizes exist across phones, “phablets,” tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it’s important that your site can adapt to any screen size, today or in the future.
API
An application programming interface (API) is a set of tools, definitions, and protocols for building application software. It lets your product or service communicate with other products and services without having to know how they’re implemented.
Technically, API stands for Application Programming Interface. APIs as a way to serve your customers. At some point or another, most large companies have built APIs for their customers, or for internal use.
Curated List of Links for Front-end Web Developers
This is my open source project for Front-End web developers and Software Engineers to view and add the top resources for developers in 2018.
Progressive Web Apps
Progressive Web Apps are user experiences that have the reach of the web, and are:
- Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging – Feel like a natural app on the device, with an immersive user experience.
This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.
Desktop Progressive Web Apps
Desktop progressive web apps can be ‘installed’ on the user’s device much like native apps. They’re fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs.
They’re reliable because service workers can cache all of the assets they need to run. And they create an engaging experience for users.
Progressive Web App Checklist
Progressive Web Apps (PWA) are reliable, fast, and engaging, although there are many things that can take a PWA from a baseline to exemplary experience.
To help teams create the best possible experiences we’ve put together a checklist which breaks down all the things we think it takes to be a Baseline PWA, and how to take that a step further with an Exemplary PWA by providing a more meaningful offline experience, reaching interactive even faster and taking care of many more important details.
About Me
I’m a professional Front-End Web Developer & UX/UI Designer in Omaha, Nebraska.