| description |
|---|
A front-end developer is a type of software developer who specializes in creating and designing the user interface (UI) and user experience (UX) of websites and web applications. |
A front-end developer is a type of software developer who specializes in creating and designing the user interface (UI) and user experience (UX) of websites and web applications. The primary responsibility of a front-end developer is to ensure that the visual and interactive aspects of a website or application are user-friendly, aesthetically pleasing, and functionally efficient.
Front-end developers work with various technologies, tools, and languages, including:
- HTML (HyperText Markup Language): The standard markup language used to create the structure and layout of web pages.
- CSS (Cascading Style Sheets): A stylesheet language used to control the presentation, formatting, and appearance of web pages, such as colors, fonts, and layout.
- JavaScript: A programming language that allows developers to add interactivity, animations, and other dynamic elements to websites and web applications.
Front-end developers may also use libraries and frameworks, such as React, Angular, or Vue.js, to streamline their work and create more sophisticated and interactive UIs. Additionally, they often collaborate with back-end developers, who are responsible for the server-side logic and data management, to ensure seamless integration between the front-end and back-end components of a web application or website.
A front-end developer architects and develops websites and applications using web technologies (i.e., HTML, CSS, DOM, and JavaScript), which run on the Open Web Platform or act as compilation input for non-web platform environments (i.e., React Native).
Typically, a person enters into the field of front-end development by learning to develop HTML, CSS, and JavaScript which commonly runs in a web browser but can also run in a headless browser, or as compilation input for a native runtime environment. These four run times scenarios are explained below.
A web browser is software used to retrieve, present, and traverse information on the WWW. Typically, browsers run on a desktop or laptop computer, tablet, or phone, but as of late a browser can be found on just about anything (i.e, on a fridge, in cars, etc.).
The most common web browsers are (shown in order of most used first):
Headless browsers are a web browser without a graphical user interface that can be controlled from a command line interface programmatically for the purpose of web page automation (e.g., functional testing, scraping, unit testing, etc.). Think of headless browsers as a browser that you can run from the command line that can retrieve and traverse web pages.
The most common headless browsers are:
Webviews are used by a native OS, in a native application, to run web pages. Think of a webview like an iframe or a single tab from a web browser that is embedded in a native application running on a device (e.g., iOS, android, windows).
The most common solutions for webview development are:
- Electron (typically used for desktop apps)
- Tauri.js
- Cordova (typically for native phone/tablet apps)
- NW.js (typically used for desktop apps)
Eventually, what is learned from web browser development can be used by front-end developers to craft code for environments that are not fueled by a browser engine. As of late, development environments are being dreamed up that use web technologies (e.g., CSS and JavaScript), without web engines, to create native applications.
Some examples of these environments are:
Make sure you are clear what exactly is meant by the "web platform". Read, "The Web platform: what it is" and read the, "Open Web Platform" Wikipedia page. Explore the many technologies that make up the web platform.
Overview:
A broad examination of the front-end developer profession.
Fundamentally a front-end developer, historically sometimes referred to as a client-side developer, produces the code sent from a web server to a client/front-end to establish a user interface. For example, when you load a webpage into a web browser, code is sent from a web server to the device/client requesting the page. The code sent will produce the user interface one sees in the web browser. This code is considered front-end code and is a mixture of the web technologies HTML, CSS, and JavaScript.
An individual typically enters into the field of front-end development by first learning to build a simple website using HTML and CSS. HTML or HyperText Markup Language is likened to the structural framing of a house, while CSS or Cascading Style Sheets can be considered the finishing touches one sees once a home is complete.
Eventually, the house (i.e., a website) will need to become automated. In other words, it will need to become interactive and respond to events orchestrated by the user or the device on which it runs (e.g., on click or on load do X). To accomplish this, front-end developers learn the JavaScript programming language and use this language and the Document Object Model (aka the DOM) to add dynamic and interactive aspects to HTML and CSS.
As a front-end developer progresses in their career, they will move from a simple understanding of web pages and websites to potentially a robust grasp of software development practices as it is done on the web platform using the JavaScript programming language.
Front-end developers develop for the web platform, and the web platform is most commonly associated with web browser run times. Open a web browser like Google Chrome, navigate to a web page like google.com, and what you are looking at was developed by a front-end developer who developed the web page using HTML, CSS, and JavaScript.
The web platform runtime is not just for web browsers. It can also be used by WebViews and Progressive Web App (aka PWA) techniques to create native-like applications that are installed on an operating system. This means that a front-end developer can take their knowledge of web technologies and the web platform run time associated with browsers and web development and use these skills to create native applications for popular operating systems like Windows, Mac OS X, iOS, Android, and Linux.
Loosely, think of a WebView or PWA like a single tab from a web browser without an address bar or backward and forward buttons, that is embedded into a native application. This scenario is identical to the browser, and WebViews/PWA's run from HTML, CSS, and JavaScript but instead of facilitating internet access to web pages the intention is the web platform runtime is used to access the native operating systems APIs (i.e., A single browser view of a web page(s), using web technologies, that is run like a native application that may or may not be connected to the internet that has access to native operations either via native web APIs or bridges from web technologies to native APIs).
The most common solutions for WebView development are:
Front-end developers can also find themselves developing source code using web platform technologies (e.g., CSS and JavaScript), but then the source code created is not used by a web platform run time scenario but instead as input which gets translated to native run time code. Basically, coding environments exist where web technologies are written not to run on the web platform but written to be used as input to create real native applications using native APIs.
Some examples of these environments are:
- Flutter
- NativeScript
- React Native (The Instagram application for iOS and Android was developed using React Native)
- tabris.js 🆓 💵
As you can see, Front-end developers not only develop for web browsers but also for several other run time scenarios beyond web browsers. Being a front-end developer today could mean creating webpages and web applications that are accessed via web browsers, but it can also mean creating native applications that are installed on operating systems and run offline (e.g. Visual Studio Code is built using Electron).
A professional front-end developer will minimally have a working knowledge of browsers, the internet and be skilled at using the following web technologies:
- HyperText 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 Browser APIs)
- Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)
Beyond being skilled at the technologies just mentioned, a front-end developer might also be skilled in one or more of the following areas:
- Content Management Systems (aka 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
- Wireframing
- 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
- 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 Toolkits
- Code Quality Testing
- Code Coverage Testing
- Code Complexity Analysis
- Integration Testing
- Command Line / CLI
- Templating Strategies
- Templating Engines
- Single Page Applications
- Web/Browser Security
- Browser Developer Tools
As of late, defining the skills of a front-end developer has become complicated due to a significant divide in the front-end developer profession. A gap has arisen between those front-end developers who focus on programming and becoming a traditional computer science-oriented JavaScript/software developer, and all this entails, and those who focus more on the UI, HTML, CSS and happen to know some JavaScript. This gap, for better or worse, was orchestrated by the fact that JavaScript infiltrated the back-end and thus back-end developers in time found themselves writing JavaScript back-ends with tools like Node.js and mongoDB. Eventually, these engineers infiltrated the front-end. The good news is this scenario resulted in a front-end and JavaScript renaissance. Pretty much, everything got better. Tools. Frameworks. Package Managers. Libraries. CSS. JavaScript. But, it especially got better for those who already had a command of the JavaScript programming language. The bad news this renaissance also diluted and complicated the skills required to do front-end development and has pulled the profession towards a more engineering-focused field of work often requiring traditional computer science training and software development know-how over UI experience. Unfortunately, for the time being, getting a front-end developer job today might come down to how much you know about computer science theories, software development, or the specifics parts of the ECMAScript specification. I say unfortunately because, in my opinion, what is more important than these matters is a robust understanding of how to construct a usable touch point between the user and the code.
Simultaneously, a trend has been occurring for several years now where websites and web applications are being built using a thick/fat client architecture (e.g., Single Page Applications or SPA's). Meaning, what was once mostly done on the server is now done in the client at runtime. In short, the application logic that runs a website or web application will today often run in the client instead of on the server. When this architecture is in use, the data that drives the website or web application is requested at runtime by the client using a data API (i.e., an interface that returns data only, typically in the form of JSON). What this means for the front-end developer profession is what was once consider back-end competencies are now becoming required competencies to do front-end development (e.g., Software Development, Web Application Development, Software Build Processes, State management, Application performance, etc).
Due to the divide mentioned above and the movement towards thick/fat applications in the client, the front-end skillset spectrum is currently being stretch by what is known as a full-stack developer. A full-stack developer can supposedly not only code a front-end application UI using HTML, CSS, and JavaScript for multiple screen sizes but can also develop the database and data API as well as the web server serving the client. It is this author's opinion that this jack of all development trades has been seen before in the form of a webmaster and back-end framework developers. The author believes that history will repeat itself and the notion of a single do it all developer will run its course again and then eventually be wisely replaced with reasonably focused developers either working mainly on the front-end or back-end with a clear separation. I believe this will happen because the mile wide and inch deep developer is ultimately inept at properly caring for the UI and user experience. Don't get me wrong, a one in a million, unicorn, rock star developer does exist that can do it all and do it well. But modeling a profession on such an individual is impractical and dangerous.
As I just mentioned, a great divide has been brewing in the front-end developer space for several years between two very different types of 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 probably 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. When entering or trying to understand the front-end developer space, you will 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 the most common 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/Engineer (Previously called Client-side 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 (URLs, HTTP, Browsers, Web APIs, etc.).
Application/JavaScript Developer/Engineer: 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). In all likely hood if the words engineer, JavaScript, or full-stack appear in the job title, this will entail server-side JavaScript (i.e., Node.js, MongoDB, etc.).
Front-End Performance Developer/Engineer : The job title given to a JavaScript Application Engineer or UI Developer who is focused on the performance implications of JavaScript and JavaScript runtimes.
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 have interaction design skills in addition to front-end developer skills or front-end engineering skills.
Mobile/Tablet Front-End Developer/Engineer: 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 e.g., React Native, 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 Developer Operations Engineer: 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 developer collaboration, tooling, integration, deployment, automation, and quality.
Front-End Testing/QA Engineer: 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 manual testing, unit testing, functional/integration testing, user testing, and A/B testing.
Note that each of these job titles could potentially be prefixed with the terms "Junior," "Mid-level," "Senior," "Lead," "Director," or "Principle".
A front-end developer will often work on a web development team containing the following roles:
- Project Lead / Product owner (i.e., stakeholder, project manager, etc.)
- Visual Designer (i.e., fonts, colors, spacing, emotion, visual concepts & themes)
- UI/Interaction Designer (i.e., wireframes, specifying all user interactions and UI functionality, structuring information)
- Front-End Developer (i.e., writes code that runs on the client or front-end)
- Back-End Developer (i.e., writes code that runs on the server)
The five roles just mentioned can overlap each other. For example, a front-end developer will typically have a good handle on UI/Interaction design as well as Back-end development. Additionally, it is not uncommon to find a Visual Designer who does Interaction Design and can also contribute to front-end coding efforts.
A larger web development team might include the following roles not mentioned above:
- SEO Strategists
- Developer Operations Engineers (aka DevOps Engineers)
- Performance Engineers
- API Developers
- Database Administrators (aka DBAs)
- QA Engineers / Testers
The national average in the U.S for a mid-level front-end developer is somewhere between $65k and 100k.
Of course, when you first enter into the profession, expect to enter the field at around 40k a year depending upon location and experience.
A lead/senior/principal front-end developer/engineer can potentially live wherever they want (i.e., work remotely) and make over $150k a year (visit angel.co, sign-up, review front-end jobs over $150k or examine the salary ranges on Stack Overflow Jobs).
- Front-end developer training and education is still a complicated endeavor, and those who break into the occupation often have done so by pure determination and self-directed learning resources.
- Front-end developers have to write code that will support a user interface on an extensive spectrum of device types and screen sizes.
- While not as complex of a problem as it once was, front-end developers still have to write code that will run in several different browsers (i.e., different web platform runtimes).
- Front-end developers are expected not only to be highly skilled at user interface design and interaction design but also at the practice of computer programming, computer science, and software engineering.
- Front-end developers have to ride the wave of changing technologies, specifications, frameworks, and tools. This moving foundation has implications not only on an individual's skills but additionally on how easy it is to switch jobs.
- Front-end developers not only have to be experts at HTML, CSS, and JavaScript but also experts at complicated dialects of these languages (JSX, Markdown, SASS, Flow, Immutable.js, TypeScript, Reason, etc.).
- Front-end developers have to deal with non-trivial areas of complexity such as font rendering, search engine optimizations, accessibility standards, web security (e.g., SSL, OAuth2, XSS), image optimizations, network performance, HTML email, browser performance, JavaScript performance, HTML, CSS, and DOM rendering, and divergent JavaScript runtimes.
- Front-end developers today are dealing with the implications of trying to do all things on a platform that was initially designed to be a static document viewer. Real-time. Applications. Animation. Video games. The web has to be all things. And all things is very hard on front-end developers given that the web is viewed through a user-determined device, using a user-determined application, over a user-determined network. It is hard to do all the things when code has to account for a complicated spectrum of user-determined variables.
- Front-end developers today are stuck in an evolving job situation where a professional aptitude for UI design, software architecture, interaction design, and back-end/server-side programming can be placed on the front-end developer. Essentially, unrealistic expectations are being placed on front-end developers to operate at a professional level anywhere in the development stack while also being proficient at user interface development.
![https://frontendmasters.com/guides/front-end-handbook/2019/assets/images/FM_2019Cover_final.jpg","datePublished":"2018-12-13T18:56:13.551Z","dateModified":"2023-03-24T11:37:40.114Z","timeRequired":"PT4M19.5S","author":{"@type":"Person","name":"Frontend](https://frontendmasters.com/guides/front-end-handbook/2019/assets/images/FM_2019Cover_final.jpg","datePublished":"2018-12-13T18:56:13.551Z","dateModified":"2023-03-24T11:37:40.114Z","timeRequired":"PT4M19.5S","author":{"@type":"Person","name":"Frontend){kind=link}
![https://frontendmasters.com","image":"https://frontendmasters.github.io/bootcamp/static/FrontendMastersLogo-f72cae0c73fecbb6beecea606d8fabd3-a040c.png"},"publisher":{"@type":"Organization","name":"Frontend](https://frontendmasters.com","image":"https://frontendmasters.github.io/bootcamp/static/FrontendMastersLogo-f72cae0c73fecbb6beecea606d8fabd3-a040c.png"},"publisher":{"@type":"Organization","name":"Frontend){kind=link}
![https://frontendmasters.com","logo":"https://frontendmasters.github.io/bootcamp/static/FrontendMastersLogo-f72cae0c73fecbb6beecea606d8fabd3-a040c.png"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Frontend](https://frontendmasters.com","logo":"https://frontendmasters.github.io/bootcamp/static/FrontendMastersLogo-f72cae0c73fecbb6beecea606d8fabd3-a040c.png"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Frontend){kind=link}