What Is A Front-End developer?

Front-end web development, also known as client-side development is the practice of
producing HTML, CSS and JavaScript for a website or Web Application so that a user
can see and interact with them directly. The challenge associated with front end
development is that the tools and techniques used to create the front end of a website
change constantly and so the developer needs to constantly be aware of how the field
is developing.
The objective of designing a site is to ensure that when the users open up the site they
see the information in a format that is easy to read and relevant. This is further
complicated by the fact that users now use a large variety of devices with varying
screen sizes and resolutions thus forcing the designer to take into consideration these
aspects when designing the site. They need to ensure that their site comes up correctly
in different browsers (cross-browser), different operating systems (cross-platform) and
different devices (cross-device), which requires careful planning on the side of the
developer.

HTML, CSS, & JavaScript:

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 web browser but can also run in a
headless browser, WebView, or as compilation input for a native runtime environment.

Web Browsers (most common)

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):
Chrome
Safari
Internet Explorer (Note: not Edge, referring to IE 9 to IE 11)
Firefox
Edge

Headless Browsers

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:
Headless Zombie
slimerjs
Chromium

Webviews

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:
Cordova (typically for native phone/tablet apps)
NW.js (typically used for desktop apps)
Electron (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:
Flutter
React Native

Web Technologies Employed by Front-End Developers

The following core web technologies are employed by front-end developers (consider
learning them in this order):

1. Hyper Text Markup Language (aka HTML)
2. Cascading Style Sheets (aka CSS)
3. Uniform Resource Locators (aka URLs)
4. Hypertext Transfer Protocol (aka HTTP)
5. JavaScript Programming Language (aka ECMAScript 262)
6. JavaScript Object Notation (aka JSON)
7. Document Object Model (aka DOM)
8. Web APIs (aka HTML5 and friends or Browser APIs)
9. Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)

Front-End Dev Skills

Basic to advanced HTML, CSS, DOM, JavaScript, HTTP/URL, and browser skills are
assumed for any type of front-end developer.
Beyond HTML, CSS, DOM, JavaScript, HTTP/URL, and browser development know-how, a
front-end developer could be skilled in one or more of the following:
Beyond HTML, CSS, DOM, JavaScript, HTTP/URL, and browser development know-how, a
front-end developer could be skilled in one or more of the following:

• 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 DegVersion 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 AutomResponsive 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