{"id":21589,"date":"2014-07-07T18:01:41","date_gmt":"2014-07-07T10:01:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21589"},"modified":"2025-04-04T02:00:14","modified_gmt":"2025-04-03T18:00:14","slug":"cordova-getting-started","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/","title":{"rendered":"Creating Your Own Mobile App with Cordova"},"content":{"rendered":"<p>For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web technologies you already know: HTML, CSS, and JavaScript. This means there\u2019s no need to learn new programming languages.<\/p>\n<p>With the help of the Phonegap build tool, you can <strong>turn your code into apps for iOS, Android, Windows Phone, and BlackBerry<\/strong>. So, where do you begin?<\/p>\n<p>The first step is to create a <strong>\u201cCordova Project.\u201d<\/strong> If you\u2019re a web developer eager to venture into mobile app development, this post is for you. We\u2019ll guide you through the simplest way to kick off a Cordova project for mobile app development. Let\u2019s dive in.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/mobile-frameworks\/\" class=\"ref-block__link\" title=\"Read More: 10 HTML\/CSS & JavaScript Frameworks to Build Mobile Apps\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 HTML\/CSS & JavaScript Frameworks to Build Mobile Apps<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/mobile-frameworks.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-19941 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/mobile-frameworks.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 HTML\/CSS & JavaScript Frameworks to Build Mobile Apps<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tFor many web developers, which may only be familiar with HTML, CSS, and JavaScript, developing a native mobile...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Cordova Command-line Interface (CLI)<\/h2>\n<p>The Cordova platform includes a <strong>Command-line Interface (CLI)<\/strong> that simplifies project creation, emulation, and app building. To use the CLI, you must have Node.js installed because it\u2019s available as a Node.js Package.<\/p>\n<p>Once Node.js is set up on your computer, enter the following command in your Terminal or Command Prompt to install the Cordova CLI:<\/p>\n<pre>\r\n npm install -g cordova\r\n <\/pre>\n<p>This installs the <code>cordova<\/code> command globally, allowing you to access it from any directory on your computer. To check the version of Cordova installed, type <code>cordova -v<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-version.jpg\" alt=\"Cordova version command output\" height=\"100\" width=\"500\"><\/figure>\n<h2>Launching Your Project<\/h2>\n<p>After Cordova CLI is installed, initiating a new Cordova project is straightforward. Even if you\u2019re not well-versed in command-line operations, the process is designed to be user-friendly. To create a new project, simply use the <code>create<\/code> command along with your desired project folder name, like so:<\/p>\n<pre>\r\n cordova create hongkiatcom\r\n<\/pre>\n<p>This step gathers all necessary and some example files to kick-start your development journey.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-created.jpg\" alt=\"Cordova project created\" height=\"100\" width=\"500\"><\/figure>\n<p>Upon project creation, navigate into the project directory with <code>cd &lt;project-directory-name&gt;<\/code>. Inside, you\u2019ll find several folders essential for your project:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-folders.jpg\" alt=\"Cordova project folders\" height=\"150\" width=\"500\"><\/figure>\n<ul>\n<li>The <strong>hooks<\/strong> folder, where scripts can be added to customize Cordova\u2019s native commands.<\/li>\n<li>The <strong>merges<\/strong> folder, housing platform-specific HTML, CSS, and JavaScript files that will replace those in the www folder upon deployment.<\/li>\n<li>The <strong>platforms<\/strong> folder, containing native app files for each target platform.<\/li>\n<li>The <strong>plugins<\/strong> folder, for Cordova plugins that enhance your app.<\/li>\n<li>The <strong>www<\/strong> folder, with general web files used across all platforms.<\/li>\n<\/ul>\n<h2>Selecting an IDE for Development<\/h2>\n<p>Before moving forward, it\u2019s necessary to choose an Integrated Development Environment (IDE) compatible with your target platform \u2013 Xcode for iOS apps, Android Studio for Android, or Visual Studio for Windows Phone. On OS X with Xcode already installed, I\u2019ll demonstrate adding the iOS platform to my project.<\/p>\n<p>Execute the command below to include the iOS platform in your project:<\/p>\n<pre>\r\n cordova platform add ios\r\n<\/pre>\n<p>This command adds the necessary native files for the specified platform. For iOS, you\u2019ll find an <strong>ios<\/strong> folder filled with <code>.xcodeproj<\/code> files and various others as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-platform-add.jpg\" alt=\"iOS platform files added to Cordova project\" height=\"320\" width=\"500\"><\/figure>\n<p>Similarly, if you opt for Android, a corresponding <strong>android<\/strong> folder will be created.<\/p>\n<h2>Integrating the Project into IDE (Xcode)<\/h2>\n<p>Next, we integrate the project directory with your Integrated Development Environment (IDE), in this case, Xcode. Start by launching Xcode, then navigate through <strong>File &gt; Open<\/strong>, and proceed to the platform directory \u2013 for instance, <strong>\/platforms\/ios<\/strong>. Click <strong>Open<\/strong> to load the folder in Xcode.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-xcode.jpg\" alt=\"Cordova project in Xcode\" height=\"320\" width=\"500\"><\/figure>\n<p>Within the <strong>www<\/strong> folder, you\u2019re free to adjust HTML, CSS, images, and JavaScript files as needed. After making your modifications, hit the play button at the top left corner of Xcode to compile the app and launch it in the iPhone Simulator.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/build-app.jpg\" alt=\"Building app in Xcode\" height=\"600\" width=\"500\"><\/figure>\n<h2>Wrapping Up<\/h2>\n<p>Cordova simplifies the mobile app development process, making it as straightforward as website creation. This guide walked you through starting a Cordova project and previewing your app in the iOS simulator, but there\u2019s much more to discover within Cordova. It\u2019s my hope that this introduction will pave the way for your journey into mobile app development with Phonegap.<\/p>\n<p><strong>Note:<\/strong> This article was initially published on July 7, 2014.<\/p>","protected":false},"excerpt":{"rendered":"<p>For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web technologies you already know: HTML, CSS, and JavaScript. This means there\u2019s no need to learn new programming languages. With the help of the Phonegap build tool, you can turn your code&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3399,352],"tags":[3224,2856,3214,2339],"topic":[4520,4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating Your Own Mobile App with Cordova - Hongkiat<\/title>\n<meta name=\"description\" content=\"For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Your Own Mobile App with Cordova\" \/>\n<meta property=\"og:description\" content=\"For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-07T10:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:00:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-version.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Creating Your Own Mobile App with Cordova\",\"datePublished\":\"2014-07-07T10:01:41+00:00\",\"dateModified\":\"2025-04-03T18:00:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/\"},\"wordCount\":638,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/cordova-getting-started\\\/cordova-version.jpg\",\"keywords\":[\"Cordova\",\"Dev Tools\",\"Mobile App Development\",\"Mobile Apps\"],\"articleSection\":[\"Mobile\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/\",\"name\":\"Creating Your Own Mobile App with Cordova - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/cordova-getting-started\\\/cordova-version.jpg\",\"datePublished\":\"2014-07-07T10:01:41+00:00\",\"dateModified\":\"2025-04-03T18:00:14+00:00\",\"description\":\"For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/cordova-getting-started\\\/cordova-version.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/cordova-getting-started\\\/cordova-version.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cordova-getting-started\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Your Own Mobile App with Cordova\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Your Own Mobile App with Cordova - Hongkiat","description":"For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/","og_locale":"en_US","og_type":"article","og_title":"Creating Your Own Mobile App with Cordova","og_description":"For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web","og_url":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-07-07T10:01:41+00:00","article_modified_time":"2025-04-03T18:00:14+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-version.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Creating Your Own Mobile App with Cordova","datePublished":"2014-07-07T10:01:41+00:00","dateModified":"2025-04-03T18:00:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/"},"wordCount":638,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-version.jpg","keywords":["Cordova","Dev Tools","Mobile App Development","Mobile Apps"],"articleSection":["Mobile","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/","url":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/","name":"Creating Your Own Mobile App with Cordova - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-version.jpg","datePublished":"2014-07-07T10:01:41+00:00","dateModified":"2025-04-03T18:00:14+00:00","description":"For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-version.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/cordova-getting-started\/cordova-version.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/cordova-getting-started\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Your Own Mobile App with Cordova"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5Cd","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=21589"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21589\/revisions"}],"predecessor-version":[{"id":73706,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21589\/revisions\/73706"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=21589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=21589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=21589"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=21589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}