Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mikeroyal/cordova-guide

Apache Cordova Guide
https://github.com/mikeroyal/cordova-guide

cordova cross-platform html-css html5 javascript

Last synced: 15 days ago
JSON representation

Apache Cordova Guide

Awesome Lists containing this project

README 

        


 

  


  Apache Cordova Guide




#### A guide covering the Apache Cordova framework including the applications and tools that will make you a better and more efficient developer with Apache Cordova.



**Note: You can easily convert this markdown file to a PDF in [VSCode](https://code.visualstudio.com/) using this handy extension [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf).**



# Table of Contents



1. [Cordova Learning Resources](https://github.com/mikeroyal/Cordova-Guide#cordova-learning-resources)



2. [Cordova Tools, Libraries and Frameworks](https://github.com/mikeroyal/Cordova-Guide#cordova-tools-libraries-and-frameworks)



3. [HTML/CSS Development](https://github.com/mikeroyal/Cordova-Guide#htmlcss-development)



 


 

  





# Cordova Learning Resources

[Back to the Top](https://github.com/mikeroyal/Cordova-Guide#table-of-contents)



[Apache Cordova](https://cordova.apache.org) is a mobile application development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platform's native development language.



[Getting Started with Cordova](https://cordova.apache.org/#getstarted)



[Top Apache Cordova Courses on Udemy](https://www.udemy.com/topic/Apache-Cordova/)



[Apache Cordova - Building Hybrid Mobile App for Android & iOS Course on Udemy](https://www.udemy.com/course/apache-cordova/)



[Learning Apache Cordova Course on Linkedin Learning](https://www.linkedin.com/learning/learning-apache-cordova)



[Apache Cordova: Building Cross-Platform Mobile Apps Course on Linkedin Learning](https://www.linkedin.com/learning/apache-cordova-building-cross-platform-mobile-apps?trk=course_title&upsellOrderOrigin=default_guest_learning)



[Choosing a Cross-Platform Development Tool: Cordova, Ionic, React Native, Titanium, and Xamarin Course on Linkedin Learning](https://www.linkedin.com/learning/choosing-a-cross-platform-development-tool-cordova-ionic-react-native-titanium-and-xamarin?trk=learning-serp_learning_search-card&upsellOrderOrigin=default_guest_learning)



[Convert a web app to a Cordova project Course on Linkedin Learning](https://www.linkedin.com/learning/choosing-a-cross-platform-development-tool-cordova-ionic-react-native-titanium-and-xamarin/convert-a-web-app-to-a-cordova-project?trk=learning-serp_learning_search-card&upsellOrderOrigin=default_guest_learning)



[Build a Cordova app Course on Linkedin Learning](https://www.linkedin.com/learning/choosing-a-cross-platform-development-tool-cordova-ionic-react-native-titanium-and-xamarin/build-a-cordova-app?trk=learning-serp_learning_search-card&upsellOrderOrigin=default_guest_learning)



[JavaScript Programming with Visual Studio Code](https://code.visualstudio.com/Docs/languages/javascript)



[Google's JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)



[Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)



# Cordova Tools, Libraries and Frameworks

[Back to the Top](https://github.com/mikeroyal/Cordova-Guide#table-of-contents)



[Visual Studio Code](https://code.visualstudio.com/) is a code editor redefined and optimized for building and debugging modern web and cloud applications.



[VSCode Cordova](https://github.com/Microsoft/vscode-cordova) is a Visual Studio Code extension providing intellisense, debug, and build support for Cordova and Ionic projects.



[WebStorm](https://www.jetbrains.com/webstorm/) is a professional IDE for JavaScript(including support for both HTML and CSS) developed by JetBrains. WebStorm comes with intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JavaScript, TypeScript, stylesheet languages, and all the most popular frameworks([Angular](https://angular.io/), [React](https://reactjs.org/), [Vue.js](https://vuejs.org/), [Ionic](https://ionicframework.com/), [Apache Cordova](https://cordova.apache.org/), [React Native](https://reactnative.dev/), [Node.js](https://nodejs.org/), [Meteor](https://www.meteor.com/#!), and [Electron](https://www.electronjs.org/)).



[Ionic](https://ionicframework.com/) is a front-end SDK for building cross-platform mobile apps. Built on top of Angular, Ionic also provides a platform for integrating services like push notifications and analytics.



[Monaca](https://monaca.io/) is a comprehensive cloud-powered and framework-agnostic set of tools Monaca supports both online and offline development, debugging with live-reload feature and cloud build experience.



[Onsen UI](http://onsen.io/) is a custom Elements-based HTML5 framework offers a large selection of components and responsive layout support. Onsen UI lets you create professionally designed multiplatform apps without acquiring additional skillset.



[App Builder](http://www.getappbuilder.com/) is a complete IDE for Microsoft Windows which allows to create HTML5 and native apps without programming knowledge. Offers dozens of controls and actions ready to be used in your apps and lot of app samples to learn it.



[Framework7](http://www.idangero.us/framework7/) is a free and open source mobile HTML framework for developing hybrid mobile apps or web apps with iOS & Android native look and feel.



[NSB/AppStudio](https://www.nsbasic.com/) is an IDE for webapps/native apps. One step install includes complete PhoneGap integration, plus Bootstrap, jQuery Mobile and jqWidgets. Drag and Drop Designer. Easy programming in JavaScript or BASIC. Windows and MacOS.



[Mobiscroll](https://mobiscroll.com/) is a collection of cross platform UI controls for delivering polished iOS, Android & Windows Phone apps. Framework agnostic, use it with plain Javascript, jQuery, Angular, React or Knockout.



[Instabug](https://instabug.com/platforms/cordova) is a service that provides Cordova developers with a bug reporting and in-app feedback solution. With a one minute install guide, it enables users to seamlessly report bugs while automatically attaching details such as network logs, repro-steps, etc.



[Quasar](https://quasar.dev/) is a write code once and simultaneously deploy it as a website, Mobile / Electron App or Browser Extension. Yes, one codebase for all of them, helping you develop an app in record time by using a state-of-the-art CLI and backed by best-practice, blazing f...



[VoltBuilder](https://volt.build/) is a modern replacement for PhoneGap Build. Upload project and certificates, then download builds (or upload to store). Uses latest Apache Cordova and SDKs. There's nothing to install: just sign up and submit.



[VoltSigner](https://voltsigner.com/) is a free service to create Android and iOS signing certificates. Run completely in your local browser - nothing gets uploaded. Compatible with all build tools. Notably, it can produce iOS certificates on Windows.



[NPM](https://www.npmjs.com/) is the company behind Node package manager, the npm Registry, and npm CLI.



[node-gyp](https://github.com/nodejs/node-gyp) is a cross-platform command-line tool written in Node.js for compiling native addon modules for Node.js. It contains a vendored copy of the gyp-next project that was previously used by the Chromium team, extended to support the development of Node.js native addons.



[nvm ](https://github.com/nvm-sh/nvm) is a version manager for node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on these platforms: unix, macOS, and windows WSL.



[node-docker](https://hub.docker.com/_/node/) is the official Node.js docker image, made with love by the node community.



[Mocha](https://github.com/mochajs/mocha) is a simple, flexible, fun JavaScript test framework for Node.js & The Browser.



[AVA](https://github.com/avajs/ava) is a test runner for Node.js with a concise API, detailed error output, embrace of new language features and process isolation that lets you develop with confidence.



[egg](https://eggjs.org/) is a born to build better enterprise frameworks and apps with Node.js & Koa.



[Fastify](https://www.fastify.io/) is a fast and low overhead web framework, for Node.js.



[Express](https://expressjs.com/) is a fast, unopinionated, minimalist web framework for node.



[Meteor](https://www.meteor.com/) is an ultra-simple environment for building modern web applications with JavavScript.



[NW.js](https://nwjs.io/) is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.



[PM2](https://pm2.io/) is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, to reload them without downtime and to facilitate common system admin tasks.



[GraphQL](https://graphql.org/) is a query language for APIs and a runtime for fulfilling those queries with your existing data. It has support in Java, JavaScript, Ruby, Scala, and other programming languages.



[Apollo Client](https://apollographql.com/client) is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.



[Nest](https://nestjs.com/) is a framework for building efficient, scalable [Node.js](http://nodejs.org/) server-side applications. It uses modern JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).



[Meteor](https://www.meteor.com/) is an ultra-simple environment for building modern web applications with JavavScript.



[mysqljs](https://github.com/mysqljs/mysql) is a pure node.js JavaScript Client implementing the MySQL protocol.



[axios](https://github.com/axios/axios) is a promise based HTTP client for the browser and node.js.



[Storybook](https://storybook.js.org/) is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.It works with React, Vue, Angular, Ember, and other web frameworks.



[Next.js](https://github.com/vercel/next.js) is a React Framework for production gives you the best developer experience with all the features needed for production such as hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.



[Standard](https://standardjs.com/) is a JavaScript Style Guide, with linter & automatic code fixer.



[React Starter Kit](https://www.reactstarterkit.com/) is an isomorphic web app boilerplate for web development built on top of [Node.js](https://nodejs.org/), [Express](http://expressjs.com/), [GraphQL](http://graphql.org/) and [React](https://facebook.github.io/react/), containing modern web development tools such as [Webpack](https://webpack.github.io/), [Babel](https://babeljs.io/) and [Browsersync](https://www.browsersync.io/). Helping you to stay productive following the best practices.



[React Boilerplate](https://www.reactboilerplate.com/) is a highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.



[TypeORM](https://github.com/typeorm/typeorm) is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used with TypeScript and JavaScript (ES5, ES6, ES7, ES8).



[Enzyme](https://github.com/enzymejs/enzyme) is a JavaScript Testing utility for React that makes it easier to test your React Components' output. The user can also manipulate, traverse, and in some ways simulate runtime given the output.



[RxDB](https://github.com/pubkey/rxdb) is a NoSQL-database for JavaScript Applications like Websites, hybrid Apps, Electron-Apps, Progressive Web Apps and NodeJs.



[Redux](https://github.com/reduxjs/redux) is a predictable state container for JavaScript apps.



[Inferno](https://infernojs.org/) is an insanely fast, React-like library for building high-performance user interfaces on both the client and server.



[Expo](https://github.com/expo/expo) is an open-source platform for making universal native apps with React.



[React Native Windows](https://microsoft.github.io/react-native-windows/) is a ramework for building native Windows apps with React. [React Native](https://reactnative.dev/) is a framework developed by Facebook that enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.



[ReactiveUI](https://reactiveui.net/) is a composable, cross-platform model-view-viewmodel framework for all .NET platforms that is inspired by functional reactive programming, which is a paradigm that allows you to abstract mutable state away from your user interfaces and express the idea around a feature in one readable place and improve the testability of your application.



# HTML/CSS Development

[Back to the Top](https://github.com/mikeroyal/Cordova-Guide#table-of-contents)



## HTML/CSS Learning Resources



[HTML (HyperText Markup Language)](https://developer.mozilla.org/en-US/docs/Web/HTML) is the basic building blocks of the Web. It defines the meaning and structure of web content along with other technologies used to describe a web page's appearance/presentation using CSS or functionality/behavior using JavaScript.



[Cascading Style Sheets (CSS)](https://developer.mozilla.org/en-US/docs/Web/CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS also describes how elements should be rendered on screen, on paper, in speech, or on other media.



[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)



[Airbnb CSS / Sass Style Guide](https://github.com/airbnb/css)



[HTML Styles CSS](https://www.w3schools.com/html/html_css.asp)



[CSS Tutorial](https://www.w3schools.com/Css/)



[Microsoft Certified Solutions Associate (MCSA): Web Applications](https://docs.microsoft.com/en-us/learn/certifications/mcsa-web-applications-certification)



[Intro to HTML/CSS: Making webpages by Khanacademy](https://www.khanacademy.org/computing/computer-programming/html-css)



[Intro to HTML and CSS by Udacity](https://www.udacity.com/course/intro-to-html-and-css--ud001)



[Learn to style HTML using CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS)



[The HTML and CSS Workshop](https://www.packtpub.com/product/the-html-and-css-workshop/9781838824532)



[Modern HTML & CSS From The Beginning (Including Sass) by Udemy](https://www.udemy.com/course/modern-html-css-from-the-beginning/)



[Using Glitch for Developer Relations](https://glitch.dev)



## HTML/CSS Tools and Frameworks



[WebStorm](https://www.jetbrains.com/webstorm/) is a professional IDE for JavaScript(including support for both HTML and CSS) developed by JetBrains. WebStorm comes with intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JavaScript, TypeScript, stylesheet languages, and all the most popular frameworks([Angular](https://angular.io/), [React](https://reactjs.org/), [Vue.js](https://vuejs.org/), [Ionic](https://ionicframework.com/), [Apache Cordova](https://cordova.apache.org/), [React Native](https://reactnative.dev/), [Node.js](https://nodejs.org/), [Meteor](https://www.meteor.com/#!), and [Electron](https://www.electronjs.org/)).



[Codeanywhere](https://codeanywhere.com/) is a Cloud Integrated Development Environment. Our Cloud IDE saves you time by deploying a development environment in seconds, enabling you to code, learn, build, and collaborate on your projects.



[Adobe Brackets](https://github.com/adobe/brackets) is a modern open-source code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript.



[Adobe TypeKit](https://fonts.adobe.com/typekit) is the Adobe font subscription service for both web and desktop fonts, that makes thousands of fonts from quality foundries accessible, with no extra licensing required.



[Ultimate CSS Gradient Generator](https://www.colorzilla.com/gradient-editor/) is a powerful Photoshop-like CSS gradient editor from [ColorZilla](https://www.colorzilla.com).



[PostCSS](https://postcss.org) is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.



[PurgeCSS](https://purgecss.com/) is a tool to remove unused CSS in your project.



[Tailwind UI](https://tailwindcss.com/) is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you want to build.



[Sass(Syntactically Awesome Style Sheets)](https://sass-lang.com/) is a professional grade CSS extension language.



[HTML KickStart](https://github.com/joshuagatcke/HTML-KickStart) is a ultra-lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you a lot of hours on your next web project.



[Mercury](https://github.com/jejacks0n/mercury) is a full featured HTML5 editor. It was built from the ground up to help your team get the most out of content editing in modern browsers.



[Maquetta](https://github.com/maqetta/maqetta) is a WYSIWYG visual page editor for drawing out user interfaces using drag/drop assembly. Maqetta supports both desktop and mobile user interfaces.



[Initializr](https://www.initializr.com/) is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate.



[Radi](https://radiapp.com/) is a tool designed from the ground up to help you create content that will take full advantage of HTML5 features.



[Onsen UI](https://onsen.io/) is an open source framework that makes it easy to create native-feeling Progressive Web Apps (PWAs) and hybrid apps. Based on [Web Components](https://webcomponents.org/), and provides bindings for Angular 1, 2, React and Vue.js.



[Framework7](https://framework7.io/) is a free and open source framework to develop mobile, desktop or web apps with native look and feel. It is also an indispensable prototyping tool to show working app prototype as soon as possible in case you need to.



[Gauge.js](https://github.com/bernii/gauge.js/) is a native and cool looking animated JavaScript/CoffeScript gauge.



[SproutCore](https://sproutcore.com/) is an open-source framework for building blazingly fast, innovative user experiences on the web.



[Tumult Hype](https://tumult.com/) is the HTML5 creation app for macOS. The animations and interactive content made with Tumult Hype work on desktops, smartphones and iPads with no code required.



[CSS Gradient](https://cssgradient.io/) is a happy little website and free tool that lets you create a gradient background for websites.



[Glitch](https://glitch.com) makes easier to build fast, full-stack web apps in your browser for free.



[CSS Optimizer](https://www.csstidyonline.com) is an online tool to clean, compress, and optimize your CSS code.



[Sciter](https://github.com/c-smile/sciter-sdk) is an embeddable HTML/CSS/scripting engine, Windows, MacOS and Linux.



[Flexy](https://vladocar.github.io/flexy/) is minimal CSS framework made with Flex.



[Simple CSS](https://www.hostm.com/css) is a tool that allows you to easily create Cascading Style Sheets from scratch, and modify existing ones, using a familiar point-and-click interface. With Simple CSS, you can manage multiple CSS projects, import existing .css files as desired, and export projects to .css files.



[Conditional-CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules) is a CSS module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.



[Kotatsu](https://github.com/Yomguithereal/kotatsu) is a straightforward CLI tool aiming either at running node.js scripts or serving JavaScript/TypeScript web applications in a modern environment.



[AWK](https://awk.js.org/) is a scripting language used for manipulating data and generating reports.



## Contribute



- [x] If would you like to contribute to this guide simply make a [Pull Request](https://github.com/mikeroyal/Cordova-Guide/pulls).



## License

[Back to the Top](https://github.com/mikeroyal/Cordova-Guide#table-of-contents)



Distributed under the [Creative Commons Attribution 4.0 International (CC BY 4.0) Public License](https://creativecommons.org/licenses/by/4.0/).