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 apps 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.

These four run times scenarios are explained below.

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, craping, unit testing, etc.). Think of headless browsers as a browser that you can run from the command line that can retrieve and traverse webpages.

The most common headless browsers are:

• Headless Chromium
• Zombie
• slimerjs

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)

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)

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.

Most relevant specifications / documentation:

• All W3C HTML Spec
• The elements of HTML from the Living Standard
• Global attributes
• HTML 5.2 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.

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.

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.

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).

Most relevant specifications / documentation:

• Document Object Model (DOM) Level 3 Events Specification
• DOM Living Standard
• W3C DOM4

JavaScript Programming Language (aka ECMAScript 262)

JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded.

• Basics of javascript

Web APIs (aka HTML5 and friends)

When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site.

JavaScript Object Notation (aka JSON)

It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX). Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages. The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json.

Most relevant specifications:

• Introducing JSON
• JSON API
• The JSON Data Interchange Format

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:

• Content Management Systems (aka CMS)
• 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
• 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

Thank you!!