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).
APIs(Application Programming Interfaces (APIs)) are programming features for manipulating different aspects of the browser and operating system the site is running on or manipulating data from other web sites or services. In this module, we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.
HTML
- Hypertext Markup Language (HTML) is the code that you use to structure your web content and give it meaning and purpose.
is my content a set of paragraphs or a list of bullet points?
Do I have images inserted on my page? Do I have a data table?
CSS
- Cascading Stylesheets (CSS) is the code that you use to style your website.
Do you want the text to be black or red?
Where should content be drawn on the screen?
What background images and colors should be used to decorate your website?
JAVASCRIPT
- JavaScript is the programming language that you use to add interactive features to your website.
Some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more.
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, 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 a 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 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)
- lectron (typically used for desktop apps)
Native from Web Tech
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
Top comments (0)