A great divide has been brewing in the front-end developer space for several years between two very different types of so-called front-end developers. On the one side, you have JavaScript-focused programmers who write JavaScript for front-end runtimes that likely have computer science skills with a software development history. They more than likely view HTML and CSS as an abstraction (i.e. JSX and CSS in JS). On the other side, you have, most likely, non-computer science educated developers who focus on HTML, CSS, and JavaScript as it specifically pertains to the UI. In 2019, when entering or trying to understand the front-end developer space you will absolutely feel this divide. The term front-end developer is on the verge of meaninglessness without clarifying words to address what type of front-end developer is being discussed.
Below is a list and description of various front-end job titles (Keep in mind titles are hard). The common, or most used (i.e., generic), title for a front-end developer is, “front-end developer” or “front-end engineer”. Note that any job that contains the word “front-end”, “client-side”, “web UI”, “HTML”, “CSS”, or “JavaScript” typically infers that a person has some degree of HTML, CSS, DOM, and JavaScript professional know how.
Front-End Developer: The generic job title that 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 (aka 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 computer science knowledge and years of software development experience. When the word “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 software applications).
CSS/HTML Developer: The front-end job title that describes a developer who is skilled at HTML and CSS, excluding JavaScript and application, know how.
Front-End Web Designer: When the word “Designer” is included in the job title, this will denote that the designer will possess front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and Interaction Design) skills.
UI (User Interface) 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.
Mobile/Tablet Front-End Developer: When the word “Mobile” or “Tablet” is included in the job title, this will denote that the developer has experience developing front-ends that run on mobile or tablet devices (either natively or on the web platform, i.e., in a browser).
Front-End SEO Expert: 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.
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 Dev. Ops: When the word “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 quality.
Front-End Testing/QA: When the word “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.
Notes:
If you come across the “Full Stack” or the generic “Web Developer” terms in job titles these words may be used by an employer to describe a role that is responsible for all aspects of web/app development, i.e., both front-end (potentially including design) and back-end.
2.3 – Baseline Web Technologies Employed by Front-End Developers
The following core web technologies are employed by front-end developers (consider learning them in this order):
Hyper Text Markup Language (aka HTML)
Cascading Style Sheets (aka CSS)
Uniform Resource Locators (aka URLs)
Hypertext Transfer Protocol (aka HTTP)
JavaScript Programming Language (aka ECMAScript 262)
JavaScript Object Notation (aka JSON)
Document Object Model (aka DOM)
Web APIs (aka HTML5 and friends or Browser APIs)
Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)
For a comprehensive list of all web related specifications have a look at platform.html5.org or MDN Web APIs.
The nine technologies just mentioned are defined below along with a link to the relevant documentation and specification for each technology.
Hyper Text Markup Language (aka HTML)
HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.
— Wikipedia
Most relevant specifications / documentation:
All W3C HTML Spec
The elements of HTML from the Living Standard
Global attributes
HTML 5.2 from W3C
HTML 5.3 from W3C
HTML attribute reference
HTML element reference
The HTML Syntax from the Living Standard
Cascading Style Sheets (aka CSS)
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
— Wikipedia
Most relevant specifications / documentation:
All W3C CSS Specifications
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
CSS reference
Selectors Level 3
Hypertext Transfer Protocol (aka HTTP)
The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.
— Wikipedia
Most relevant specifications:
Hypertext Transfer Protocol — HTTP/1.1
HTTP/2
Uniform Resource Locators (aka URL)
A uniform resource locator (URL) (also called a web address) is a reference to a resource that specifies the location of the resource on a computer network and a mechanism for retrieving it. A URL is a specific type of uniform resource identifier (URI), although many people use the two terms interchangeably. A URL implies the means to access an indicated resource, which is not true of every URI. URLs occur most commonly to reference web pages (http), but are also used for file transfer (ftp), email (mailto), database access (JDBC), and many other applications.
— Wikipedia
Most relevant specifications:
Uniform Resource Locators (URL)
URL Living Standard
Document Object Model (aka DOM)
The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).
— Wikipedia
Most relevant specifications / documentation:
DOM Living Standard
W3C DOM4
UI Events
JavaScript Programming Language (aka ECMAScript 262)
