<!DOCTYPE html><html data-app-version="-production" lang="en"><head><link rel="next" href="https://code.tutsplus.com/c/mobile-development?page=2"></link><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-solid-900-130191cbdfe1d7a5dde9.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-regular-400-7b8124cb811f19c72e48.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-brands-400-78547c4b11a377e195ff.woff2" as="font" type="font/woff2" crossorigin="anonymous"><script>window.Tutsplus = {};
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
Tutsplus.environment = 'production';
Tutsplus.apexDomain = 'tutsplus.com';
Tutsplus.recaptchaSiteKey = '6Ldpx74UAAAAACuA5loIvNFtSYkAxOiK89Otp9dp';
Tutsplus.rollbarToken = '15981c89d2cb4b20994adb78613f9f59';
Tutsplus.rollbarEnabled = false;
Tutsplus.ssoEnabled = true;
Tutsplus.ssoServer = 'https://account.envato.com';
Tutsplus.ssoSignInPath = '/sso/sign_in.json';
Tutsplus.resetPasswordPath = 'https://account.envato.com/reset_password?to=tutsplus?to=tutsplus';
Tutsplus.forcedResetPasswordPath = 'https://account.envato.com/password_reset_required?to=tutsplus?to=tutsplus';
Tutsplus.adsEnabled = true;
Tutsplus.is_posts_page = true;
Tutsplus.is_post_page = false;
Tutsplus.ext_social = false;
Tutsplus.load_mathjax_library = false;
Tutsplus.load_twitter_widget = false;</script><script type="text/javascript" data-turbo-eval="false">
  window.addEventListener("CookiebotOnDialogDisplay", (event) => {
    const cookieDialog = event.srcElement.CookieConsentDialog.DOM

    cookieDialog.dataset.turbo = false
  })
</script>

<script
  id="Cookiebot"
  src="https://consent.cookiebot.com/uc.js"
  data-cbid="d10f7659-aa82-4007-9cf1-54a9496002bf"
  data-framework="TCFv2.2"
  type="text/javascript" 
  data-georegions="{'region':'US','cbid':'d9683f70-895f-4427-97dc-f1087cddf9d8'}"
  async>
</script>
<script type="text/plain" data-cookieconsent="statistics" data-test-id="gtm-loader">
  window['gtag_enable_tcf_support'] = true;
  if (!window.gtmLoaded) {
    (function(w,d,s,l,i) {
      w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
      var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l!='dataLayer'?'&l='+l:'';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id='+i+dl;
        f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-MXT8M8X');
    window.gtmLoaded = true;
  }
</script>
<script src="https://static.tutsplus.com/packs/js/runtime-19943e64c9884bf4156f.js" data-turbo-suppress-warning="" async="async"></script>
<script src="https://static.tutsplus.com/packs/js/549-95c2196107c2425cbb9a.js" data-turbo-suppress-warning="" async="async"></script>
<script src="https://static.tutsplus.com/packs/js/692-c9d3e303592f2fb87a6b.js" data-turbo-suppress-warning="" async="async"></script>
<script src="https://static.tutsplus.com/packs/js/779-db62d527056ee95ea938.js" data-turbo-suppress-warning="" async="async"></script>
<script src="https://static.tutsplus.com/packs/js/697-2b0c431a045f686179ba.js" data-turbo-suppress-warning="" async="async"></script>
<script src="https://static.tutsplus.com/packs/js/posts-5877689fe845d41f96cf.js" data-turbo-suppress-warning="" async="async"></script><link rel="stylesheet" href="https://static.tutsplus.com/packs/css/697-c547c956.css" media="all" />
<link rel="stylesheet" href="https://static.tutsplus.com/packs/css/posts-d6c1190f.css" media="all" /><link href="/tailwind.css" rel="stylesheet" type="text/css" /><meta content="no-referrer-when-downgrade" name="referrer" /><meta charset="utf-8" /><meta content="no-cache" name="turbo-cache-control" /><meta content="reload" name="turbo-visit-control" /><meta content="" name="geo-regions" /><meta content="nocache" name="bingbot" /><link href="https://static.tutsplus.com" rel="preconnect" /><title>Courses and Tutorials in Mobile Development | Envato Tuts+</title><link rel="canonical" href="https://code.tutsplus.com/c/mobile-development" /><link rel="icon" type="image/x-icon" href="https://static.tutsplus.com/packs/static/images/favicon-f8d459d2fa865233f59c.ico" /><link rel="apple-touch-icon" type="image/png" href="https://static.tutsplus.com/packs/static/images/apple-touch-icon-46747f8b314a25bfa124.png" /><link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="https://tutsplus.com/posts.atom" /><meta content="width=device-width, initial-scale=1" name="viewport" /><meta content="index, follow" name="robots" /><meta content="Courses and Tutorials in Mobile Development | Envato Tuts+" property="og:title" /><meta content="Code Envato Tuts+" property="og:site_name" /><meta content="1494084460809023" property="fb:app_id" />  <meta property="og:description" name="description" content="Learn mobile development from start to finish with these free tutorials. Create iOS and Android apps using Ionic, React Native, Kotlin, Firebase, and more.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://code.tutsplus.com/c/mobile-development">
<meta content="https://static.tutsplus.com/packs/static/images/favicon-831ac44a947d39de4326.png" property="og:image" /><script type="application/ld+json"> { "@context": "https://schema.org",   "@type": "OnlineBusiness",   "name": "Envato Tuts+.",   "alternateName": [      "Tutsplus",      "Tuts +"   ],   "url": "https://tutsplus.com/",   "logo": "https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png",   "description": "Learn creative skills from leading industry experts with Envato Tuts+. Start your learning journey today!",   "contactPoint": {"@type": "ContactPoint", "contactType": "Corporate contact", "url": "https://help.elements.envato.com/hc/en-us", "availableLanguage": ["English"], "areaServed": "Worldwide"},   "address": {      "@type": "PostalAddress",      "postOfficeBoxNumber": "16122",      "streetAddress": "Collins Street West",      "addressLocality": "Melbourne",      "addressRegion": "Victoria",      "postalCode": "8007",      "addressCountry": "AU"   },   "sameAs": [      "https://www.facebook.com/envato",      "https://x.com/envato",      "https://www.instagram.com/envato/",      "https://www.youtube.com/@envatotuts",      "https://www.youtube.com/@Envato_Video",      "https://www.tiktok.com/@envato",      "https://www.linkedin.com/company/envato/",      "https://www.pinterest.nz/envato/",      "https://elements.envato.com/",      "https://themeforest.net",      "https://codecanyon.net",      "https://audiojungle.net",      "https://videohive.net",      "https://graphicriver.net",      "https://photodune.net",      "https://3docean.net",      "https://placeit.net",      "https://mixkit.co/",      "https://www.reshot.com/"   ],   "subOrganization": [     {       "@type": "OnlineBusiness",       "name": "Envato Elements",       "url": "https://elements.envato.com/"     },     {       "@type": "OnlineBusiness",       "name": "Placeit",       "url": "https://placeit.net/"     },     {       "@type": "OnlineBusiness",       "name": "Envato Market",       "url": "https://market.envato.com"     },     {       "@type": "OnlineBusiness",       "name": "mixkit",       "url": "https://mixkit.co/"     },     {       "@type": "OnlineBusiness",       "name": "Reshot",       "url": "https://www.reshot.com/"     }   ]  }</script><script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Envato Tuts+",
    "url": "https://tutsplus.com"
  }
</script>
<meta content="t60fIs6JfmiK5FpPBlh_bKr5lJSX6abJYYIFjqiFG3M" name="google-site-verification" /><meta content="D3E35339A8EC086B14C62277CBEC8234" name="msvalidate.01" /><meta content="zvqxFgQqdy" name="baidu-site-verification" /></head><body class="page-body topic-code post__fullwidth-inarticle-ad-footer" data-advertise-options-value="{}" data-analytics-context="body" data-controller="ga-analytics content-filters utm advertise svg cookiebot" data-ga-autolink-domains="activeden.net,audiojungle.net,themeforest.net,videohive.net,graphicriver.net,3docean.net,codecanyon.net,photodune.net,market.envato.com,elements.envato.com,build.envatohostedservices.com,author.envato.com,envato.com" data-ga-domain="tutsplus.com" data-wt-dcsid="dcs222cpd4g6lg7wb3cum8l5g_6w6m" name="page-body"><!-- Google Tag Manager Body -->
<script data-test-id="gtm-page-attributes">
  window.dataLayer = window.dataLayer || [];

  function normalizeAttributeValue(value) {
    if (value === undefined) return undefined
    if (value === null) return undefined

    var normalizedValue = value
      .toString()
      .toLowerCase()
      .trim()
      .replace(/&amp;/g, '&')
      .replace(/&#39;/g, "'")
      .replace(/\s+/g, ' ')

    if (normalizedValue === '') return undefined
    return normalizedValue
  }

  (function () {
    if (document.documentElement.hasAttribute('data-turbo-preview')) return

    var pageAttributes = {
      app_name: 'tutsplus',
      app_version: '3804',
      app_env: 'production',
      topic: 'code',
      page_type: 'content list',
      category: 'Mobile Development',
      sub_category: '',
      software_tag: '',
      tag: '',
      ga_param: ''
    }

    var normalizedPageAttributes = { event_attributes: null }
    Object.keys(pageAttributes).forEach(function(key) {
      normalizedPageAttributes[key] =  normalizeAttributeValue(pageAttributes[key])
    })

    dataLayer.push(normalizedPageAttributes)
    dataLayer.push({
      event: 'analytics_ready',
      event_attributes: {
        custom_timestamp: Date.now()
      }
    })
  })()
</script>
<noscript data-test-id="gtm-noscript">
  <iframe
    src="https://www.googletagmanager.com/ns.html?id=GTM-MXT8M8X"
    height="0"
    width="0"
    style="display:none;visibility:hidden"
  >
  </iframe>
</noscript>
<!-- End Google Tag Manager -->
<!--[if lt IE 10]><div class="legacy-ie-banner"><h2 class="legacy-ie-banner__title">Unsupported browser</h2><p class="legacy-ie-banner__text">This site was designed for modern browsers and tested with Internet Explorer version 10 and later. </p><p class="legacy-ie-banner__text">It may not look or work correctly on your browser. </p></div><![endif]--><script src="https://static.tutsplus.com/packs/js/global_nav_scroll-d17e6884a4d3d55750f5.js" defer="defer"></script><nav class="global-nav view new-nav" data-analytics-context="navigation" data-controller="global-nav"><a class="global-new-nav__skip-to-content-link" data-action="click-&gt;global-nav#sendNewNavDataLayerEvent" href="#page-content">Skip to content</a><div
  class=""
  data-controller="announcement-bar"
  data-announcement-id="ai_design_2025"
  data-background-image=""
  data-fallback-background-color=""
  data-text-color=""
  data-link-color=""
  data-analytics-context="announcement bar" >
  <div class="">
    <div class="relative flex h-16 md:h-[50px] items-center justify-center bg-[#87E64B] font-family-polysan-regular-median text-center text-sm font-bold text-[#191919] px-2.5">
  <div class="gap-x-4 px-3 md:flex md:h-12 md:flex-row md:items-center md:justify-center">
    <p class="announcement-bar__title-desktop inline h-12 items-center justify-center md:flex">Envato: Get every type of asset for any type of project, and a full stack of AI tools</p>
    <a href="https://elements.envato.com/pricing/?utm_source=tutsplus.com&amp;utm_medium=promos&amp;utm_campaign=elements_tuts-header_promo" data-action="click-&gt;ga-analytics#sendElementsClickEvent" class="rounded-xs !text-[#191919] underline md:no-underline md:flex md:h-8 md:w-40 md:items-center md:justify-center md:bg-[#191919] md:hover:bg-[#383838] md:!text-white"> From $16.50/m </a>
    <div data-action="click-&gt;announcement-bar#close click-&gt;lobal-nav#onAnnouncementBarClose" class="absolute right-3 top-2 md:top-auto cursor-pointer flex">
      <i class="fa fa-times announcement-bar__close-icon"></i>
    </div>
  </div>
</div> 
  </div>
</div>
<div class="global-nav__mobile-closed"><div class="nav-actions"><a class="mobile-menu-icon mobile-header-action" data-action="click-&gt;global-nav#toggle" href="javascript:"><i class="fa fa-reorder"></i></a><a class="global-nav__header-tuts-logo-link mobile-header-action mobile-home-logo" data-action="click-&gt;global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a><a class="mobile-search-icon mobile-header-action" data-action="click-&gt;global-nav#toggle" href="javascript:"><i class="fa fa-magnifying-glass"></i></a></div></div><div class="global-nav__mobile-overlay"></div><div class="global-nav__mobile-new"><section class="view global-nav__mobile-open-header"><a class="global-nav__header-tuts-logo-link mobile-header-action mobile-home-logo" data-action="click-&gt;global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a><a class="mobile-close-icon mobile-header-action" data-action="click-&gt;global-nav#toggle" href="javascript:"><i class="fa fa-times"></i></a></section><section class="global-nav__mobile-search view new-nav-mobile" data-controller="global-search"><form class="global-nav__search-form mobile" data-turbo="false" data-action="submit-&gt;global-nav#sendSearchDataLayerEvent submit-&gt;global-search#perform_search" action="https://code.tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials, courses and resources" class="font-family-polysan-regular !global-nav__search-terms" data-action="keydown-&gt;global-search#keydown input-&gt;global-search#auto_suggestions focus-&gt;global-search#focus_in" />
<div class="search__auto_suggestions_container "
  data-global-search-target="suggestionContainer"
  data-action="mousedown->global-search#onSuggestionContainerMousedown"
>
  <div class="search__auto_suggestions_content">
    <div class="search__auto_suggesstion_list_container">
      <div class="search__auto_suggesstion_list_content">
        <ul class="search__auto_suggesstion_list" role="listbox" data-global-search-target="suggestionList">
        </ul>
      </div>
    </div>
  </div>
</div><button name="button" type="submit" class="global-nav__search-button" aria-label="Search"><i class="fa fa-search"></i></button></form></section><ul class='global-nav__mobile-top-level new-nav-mobile'>
    <li class='global-nav__mobile-top-level-item' test-nav-item-name='Design'>
        <a href='https://design.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''>
  <span class='global-nav__mobile-top-level-link-title'>
    Design
  </span>
</a>

    </li>
    <li class='global-nav__mobile-top-level-item' test-nav-item-name='Business'>
        <a href='https://business.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''>
  <span class='global-nav__mobile-top-level-link-title'>
    Business
  </span>
</a>

    </li>
    <li class='global-nav__mobile-top-level-item' test-nav-item-name='Photo'>
        <a href='https://photography.tutsplus.com/photo' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''>
  <span class='global-nav__mobile-top-level-link-title'>
    Photo
  </span>
</a>

    </li>
    <li class='global-nav__mobile-top-level-item' test-nav-item-name='Video'>
        <a href='https://photography.tutsplus.com/video' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''>
  <span class='global-nav__mobile-top-level-link-title'>
    Video
  </span>
</a>

    </li>
    <li class='global-nav__mobile-top-level-item' test-nav-item-name='Web Design'>
        <a href='https://webdesign.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''>
  <span class='global-nav__mobile-top-level-link-title'>
    Web Design
  </span>
</a>

    </li>
    <li class='global-nav__mobile-top-level-item' test-nav-item-name='Code'>
        <a href='javascript:' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action='click-&gt;global-nav#toggleSecondLevelSection'>
  <span class='global-nav__mobile-top-level-link-title'>
    Code
  </span>
      <span class='global-nav__mobile-top-level-expand-text'>
        <i class='fa fa-angle-right global-nav__mobile-top-level-link-icon'></i>
      </span>
</a>


        <div class='global-nav__mobile-second-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleSecondLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-second-level-heading '>
  <span class='global-nav__mobile-second-level-heading-title'>
    Code
  </span>
    <a href='https://code.tutsplus.com' class='global-nav__mobile-second-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-second-level-heading-link-text'>
    View all Code
  </span>
      <span class='global-nav__mobile-second-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

            <div class='global-nav__mobile-second-level-links-title'>Start Learning</div>
<ul class='global-nav__mobile-second-level-links'>
  
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='WordPress'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    WordPress
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    WordPress
  </span>
    <a href='https://code.tutsplus.com/c/wordpress' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all WordPress
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Plugin Development'>
  <a href='https://code.tutsplus.com/c/wordpress/s/plugin-development' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Plugin Development
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Theme Development'>
  <a href='https://code.tutsplus.com/c/wordpress/s/theme-development' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Theme Development
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='HTML/CSS'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    HTML/CSS
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    HTML/CSS
  </span>
    <a href='https://code.tutsplus.com/c/htmlcss' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all HTML/CSS
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='HTML'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/html' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    HTML
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='CSS'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/css' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    CSS
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='JavaScript for Designers'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/javascript-for-designers' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    JavaScript for Designers
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Bootstrap'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/bootstrap' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Bootstrap
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Animation'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/animation' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Animation
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='HTML Templates'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/html-templates' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    HTML Templates
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Landing Pages'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/landing-pages' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Landing Pages
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='SVG'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/svg' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    SVG
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Mobile Development'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    Mobile Development
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    Mobile Development
  </span>
    <a href='https://code.tutsplus.com/c/mobile-development' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all Mobile Development
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='iOS Development'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/ios-development' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    iOS Development
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='iOS Templates'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/ios-templates' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    iOS Templates
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Android Development'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/android-development' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Android Development
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Android Templates'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/android-templates' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Android Templates
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='React Native Development'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/react-native-development' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    React Native Development
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='React Native Templates'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/react-native-templates' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    React Native Templates
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Ionic Development'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/ionic-development' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Ionic Development
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Ionic Templates'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/ionic-templates' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Ionic Templates
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Corona'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/corona' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Corona
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Firebase'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/firebase' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Firebase
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Kotlin'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/kotlin' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Kotlin
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='JavaScript'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    JavaScript
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    JavaScript
  </span>
    <a href='https://code.tutsplus.com/c/javascript' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all JavaScript
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='React'>
  <a href='https://code.tutsplus.com/c/javascript/s/react' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    React
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Vue.js'>
  <a href='https://code.tutsplus.com/c/javascript/s/vuejs' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Vue.js
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Node'>
  <a href='https://code.tutsplus.com/c/javascript/s/node' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Node
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='jQuery'>
  <a href='https://code.tutsplus.com/c/javascript/s/jquery' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    jQuery
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Angular'>
  <a href='https://code.tutsplus.com/c/javascript/s/angular' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Angular
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Web APIs'>
  <a href='https://code.tutsplus.com/c/javascript/s/web-apis' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Web APIs
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='PHP'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    PHP
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    PHP
  </span>
    <a href='https://code.tutsplus.com/c/php' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all PHP
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Laravel'>
  <a href='https://code.tutsplus.com/c/php/s/laravel' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Laravel
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='PHP Scripts'>
  <a href='https://code.tutsplus.com/c/php/s/php-scripts' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    PHP Scripts
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='CodeIgniter'>
  <a href='https://code.tutsplus.com/c/php/s/codeigniter' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    CodeIgniter
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Yii'>
  <a href='https://code.tutsplus.com/c/php/s/yii' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Yii
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Coding Fundamentals'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    Coding Fundamentals
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    Coding Fundamentals
  </span>
    <a href='https://code.tutsplus.com/c/coding-fundamentals' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all Coding Fundamentals
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='OOP'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/oop' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    OOP
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Functional Programming'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/functional-programming' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Functional Programming
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Databases &amp; SQL'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/databases-sql' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Databases &amp; SQL
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Security'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/security' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Security
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Testing'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/testing' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Testing
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Workflow'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/workflow' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Workflow
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Design Patterns'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/design-patterns' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Design Patterns
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Rest API'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/rest-api' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Rest API
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Machine Learning'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/machine-learning' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Machine Learning
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Authentication'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/authentication' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Authentication
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Version Control &amp; Git'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/version-control-git' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Version Control &amp; Git
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Performance'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/performance' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Performance
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='XML'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/xml' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    XML
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='AJAX'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/ajax' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    AJAX
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Regular Expressions'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/regular-expressions' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Regular Expressions
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Tools'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/tools' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Tools
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Terminal and CLI'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/terminal-and-cli' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Terminal and CLI
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Python'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    Python
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    Python
  </span>
    <a href='https://code.tutsplus.com/c/python' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all Python
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Django'>
  <a href='https://code.tutsplus.com/c/python/s/django' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Django
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Ruby'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    Ruby
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    Ruby
  </span>
    <a href='https://code.tutsplus.com/c/ruby' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all Ruby
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Ruby on Rails'>
  <a href='https://code.tutsplus.com/c/ruby/s/ruby-on-rails' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Ruby on Rails
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Game Development'>
      <a href='https://code.tutsplus.com/c/game-development' class='global-nav__mobile-second-level-link' data-action=''>
  <span class='global-nav__mobile-second-level-link-title'>
    Game Development
  </span>
</a>

    </li>
    <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Cloud &amp; Hosting'>
      <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
  <span class='global-nav__mobile-second-level-link-title'>
    Cloud &amp; Hosting
  </span>
      <span class='global-nav__mobile-second-level-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

        <div class='global-nav__mobile-third-level-new'>
          <div class='global-nav__mobile-new'>
            <section class='view global-nav__mobile-open-header'>
  <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection'>
    <i class='fa fa-arrow-left'></i>
  </a>
  <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click-&gt;global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'>
    <i class='fa fa-times'></i>
  </a>
</section>
<section class='view global-nav__mobile-third-level-heading '>
  <span class='global-nav__mobile-third-level-heading-title'>
    Cloud &amp; Hosting
  </span>
    <a href='https://code.tutsplus.com/c/cloud-hosting' class='global-nav__mobile-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-heading-link-text'>
    View all Cloud &amp; Hosting
  </span>
      <span class='global-nav__mobile-third-level-heading-link-icon'>
        <i class='fa fa-angle-right'></i>
      </span>
</a>

</section>

              <div class='global-nav__mobile-second-level-links-title empty-title'></div>
<ul class='global-nav__mobile-third-level-links'>
    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='AWS'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/aws' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    AWS
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Web Servers'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/web-servers' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Web Servers
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Hosting'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/hosting' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Hosting
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Scaling'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/scaling' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Scaling
  </span>
</a>

</li>

    <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Databases &amp; SQL'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/databases-sql' class='global-nav__mobile-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-nav__mobile-third-level-link-title'>
    Databases &amp; SQL
  </span>
</a>

</li>

</ul>

            
          </div>
        </div>
    </li>
</ul>
            
          </div>
        </div>
    </li>
    <li class='global-nav__mobile-top-level-item' test-nav-item-name='Music'>
        <a href='https://music.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''>
  <span class='global-nav__mobile-top-level-link-title'>
    Music
  </span>
</a>

    </li>
</ul>
<hr class="global-nav__mobile-divider" /><ul class="global-nav-mobile__envato-links new-nav-mobile"><li class="global-nav__mobile-top-level-item"><turbo-frame id="user_mobile_session_info" loading="lazy" src="/user_mobile_session?show_greeting=false"><a data-turbo="false" class="global-nav__mobile-user-link" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Fcode.tutsplus.com%2Fc%2Fmobile-development">Sign In</a></turbo-frame></li><li class="global-nav__mobile-top-level-item"><a class="global-mobile__header-item--envato-link font-family-polysan-regular" data-action="click-&gt;global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q">Tuts+ YouTube</a></li><li class="global-nav__mobile-top-level-item"><a class="global-mobile__header-item--envato-link" data-action="click-&gt;global-nav#sendNewNavDataLayerEvent" href="https://elements.envato.com">Envato</a></li><div class="global-nav__mobile-top-level-item mt-4 ml-3 mr-6">
  <a class="w-full flex-shrink-0 inline-block text-center no-underline rounded font-semibold text-sm sticky font-family-polysan-regular" style="height: 40px; background-color: #9CEE69; color: #1A4200; line-height: 40px;" data-cta-button="unlimited_cta" href="https://elements.envato.com/pricing">
    Get unlimited creative assets
</a></div>
</ul></div><div class="global-new-nav__header"><div class="global-new-nav__header-content"><div class="global-new-nav__header-top"><div class="global-new-nav__header-right flex justify-end mr-8"><ul class="global-new-nav__header-list"><li class="global-new-nav__header-item"><a class="global-nav__header-item--envato-link leading-5 font-family-polysan-regular" data-action="click-&gt;ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?utm_campaign=elements_tuts-header_nav&amp;utm_medium=promos&amp;utm_source=tutsplus">Go to Envato</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">&#124;</li><li class="global-new-nav__header-item"><a class="global-nav__header-item--envato-link leading-5 font-family-polysan-regular" data-action="click-&gt;global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q?utm_campaign=elements_tuts-header_nav&amp;utm_medium=promos&amp;utm_source=tutsplus">Tuts+ YouTube</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">&#124;</li><li class="global-new-nav__header-item"><turbo-frame id="user_session_info" loading="lazy" src="/user_session"><a data-turbo="false" class="global-new-nav__user-link font-bold leading-5 font-family-polysan-regular-bulky" rel="nofollow" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Fcode.tutsplus.com%2Fc%2Fmobile-development">Sign In</a></turbo-frame></li></ul></div></div><div class="global-new-nav__header-bottom flex items-center justify-between relative mx-6"><ul class="global-nav__header-list" data-controller="subcategories-nav"><li class="global-nav__header-item global-nav__header-item-tuts-logo"><a class="global-nav__header-tuts-logo-link" data-action="click-&gt;global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a></li>  <li class='global-nav__header-item leading-5 !px-2 !pb-[5px] font-family-polysan-regular '>
    <a href='https://design.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary font-normal hover:font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'>
      <span>Design</span>
    </a>

  </li>
  <li class='global-nav__header-item leading-5 !px-2 !pb-[5px] font-family-polysan-regular '>
    <a href='https://business.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary font-normal hover:font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'>
      <span>Business</span>
    </a>

  </li>
  <li class='global-nav__header-item leading-5 !px-2 !pb-[5px] font-family-polysan-regular '>
    <a href='https://photography.tutsplus.com/photo' class='global-new-nav__header-link global-nav__header-link--primary font-normal hover:font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'>
      <span>Photo</span>
    </a>

  </li>
  <li class='global-nav__header-item leading-5 !px-2 !pb-[5px] font-family-polysan-regular '>
    <a href='https://photography.tutsplus.com/video' class='global-new-nav__header-link global-nav__header-link--primary font-normal hover:font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'>
      <span>Video</span>
    </a>

  </li>
  <li class='global-nav__header-item leading-5 !px-2 !pb-[5px] font-family-polysan-regular '>
    <a href='https://webdesign.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary font-normal hover:font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'>
      <span>Web Design</span>
    </a>

  </li>
  <li class='global-nav__header-item leading-5 !px-2 !pb-[5px] font-family-polysan-regular global-nav__top-level-item--expanded'>
    <a href='https://code.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary font-normal hover:font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'>
      <span>Code</span>
    </a>

      <div class='global-new-nav__header-second-level'>
        <ul class='global-nav__header-second-level-list mb-0'>
          
  <li class='global-nav__header-item  ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='WordPress'>
    <a href='https://code.tutsplus.com/c/wordpress' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    WordPress
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Plugin Development'>
  <a href='https://code.tutsplus.com/c/wordpress/s/plugin-development' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Plugin Development
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Theme Development'>
  <a href='https://code.tutsplus.com/c/wordpress/s/theme-development' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Theme Development
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/wordpress' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All WordPress
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>
  <li class='global-nav__header-item  ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='HTML/CSS'>
    <a href='https://code.tutsplus.com/c/htmlcss' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    HTML/CSS
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='HTML'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/html' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    HTML
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='CSS'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/css' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    CSS
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='JavaScript for Designers'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/javascript-for-designers' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    JavaScript for Designers
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Bootstrap'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/bootstrap' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Bootstrap
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Animation'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/animation' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Animation
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='HTML Templates'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/html-templates' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    HTML Templates
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Landing Pages'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/landing-pages' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Landing Pages
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='SVG'>
  <a href='https://code.tutsplus.com/c/htmlcss/s/svg' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    SVG
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/htmlcss' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All HTML/CSS
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>
  <li class='global-nav__header-item active-category ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Mobile Development'>
    <a href='https://code.tutsplus.com/c/mobile-development' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    Mobile Development
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='iOS Development'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/ios-development' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    iOS Development
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='iOS Templates'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/ios-templates' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    iOS Templates
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Android Development'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/android-development' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Android Development
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Android Templates'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/android-templates' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Android Templates
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='React Native Development'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/react-native-development' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    React Native Development
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='React Native Templates'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/react-native-templates' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    React Native Templates
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Ionic Development'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/ionic-development' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Ionic Development
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Ionic Templates'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/ionic-templates' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Ionic Templates
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Corona'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/corona' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Corona
  </span>
</a>

</li>

      </ul>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            &nbsp;
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Firebase'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/firebase' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Firebase
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Kotlin'>
  <a href='https://code.tutsplus.com/c/mobile-development/s/kotlin' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Kotlin
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/mobile-development' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All Mobile Development
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>
  <li class='global-nav__header-item  ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='JavaScript'>
    <a href='https://code.tutsplus.com/c/javascript' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    JavaScript
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='React'>
  <a href='https://code.tutsplus.com/c/javascript/s/react' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    React
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Vue.js'>
  <a href='https://code.tutsplus.com/c/javascript/s/vuejs' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Vue.js
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Node'>
  <a href='https://code.tutsplus.com/c/javascript/s/node' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Node
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='jQuery'>
  <a href='https://code.tutsplus.com/c/javascript/s/jquery' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    jQuery
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Angular'>
  <a href='https://code.tutsplus.com/c/javascript/s/angular' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Angular
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Web APIs'>
  <a href='https://code.tutsplus.com/c/javascript/s/web-apis' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Web APIs
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/javascript' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All JavaScript
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>
  <li class='global-nav__header-item  ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='PHP'>
    <a href='https://code.tutsplus.com/c/php' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    PHP
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Laravel'>
  <a href='https://code.tutsplus.com/c/php/s/laravel' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Laravel
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='PHP Scripts'>
  <a href='https://code.tutsplus.com/c/php/s/php-scripts' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    PHP Scripts
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='CodeIgniter'>
  <a href='https://code.tutsplus.com/c/php/s/codeigniter' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    CodeIgniter
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Yii'>
  <a href='https://code.tutsplus.com/c/php/s/yii' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Yii
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/php' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All PHP
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>
  <li class='global-nav__header-item  ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Coding Fundamentals'>
    <a href='https://code.tutsplus.com/c/coding-fundamentals' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    Coding Fundamentals
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='OOP'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/oop' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    OOP
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Functional Programming'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/functional-programming' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Functional Programming
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Databases &amp; SQL'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/databases-sql' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Databases &amp; SQL
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Security'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/security' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Security
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Testing'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/testing' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Testing
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Workflow'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/workflow' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Workflow
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Design Patterns'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/design-patterns' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Design Patterns
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Rest API'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/rest-api' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Rest API
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Machine Learning'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/machine-learning' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Machine Learning
  </span>
</a>

</li>

      </ul>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            &nbsp;
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Authentication'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/authentication' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Authentication
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Version Control &amp; Git'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/version-control-git' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Version Control &amp; Git
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Performance'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/performance' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Performance
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='XML'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/xml' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    XML
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='AJAX'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/ajax' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    AJAX
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Regular Expressions'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/regular-expressions' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Regular Expressions
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Tools'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/tools' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Tools
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Terminal and CLI'>
  <a href='https://code.tutsplus.com/c/coding-fundamentals/s/terminal-and-cli' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Terminal and CLI
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/coding-fundamentals' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All Coding Fundamentals
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>
  <li class='global-nav__header-item  ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Python'>
    <a href='https://code.tutsplus.com/c/python' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    Python
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Django'>
  <a href='https://code.tutsplus.com/c/python/s/django' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Django
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/python' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All Python
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>
  <li class='global-nav__header-item  ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Ruby'>
    <a href='https://code.tutsplus.com/c/ruby' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    Ruby
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Ruby on Rails'>
  <a href='https://code.tutsplus.com/c/ruby/s/ruby-on-rails' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Ruby on Rails
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/ruby' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All Ruby
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>
  <li class='global-nav__header-item  no-chevron' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Game Development'>
    <a href='https://code.tutsplus.com/c/game-development' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    Game Development
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        
      
    </div>
  </li>
  <li class='global-nav__header-item  ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Cloud &amp; Hosting'>
    <a href='https://code.tutsplus.com/c/cloud-hosting' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-link-text'>
    Cloud &amp; Hosting
  </span>
      <i class='fa fa-chevron-down'></i>
</a>


    <div class='global-new-nav__header-third-level'>
        <div class='global-new-nav__header-third-level-sub-categories'>
  <ul class='global-new-nav__header-third-level-links display-flex'>
      <ul>
        <li>
          <div class='global-new-nav__header-third-level-links-title'>
            Start Learning
          </div>
        </li>
          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='AWS'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/aws' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    AWS
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Web Servers'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/web-servers' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Web Servers
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Hosting'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/hosting' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Hosting
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Scaling'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/scaling' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Scaling
  </span>
</a>

</li>

          <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Databases &amp; SQL'>
  <a href='https://code.tutsplus.com/c/cloud-hosting/s/databases-sql' class='global-new-nav__header-third-level-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-link-title'>
    Databases &amp; SQL
  </span>
</a>

</li>

      </ul>
  </ul>
    <a href='https://code.tutsplus.com/c/cloud-hosting' class='global-new-nav__header-third-level-heading-link' data-action='click-&gt;global-nav#sendNewNavDataLayerEvent'>
  <span class='global-new-nav__header-third-level-heading-link-text'>
    All Cloud &amp; Hosting
  </span>
      <span class='global-new-nav__header-third-level-heading-link-icon'>
        <i class='fa fa-arrow-right'></i>
      </span>
</a>

</div>

      
    </div>
  </li>

        </ul>
      </div>
  </li>
  <li class='global-nav__header-item leading-5 !px-2 !pb-[5px] font-family-polysan-regular '>
    <a href='https://music.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary font-normal hover:font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'>
      <span>Music</span>
    </a>

  </li>
</ul><div class="global-new-nav__header-right mr-12 flex flex-shrink-0 items-center gap-5 flex-row" data-controller="global-search"><div class="flex-1 relative w-80 max-w-sm"><form class="global-nav__search-form nonmobile" data-turbo="false" data-action="submit-&gt;global-nav#sendSearchDataLayerEvent submit-&gt;global-search#perform_search" action="https://code.tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials, courses and resources" class="placeholder:leading-5 global-nav__search-terms !font-family-polysan-regular search-terms-nonmobile pr-12" data-action="keydown-&gt;global-search#keydown input-&gt;global-search#auto_suggestions focus-&gt;global-search#focus_in" data-placeholder-full="Search tutorials, courses and resources" data-placeholder-compact="Search" />
<div class="search__auto_suggestions_container "
  data-global-search-target="suggestionContainer"
  data-action="mousedown->global-search#onSuggestionContainerMousedown"
>
  <div class="search__auto_suggestions_content">
    <div class="search__auto_suggesstion_list_container">
      <div class="search__auto_suggesstion_list_content">
        <ul class="search__auto_suggesstion_list" role="listbox" data-global-search-target="suggestionList">
        </ul>
      </div>
    </div>
  </div>
</div><button name="button" type="submit" class="global-nav__search-button" aria-label="Search"><i class="fa fa-search"></i></button></form></div><div class="">
  <a class="flex-shrink-0 inline-block text-center no-underline rounded font-semibold text-sm sticky top-0 hover:!bg-hover-green font-family-polysan-regular" style="width: 231px; height: 40px; background-color: #9CEE69; color: #1A4200; line-height: 40px;" data-cta-button="unlimited_cta" href="https://elements.envato.com/pricing">
    Get unlimited creative assets
</a></div>
</div></div></div></div></nav><div class="empty-sticky-nav-background-div" style="height: 207px"></div><div class="page-content  " id="page-content"><main class="content !m-0 !max-w-none !p-0" style="background-color: transparent;"><div class="content-banner"></div><div class="content-title"></div>
<div class="section-container">
  <div name="" class="full-section " style="">
  
    <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-10 md:pt-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto">
  
        <div>
    <h1 class="m-0 md:text-5xl font-family-polysan-regular-median">
      Learn Mobile Development
    </h1>
    <div class="category-heading-intro-wrapper">
      <div class="content-banner__description introductory-text view" data-controller="introductory-text" data-max-height="42"><div class="show-less" data-introductory-text-target="content" id="introductory-text__content">Learn mobile development from start to finish with these free tutorials. Create iOS and Android apps using Ionic, React Native, Kotlin, Firebase, and more.</div><div data-introductory-text-target="divider" id="introductory-text__links-divider"></div><div class="introductory-text-links"><a aria-label="Read more" data-action="click-&gt;introductory-text#toggleReadMode" data-introductory-text-target="read_more" href="javascript:void(0);" id="introductory-text__read-more-link">Read more</a><a aria-label="Read less" data-action="click-&gt;introductory-text#toggleReadMode" data-introductory-text-target="read_less" href="javascript:void(0);" id="introductory-text__read-less-link">Read less</a></div></div>
    </div>
  </div>



</div>

</div>

  <div name="" class="full-section " style="">
  
    <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-10 md:pt-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto">
  
      <div class="flex">
    <div class="content-title--section-switcher-item mr-6 last:mr-0">
      <a class="text-sm text-grey-500 pb-6 font-medium  content-title--category-switcher-item-link__active topic-code" href="https://code.tutsplus.com/c/mobile-development">All content</a>
    </div>
    <div class="content-title--section-switcher-item mr-6 last:mr-0">
      <a class="text-sm text-grey-500 pb-6 font-medium  topic-code" href="https://code.tutsplus.com/c/mobile-development/t/courses">Courses</a>
    </div>
    <div class="content-title--section-switcher-item mr-6 last:mr-0">
      <a class="text-sm text-grey-500 pb-6 font-medium  topic-code" href="https://code.tutsplus.com/c/mobile-development/t/tutorials">Tutorials</a>
    </div>
</div>


</div>

</div>

    <div name="" class="full-section odd:bg-grey-25 even:bg-none" style="">
  
  
      <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-10 pb-10 md:pt-20 md:pb-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto">
  
        <div data-test-id="category-featured-content" data-analytics-context="featured content">
  <div class="flex justify-between">
    <div>
      <h2 class="mt-0 mb-6 leading-5 font-family-polysan-regular-median ">
  
        Getting started with Mobile Development

</h2>
    </div>
  </div>
  <div class="hidden md:block" data-test-id="category-featured-content-nonmobile">
    <div data-controller='card-carousel'
    data-cards-sm="0"
    data-cards-lsm="0"
    data-cards-md="2"
    data-cards-lmd="3"
    data-cards-lg="3"
    data-cards-mxl="3"
    data-cards-xl="3"
    data-cards-default="4"
>
  
        <div>
  <div class="mr-6">
    
          <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="0"
     data-type="featured"
     data-url="https://code.tutsplus.com/learn-java-for-android-development-introduction-to-java--mobile-2604t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Learn Java for Android Development: Introduction to Java" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/learn-java-for-android-development-introduction-to-java--mobile-2604t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Learn Java for Android Development: Introduction to Java" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/1354/preview_image/developer_checking_programming_code_2021_08_29_14_43_20_utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/1354/preview_image/developer_checking_programming_code_2021_08_29_14_43_20_utc.jpg" />

  
  
</div>

      

      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median">
  Learn Java for Android Development: Introduction to Java
</h3>

                    <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



      
    </header>
    <footer>
                    <div class="flex font-normal text-xs md:text-sm mt-4 [&amp;&gt;a]:truncate [&amp;&gt;a]:max-w-[200px]">
  <a class="flex z-[1] relative font-family-polysan-regular text-grey-1000 !inline-block mb-1 md:mb-0" aria-label="Author: Shane Conder &amp; Lauren Darcey" href="https://tutsplus.com/authors/shane-conder-lauren-darcey">
  
  
    Shane Conder &amp; Lauren Darcey


</a>    <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span>
    <time class="text-grey-500">30 Sep 2022</time>
</div>


    </footer>
  </article>
</li>

  </div>
</div>

        <div>
  <div class="mr-6">
    
          <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="1"
     data-type="featured"
     data-url="https://code.tutsplus.com/android-essentials-creating-simple-user-forms--mobile-1758t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Android Essentials: Creating Simple User Forms" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/android-essentials-creating-simple-user-forms--mobile-1758t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Android Essentials: Creating Simple User Forms" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/2950/preview_image/mobile%20android%20templates.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/2950/preview_image/mobile%20android%20templates.jpg" />

  
  
</div>

      

      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median">
  Android Essentials: Creating Simple User Forms
</h3>

                    <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



      
    </header>
    <footer>
                    <div class="flex font-normal text-xs md:text-sm mt-4 [&amp;&gt;a]:truncate [&amp;&gt;a]:max-w-[200px]">
  <a class="flex z-[1] relative font-family-polysan-regular text-grey-1000 !inline-block mb-1 md:mb-0" aria-label="Author: Esther Vaati" href="https://tutsplus.com/authors/esther-kalei">
  
  
    Esther Vaati


</a>    <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span>
    <time class="text-grey-500">31 Mar 2021</time>
</div>


    </footer>
  </article>
</li>

  </div>
</div>

        <div>
  <div class="mr-6">
    
          <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="2"
     data-type="featured"
     data-url="https://webdesign.tutsplus.com/how-to-turn-your-wordpress-website-into-a-mobile-app--cms-35677a"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: How to Turn Your WordPress Website Into a Mobile App " data-action="click-&gt;post-card-tracking#onClick" href="https://webdesign.tutsplus.com/how-to-turn-your-wordpress-website-into-a-mobile-app--cms-35677a">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="How to Turn Your WordPress Website Into a Mobile App " loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/35677/preview_image/using-mobile-app-PL6AYUC.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/35677/preview_image/using-mobile-app-PL6AYUC.jpg" />

  
  
</div>

      

      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median">
  How to Turn Your WordPress Website Into a Mobile App 
</h3>

                    <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



      
    </header>
    <footer>
                    <div class="flex font-normal text-xs md:text-sm mt-4 [&amp;&gt;a]:truncate [&amp;&gt;a]:max-w-[200px]">
  <a class="flex z-[1] relative font-family-polysan-regular text-grey-1000 !inline-block mb-1 md:mb-0" aria-label="Author: Franc Lucas" href="https://tutsplus.com/authors/franc-lucas">
  
  
    Franc Lucas


</a>    <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span>
    <time class="text-grey-500">18 Sep 2023</time>
</div>


    </footer>
  </article>
</li>

  </div>
</div>

        <div>
  <div class="mr-6">
    
          <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="3"
     data-type="featured"
     data-url="https://code.tutsplus.com/capture-and-crop-an-image-with-the-device-camera--mobile-11458t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Capture and Crop an Image with the Device Camera" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/capture-and-crop-an-image-with-the-device-camera--mobile-11458t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Capture and Crop an Image with the Device Camera" loading="lazy" srcset="https://cdn.tutsplus.com/cdn-cgi/image/width=1200/mobile/uploads/legacy/Android-SDK_Image-Capture-Crop/capture-crop.png 2x" src="https://cdn.tutsplus.com/cdn-cgi/image/width=600/mobile/uploads/legacy/Android-SDK_Image-Capture-Crop/capture-crop.png" />

  
  
</div>

      

      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median">
  Capture and Crop an Image with the Device Camera
</h3>

                    <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Intermediate</span>
</div>



      
    </header>
    <footer>
                    <div class="flex font-normal text-xs md:text-sm mt-4 [&amp;&gt;a]:truncate [&amp;&gt;a]:max-w-[200px]">
  <a class="flex z-[1] relative font-family-polysan-regular text-grey-1000 !inline-block mb-1 md:mb-0" aria-label="Author: Sue Smith" href="https://tutsplus.com/authors/sue-smith">
  
  
    Sue Smith


</a>    <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span>
    <time class="text-grey-500">17 Jul 2012</time>
</div>


    </footer>
  </article>
</li>

  </div>
</div>


</div>
  </div>
  <div class="md:hidden" data-test-id="category-featured-content-mobile">
    <div class="space-y-1 max-w-1/2">
        

  <li data-explanation=""
      data-controller="post-card-tracking"
      data-index="0"
      data-type="featured"
      data-url="https://code.tutsplus.com/learn-java-for-android-development-introduction-to-java--mobile-2604t"
      class="list-none  "
      data-test-id="category-featured-content-mobile-card"
  >
    <article class="flex mt-4 mb-4 relative">
      <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Learn Java for Android Development: Introduction to Java" href="https://code.tutsplus.com/learn-java-for-android-development-introduction-to-java--mobile-2604t">
</a>
      <div class="flex-none w-1/2">
        <img class="flex object-contain w-full rounded-md aspect-1/1" alt="Learn Java for Android Development: Introduction to Java" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/1354/preview_image/developer_checking_programming_code_2021_08_29_14_43_20_utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/769/posts/1354/preview_image/developer_checking_programming_code_2021_08_29_14_43_20_utc.jpg" />
      </div>
      <div class="w-1/2 pl-3">
        <h3 class="font-semibold text-lg text-grey-1000 m-0 !text-sm !leading-tight line-clamp-3">
  Learn Java for Android Development: Introduction to Java
</h3>
        <div class="flex font-normal text-xs md:text-sm mt-4 !block [&amp;&gt;time]:block [&amp;&gt;time]:mt-1">
  <a class="flex z-[1] relative font-family-polysan-regular text-grey-1000 !inline-block mb-1 md:mb-0" aria-label="Author: Shane Conder &amp; Lauren Darcey" href="https://tutsplus.com/authors/shane-conder-lauren-darcey">
  
  
    Shane Conder &amp; Lauren Darcey


</a>    <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span>
    <time class="text-grey-500">30 Sep 2022</time>
</div>

      </div>
    </article>
  </li>

        

  <li data-explanation=""
      data-controller="post-card-tracking"
      data-index="1"
      data-type="featured"
      data-url="https://code.tutsplus.com/android-essentials-creating-simple-user-forms--mobile-1758t"
      class="list-none  "
      data-test-id="category-featured-content-mobile-card"
  >
    <article class="flex mt-4 mb-4 relative">
      <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Android Essentials: Creating Simple User Forms" href="https://code.tutsplus.com/android-essentials-creating-simple-user-forms--mobile-1758t">
</a>
      <div class="flex-none w-1/2">
        <img class="flex object-contain w-full rounded-md aspect-1/1" alt="Android Essentials: Creating Simple User Forms" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/2950/preview_image/mobile%20android%20templates.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/769/posts/2950/preview_image/mobile%20android%20templates.jpg" />
      </div>
      <div class="w-1/2 pl-3">
        <h3 class="font-semibold text-lg text-grey-1000 m-0 !text-sm !leading-tight line-clamp-3">
  Android Essentials: Creating Simple User Forms
</h3>
        <div class="flex font-normal text-xs md:text-sm mt-4 !block [&amp;&gt;time]:block [&amp;&gt;time]:mt-1">
  <a class="flex z-[1] relative font-family-polysan-regular text-grey-1000 !inline-block mb-1 md:mb-0" aria-label="Author: Esther Vaati" href="https://tutsplus.com/authors/esther-kalei">
  
  
    Esther Vaati


</a>    <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span>
    <time class="text-grey-500">31 Mar 2021</time>
</div>

      </div>
    </article>
  </li>

        

  <li data-explanation=""
      data-controller="post-card-tracking"
      data-index="2"
      data-type="featured"
      data-url="https://webdesign.tutsplus.com/how-to-turn-your-wordpress-website-into-a-mobile-app--cms-35677a"
      class="list-none  "
      data-test-id="category-featured-content-mobile-card"
  >
    <article class="flex mt-4 mb-4 relative">
      <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: How to Turn Your WordPress Website Into a Mobile App " href="https://webdesign.tutsplus.com/how-to-turn-your-wordpress-website-into-a-mobile-app--cms-35677a">
</a>
      <div class="flex-none w-1/2">
        <img class="flex object-contain w-full rounded-md aspect-1/1" alt="How to Turn Your WordPress Website Into a Mobile App " loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/35677/preview_image/using-mobile-app-PL6AYUC.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/769/posts/35677/preview_image/using-mobile-app-PL6AYUC.jpg" />
      </div>
      <div class="w-1/2 pl-3">
        <h3 class="font-semibold text-lg text-grey-1000 m-0 !text-sm !leading-tight line-clamp-3">
  How to Turn Your WordPress Website Into a Mobile App 
</h3>
        <div class="flex font-normal text-xs md:text-sm mt-4 !block [&amp;&gt;time]:block [&amp;&gt;time]:mt-1">
  <a class="flex z-[1] relative font-family-polysan-regular text-grey-1000 !inline-block mb-1 md:mb-0" aria-label="Author: Franc Lucas" href="https://tutsplus.com/authors/franc-lucas">
  
  
    Franc Lucas


</a>    <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span>
    <time class="text-grey-500">18 Sep 2023</time>
</div>

      </div>
    </article>
  </li>

        

  <li data-explanation=""
      data-controller="post-card-tracking"
      data-index="3"
      data-type="featured"
      data-url="https://code.tutsplus.com/capture-and-crop-an-image-with-the-device-camera--mobile-11458t"
      class="list-none  "
      data-test-id="category-featured-content-mobile-card"
  >
    <article class="flex mt-4 mb-4 relative">
      <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Capture and Crop an Image with the Device Camera" href="https://code.tutsplus.com/capture-and-crop-an-image-with-the-device-camera--mobile-11458t">
</a>
      <div class="flex-none w-1/2">
        <img class="flex object-contain w-full rounded-md aspect-1/1" alt="Capture and Crop an Image with the Device Camera" loading="lazy" srcset="https://cdn.tutsplus.com/cdn-cgi/image/width=600/mobile/uploads/legacy/Android-SDK_Image-Capture-Crop/capture-crop.png 2x" src="https://cdn.tutsplus.com/cdn-cgi/image/width=300/mobile/uploads/legacy/Android-SDK_Image-Capture-Crop/capture-crop.png" />
      </div>
      <div class="w-1/2 pl-3">
        <h3 class="font-semibold text-lg text-grey-1000 m-0 !text-sm !leading-tight line-clamp-3">
  Capture and Crop an Image with the Device Camera
</h3>
        <div class="flex font-normal text-xs md:text-sm mt-4 !block [&amp;&gt;time]:block [&amp;&gt;time]:mt-1">
  <a class="flex z-[1] relative font-family-polysan-regular text-grey-1000 !inline-block mb-1 md:mb-0" aria-label="Author: Sue Smith" href="https://tutsplus.com/authors/sue-smith">
  
  
    Sue Smith


</a>    <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span>
    <time class="text-grey-500">17 Jul 2012</time>
</div>

      </div>
    </article>
  </li>

    </div>
  </div>
</div>


</div>


</div>

  <div name="content-filters__content-section" class="full-section odd:bg-grey-25 even:bg-none" style="">
  
  
    <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-10 pb-10 md:pt-20 md:pb-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto">
  
      <div class="flex justify-between items-end mt-0 mb-6" data-controller="section-header" data-menu-class="language-selector-wrapper">
  <h2 class="mt-0 mb-6 leading-5 font-family-polysan-regular-median !m-0">
  
    All Mobile Development content:

</h2>
  <div>
    

  </div>
</div>
      <div class='flex flex-row mt-8'>
  <div class='content-filters__large-screen hidden lg:block mr-0 w-full h-[100px] lg:h-auto lg:min-w-[304px] lg:max-w-[304px] lg:pr-6 lg:mr-6 mb-[94px] border-grey-300/20 border-solid border-0 lg:border-r'>
  <div class='flex flex-row mb-6 xl:mb-9 items-center'>
    <img alt="content filters" class="mr-4 h-6 w-6" src="https://static.tutsplus.com/packs/static/images/filters-icon-00c6395442b34ee30e92.svg" />
    <span class='text-sm text-grey-700 font-bold font-family-polysan-regular-median'>Filters</span>
  </div>
  
  <turbo-frame id='content-filters' src='https://code.tutsplus.com/c/mobile-development/content_filters' />
</div>
  <div>
    <div class='content-filters__small-screen block lg:hidden mb-6' data-controller='content-filters-small-screen-component'>
  <button class='flex flex-row items-center justify-between cursor-pointer w-36 px-3 py-4 border border-solid border-grey-100 rounded-lg' style='background: transparent;' data-action='click->content-filters-small-screen-component#toggleContentFiltersDialog'>
    <span class='text-sm text-grey-700'>Filters</span>
    <img alt="content filters" class="h-[18px] w-[18px] ml-2" src="https://static.tutsplus.com/packs/static/images/filters-icon-00c6395442b34ee30e92.svg" />
  </button>

  <div class="relative z-10 hide" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>

    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
      <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all w-full">
          <div class="p-6 h-[calc(100vh-181px)]">
            <div class='flex flex-row mb-6 xl:mb-9 items-center justify-between'>
              <div class='flex items-center'>
                <img alt="content filters" class="mr-4 h-6 w-6" src="https://static.tutsplus.com/packs/static/images/filters-icon-00c6395442b34ee30e92.svg" />
                <span class='text-sm text-grey-700 font-bold font-family-polysan-regular-median'>Filters</span>
              </div>

              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" data-action='click->content-filters-small-screen-component#toggleContentFiltersDialog'>
                <path d="M15.8027 13.9221C15.929 14.0473 16 14.2178 16 14.3956C16 14.5734 15.929 14.7439 15.8027 14.8691L14.8691 15.8027C14.7439 15.929 14.5734 16 14.3956 16C14.2178 16 14.0473 15.929 13.9221 15.8027L8 9.88066L2.07793 15.8027C1.9527 15.929 1.78225 16 1.60443 16C1.42661 16 1.25615 15.929 1.13093 15.8027L0.197268 14.8691C0.0710153 14.7439 0 14.5734 0 14.3956C0 14.2178 0.0710153 14.0473 0.197268 13.9221L6.11934 8L0.197268 2.07793C0.0710153 1.9527 0 1.78225 0 1.60443C0 1.42661 0.0710153 1.25615 0.197268 1.13093L1.13093 0.197268C1.25615 0.0710153 1.42661 0 1.60443 0C1.78225 0 1.9527 0.0710153 2.07793 0.197268L8 6.11934L13.9221 0.197268C14.0473 0.0710153 14.2178 0 14.3956 0C14.5734 0 14.7439 0.0710153 14.8691 0.197268L15.8027 1.13093C15.929 1.25615 16 1.42661 16 1.60443C16 1.78225 15.929 1.9527 15.8027 2.07793L9.88066 8L15.8027 13.9221Z" fill="#3A3A3A"/>
              </svg>
            </div>

            <div class='h-[calc(100%-48px)] overflow-auto [&>turbo-frame>div:first-child]:mt-0'>
              <turbo-frame id='content-filters' src='https://code.tutsplus.com/c/mobile-development/content_filters' />
            </div>
          </div>
          <div class='p-6 border-grey-300/20 border-solid border-0 border-t flex justify-between'>
            <button type='button' class='text-blue-500 text-sm font-bold bg-white border-0 inline-block p-0' data-action='click->content-filters-small-screen-component#clearFilters'>Clear Filters</button>
            <button type='button' class='text-white text-sm font-bold bg-blue-500 border-0 px-4 py-3 rounded' data-action='click->content-filters-small-screen-component#showResults'>Show Results</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
                <ol class="inline-flex flex-wrap list-none p-0 m-0 [&>*]:mb-10 md:[&>*]:mb-16 [&>*]:mr-6 content-results__with-filters"
      data-controller='category-sidebar-ad-mobile'
      data-analytics-context="content results"
  >
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="0"
     data-type="standard"
     data-url="https://code.tutsplus.com/kotlin-from-scratch-abstract-classes-interfaces-inheritance-and-type-alias--cms-29744t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Kotlin From Scratch: Abstract Classes, Interfaces, Inheritance, and Type Alias" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/kotlin-from-scratch-abstract-classes-interfaces-inheritance-and-type-alias--cms-29744t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Kotlin From Scratch: Abstract Classes, Interfaces, Inheritance, and Type Alias" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/29744/preview_image/Kotlin_from_scratch_9.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/29744/preview_image/Kotlin_from_scratch_9.png" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Functional Programming" href="https://code.tutsplus.com/c/coding-fundamentals/s/functional-programming">
  
  
      Functional Programming


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  Kotlin From Scratch: Abstract Classes, Interfaces, Inheritance, and Type Alias
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Intermediate</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  Learn more about object-oriented programming in Kotlin with a look at abstract classes, interfaces, inheritance, and type aliases. 

</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Chike Mgbemena " href="https://tutsplus.com/authors/chike-mgbemena">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/1499/profiles/20007/profileImage/bg.png" class="rounded-md" alt="Chike Mgbemena " width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Chike Mgbemena " href="https://tutsplus.com/authors/chike-mgbemena">
  
  
      Chike Mgbemena 


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">8 Aug 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="1"
     data-type="standard"
     data-url="https://code.tutsplus.com/create-a-music-player-on-android-user-controls--mobile-22787t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Create a Music Player on Android: User Controls" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/create-a-music-player-on-android-user-controls--mobile-22787t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Create a Music Player on Android: User Controls" loading="lazy" srcset="https://cdn.tutsplus.com/cdn-cgi/image/width=1200/mobile/uploads/2014/03/0d63m-preview-image@2x.png 2x" src="https://cdn.tutsplus.com/cdn-cgi/image/width=600/mobile/uploads/2014/03/0d63m-preview-image@2x.png" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Android Development" href="https://code.tutsplus.com/c/mobile-development/s/android-development">
  
  
      Android Development


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  Create a Music Player on Android: User Controls
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  We are building a simple music player app for Android in this series. In this final part of the series, we will let the user control playback, including...
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" class="rounded-md" alt="Nitish Kumar" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
      Nitish Kumar


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">30 Jul 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="2"
     data-type="standard"
     data-url="https://code.tutsplus.com/create-a-music-player-on-android-song-playback--mobile-22778t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Create a Music Player on Android: Song Playback" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/create-a-music-player-on-android-song-playback--mobile-22778t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Create a Music Player on Android: Song Playback" loading="lazy" srcset="https://cdn.tutsplus.com/cdn-cgi/image/width=1200/mobile/uploads/2014/03/0d63m-preview-image@2x.png 2x" src="https://cdn.tutsplus.com/cdn-cgi/image/width=600/mobile/uploads/2014/03/0d63m-preview-image@2x.png" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Android Development" href="https://code.tutsplus.com/c/mobile-development/s/android-development">
  
  
      Android Development


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  Create a Music Player on Android: Song Playback
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  In this series, we are creating a music player on Android using the MediaPlayer and MediaController classes. In this part of the series, we will implement a...
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" class="rounded-md" alt="Nitish Kumar" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
      Nitish Kumar


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">29 Jul 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="3"
     data-type="standard"
     data-url="https://code.tutsplus.com/android-from-scratch-how-to-store-application-data-locally--cms-26853t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Android From Scratch: How to Store Application Data Locally" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/android-from-scratch-how-to-store-application-data-locally--cms-26853t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Android From Scratch: How to Store Application Data Locally" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/362/posts/26853/preview_image/picGeneric.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/362/posts/26853/preview_image/picGeneric.jpg" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Databases &amp; SQL" href="https://code.tutsplus.com/c/coding-fundamentals/s/databases-sql">
  
  
      Databases &amp; SQL


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  Android From Scratch: How to Store Application Data Locally
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  When it comes to persisting application data locally, Android developers are definitely spoiled for choice. In this tutorial, I&#39;ll show you how to make use...
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Ashraff Hathibelagal" href="https://tutsplus.com/authors/ashraff-hathibelagal">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/362/profiles/18808/profileImage/picGrid.jpg" class="rounded-md" alt="Ashraff Hathibelagal" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Ashraff Hathibelagal" href="https://tutsplus.com/authors/ashraff-hathibelagal">
  
  
      Ashraff Hathibelagal


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">28 Jul 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="4"
     data-type="standard"
     data-url="https://code.tutsplus.com/create-a-music-player-on-android-project-setup--mobile-22764t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Create a Music Player on Android: Project Setup" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/create-a-music-player-on-android-project-setup--mobile-22764t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Create a Music Player on Android: Project Setup" loading="lazy" srcset="https://cdn.tutsplus.com/cdn-cgi/image/width=1200/mobile/uploads/2014/03/0d63m-preview-image@2x.png 2x" src="https://cdn.tutsplus.com/cdn-cgi/image/width=600/mobile/uploads/2014/03/0d63m-preview-image@2x.png" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Android Development" href="https://code.tutsplus.com/c/mobile-development/s/android-development">
  
  
      Android Development


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  Create a Music Player on Android: Project Setup
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  Creating a music player is more complicated than creating something like a calculator. This is because in a music player, you will have to rely on the system...
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" class="rounded-md" alt="Nitish Kumar" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
      Nitish Kumar


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">27 Jul 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="5"
     data-type="standard"
     data-url="https://code.tutsplus.com/how-to-add-selection-support-to-a-recyclerview--cms-32175t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Add Multiple Selection to Android RecyclerView" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-add-selection-support-to-a-recyclerview--cms-32175t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="How to Add Multiple Selection to Android RecyclerView" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/32175/preview_image/empty_white_cardboard_tag_on_a_white_rope_blue_ba_2022_10_13_20_19_58_utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/32175/preview_image/empty_white_cardboard_tag_on_a_white_rope_blue_ba_2022_10_13_20_19_58_utc.jpg" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Android Development" href="https://code.tutsplus.com/c/mobile-development/s/android-development">
  
  
      Android Development


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  How to Add Multiple Selection to Android RecyclerView
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Advanced</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  This tutorial will teach you how to implement a list using RecyclerView and then add selection capabilities to the list.
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" class="rounded-md" alt="Nitish Kumar" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
      Nitish Kumar


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">27 Jun 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="6"
     data-type="standard"
     data-url="https://code.tutsplus.com/getting-started-with-recyclerview-and-cardview-on-android--cms-23465t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Getting Started With RecyclerView and CardView on Android" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/getting-started-with-recyclerview-and-cardview-on-android--cms-23465t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Getting Started With RecyclerView and CardView on Android" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/23465/preview_image/checking_programming_code_2021_08_29_14_43_20_utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/23465/preview_image/checking_programming_code_2021_08_29_14_43_20_utc.jpg" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Tools" href="https://code.tutsplus.com/c/coding-fundamentals/s/tools">
  
  
      Tools


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  Getting Started With RecyclerView and CardView on Android
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Intermediate</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  This tutorial will teach you how to create a dynamic list of items to display to users using RecyclerView and CardView.
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" class="rounded-md" alt="Nitish Kumar" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
      Nitish Kumar


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">24 Jun 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="7"
     data-type="standard"
     data-url="https://code.tutsplus.com/android-sdk-create-a-barcode-reader--mobile-17162t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Android SDK: Create a Barcode Reader" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/android-sdk-create-a-barcode-reader--mobile-17162t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Android SDK: Create a Barcode Reader" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/9563/preview_image/man_scanning_restaurant_menu_qr_code_D4EJH78.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/9563/preview_image/man_scanning_restaurant_menu_qr_code_D4EJH78.jpg" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Tools" href="https://code.tutsplus.com/c/coding-fundamentals/s/tools">
  
  
      Tools


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  Android SDK: Create a Barcode Reader
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Intermediate</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  In this tutorial, you&#39;ll learn how to integrate a barcode reader and QR code scanner in an Android app. The Google code scanner API will be of immense help...
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" class="rounded-md" alt="Nitish Kumar" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
      Nitish Kumar


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">29 May 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="8"
     data-type="standard"
     data-url="https://code.tutsplus.com/creating-animations-with-motionlayout-for-android--cms-31497t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Creating Animations With MotionLayout for Android" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/creating-animations-with-motionlayout-for-android--cms-31497t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Creating Animations With MotionLayout for Android" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/31497/preview_image/abstract_sparks_glowing_glitter_dust_particles_bac_2021_08_29_09_45_36_utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/31497/preview_image/abstract_sparks_glowing_glitter_dust_particles_bac_2021_08_29_09_45_36_utc.jpg" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Animation" href="https://webdesign.tutsplus.com/c/htmlcss/s/animation">
  
  
      Animation


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  Creating Animations With MotionLayout for Android
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Intermediate</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  This tutorial will teach you how to animate different widgets in your activity using the MotionLayout subclass in Android.
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" class="rounded-md" alt="Nitish Kumar" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Nitish Kumar" href="https://tutsplus.com/authors/nitish-kumar">
  
  
      Nitish Kumar


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">26 May 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="9"
     data-type="standard"
     data-url="https://code.tutsplus.com/creating-your-first-android-app--cms-34497t"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: My First App: How to Create Your First Android App Step by Step" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/creating-your-first-android-app--cms-34497t">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="My First App: How to Create Your First Android App Step by Step" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/34497/preview_image/programmer_working_with_program_code_2021_12_09_03_19_27_utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/34497/preview_image/programmer_working_with_program_code_2021_12_09_03_19_27_utc.jpg" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Android Templates" href="https://code.tutsplus.com/c/mobile-development/s/android-templates">
  
  
      Android Templates


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  My First App: How to Create Your First Android App Step by Step
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  In this tutorial, I&#39;ll show you how to create your first Android app. While doing so, I&#39;ll also introduce you to important Android-specific concepts such as...
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Ashraff Hathibelagal" href="https://tutsplus.com/authors/ashraff-hathibelagal">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/362/profiles/18808/profileImage/picGrid.jpg" class="rounded-md" alt="Ashraff Hathibelagal" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Ashraff Hathibelagal" href="https://tutsplus.com/authors/ashraff-hathibelagal">
  
  
      Ashraff Hathibelagal


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">23 May 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="10"
     data-type="standard"
     data-url="https://code.tutsplus.com/15-best-android-app-templates-of-2017--cms-29643a"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: 20+ Best Android App Templates for 2025" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/15-best-android-app-templates-of-2017--cms-29643a">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="20+ Best Android App Templates for 2025" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/29643/preview_image/top_view_of_designers_creative_app_interface_for_u_293RUSH.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/29643/preview_image/top_view_of_designers_creative_app_interface_for_u_293RUSH.jpg" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Android Templates" href="https://code.tutsplus.com/c/mobile-development/s/android-templates">
  
  
      Android Templates


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  20+ Best Android App Templates for 2025
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  Do you want to save time and build your Android apps faster in 2023? By using app templates, you cut through the slog of creating an app from scratch and...
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Franc Lucas" href="https://tutsplus.com/authors/franc-lucas">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg" class="rounded-md" alt="Franc Lucas" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Franc Lucas" href="https://tutsplus.com/authors/franc-lucas">
  
  
      Franc Lucas


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">27 Apr 2023</time>
</div>


    </footer>
  </article>
</li>
      <li class="w-full md:w-[304px] inline-block relative rounded-md"
     data-explanation=""
     data-controller="post-card-tracking"
     data-index="11"
     data-type="standard"
     data-url="https://code.tutsplus.com/best-flutter-app-templates-on-codecanyon--cms-35676a"
>
  <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: 20+ Best Flutter Mobile App Templates on CodeCanyon in 2025" data-action="click-&gt;post-card-tracking#onClick" href="https://code.tutsplus.com/best-flutter-app-templates-on-codecanyon--cms-35676a">
</a>
  <article class="flex flex-col h-[auto]">
    <header class="h-[auto]">
      <div class="flex w-max h-fit mr-4 relative !w-full">
            <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="20+ Best Flutter Mobile App Templates on CodeCanyon in 2025" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/35676/preview_image/flutter2.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/35676/preview_image/flutter2.jpg" />

  
  
</div>

                <div>
    <a class="flex z-[1] relative font-bold mt-4 text-xs text-bubble-gum uppercase !inline-block font-family-polysan-regular-bulky" aria-label="Category: Android Templates" href="https://code.tutsplus.com/c/mobile-development/s/android-templates">
  
  
      Android Templates


</a></div>



      <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median">
  20+ Best Flutter Mobile App Templates on CodeCanyon in 2025
</h3>

                <div class="font-normal text-grey-900 text-sm mt-1">
  <span>Tutorial</span>
  <span>•</span>
  <span>Beginner</span>
</div>



                <p class="text-sm leading-5 m-0 text-grey-500 mt-2 line-clamp-4">
  Flutter app templates create beautiful apps that work on Android and iOS platforms. Find yours on CodeCanyon today! 
</p>

    </header>
    <footer>
                <div class="flex mt-4 [&amp;&gt;div&gt;a]:!inline-block [&amp;&gt;div&gt;a]:truncate [&amp;&gt;div&gt;a]:max-w-[160px]">
  <a class="flex z-[1] relative rounded-md" aria-label="Author: Franc Lucas" href="https://tutsplus.com/authors/franc-lucas">
  
  
    <img src="https://cms-assets.tutsplus.com/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg" class="rounded-md" alt="Franc Lucas" width="32px" height="32px" loading="lazy">


</a>  <div class="text-xs md:text-sm flex ml-2 w-max leading-5 items-center">
    <a class="flex z-[1] relative text-grey-900 font-family-polysan-regular block" aria-label="Author: Franc Lucas" href="https://tutsplus.com/authors/franc-lucas">
  
  
      Franc Lucas


</a>
      <span class="text-grey-500 ml-1 mr-1">•</span>
      <time class="text-grey-500 font-family-polysan-regular">25 Apr 2023</time>
</div>


    </footer>
  </article>
</li>
  </ol>

          <nav class="pagination" data-analytics-context="pagination"><span class="pagination__button pagination__prev-button pagination__button--disabled"><i class="fa fa-angle-left"></i></span><span aria-label="page 1" class="pagination__page pagination__button pagination__page--current">1</span><a rel="next" class="pagination__button " aria-label="page 2" href="/c/mobile-development?page=2">2</a><a class="pagination__button " aria-label="page 3" href="/c/mobile-development?page=3">3</a><span class="pagination__gap">…</span><a class="pagination__button " aria-label="page 49" href="/c/mobile-development?page=49">49</a><a class="pagination__button " aria-label="page 50" href="/c/mobile-development?page=50">50</a><a rel="next" class="pagination__button pagination__next-button" aria-label="next" href="/c/mobile-development?page=2"><i class="fa fa-angle-right"></i></a></nav>

  </div>
</div>
</div>


</div>

  <div name="" class="full-section odd:bg-grey-25 even:bg-none" style="">
  
  
    <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-10 pb-10 md:pt-20 md:pb-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto">
  
      <h2 class="mt-0 mb-6 leading-5 font-family-polysan-regular-median ">
  
  Related Categories

</h2>
<div class="flex flex-wrap md:hidden gap-2" data-controller="facet-pills-component" data-analytics-context="facet pills">
  <a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: JavaScript" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/javascript">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">JavaScript</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: WordPress" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/wordpress">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">WordPress</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: PHP" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/php">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">PHP</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: Laravel" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/php/s/laravel">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">Laravel</div>
</a>
</div>
<div class="hidden md:flex flex-wrap gap-2" data-controller="facet-pills-component" data-analytics-context="facet pills">
  <a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: JavaScript" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/javascript">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">JavaScript</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: WordPress" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/wordpress">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">WordPress</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: PHP" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/php">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">PHP</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: Laravel" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/php/s/laravel">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">Laravel</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: Android Development" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/mobile-development/s/android-development">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">Android Development</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: React" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/javascript/s/react">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">React</div>
</a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: Angular" data-action="click-&gt;facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/javascript/s/angular">
  <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">Angular</div>
</a>
</div>


</div>


</div>

  <!-- sign-up featured section -->
<div name="" class="full-section " style="">
  
  <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-10 pb-10 md:pt-20 md:pb-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto">
  
      <div data-controller="sign-up"
    class="sign-up-component w-full rounded-lg overflow-hidden text-base bg-[#191919] space-x-4 mb-0 mx-auto">
  <div class="rounded-lg grid grid-cols-1 2xl:grid-cols-10 gap-2">
    <div class="background-image hidden 2xl:block col-span-3">
      <img alt="Side image" class="w-full h-full object-cover" src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/2604/email_settings/topic_page/backgroundImage/JOB_843_TutsDesignUpdates_EmailPromoBanner.png" />
    </div>
    <div class="col-span-7 flex flex-col lg:flex-row justify-between p-6 lg:py-[30px] 2xl:pl-0">
      <div class="text-3xl leading-[110%] lg:text-2xl font-semibold font-family-polysan-regular-median ">
        <span class="text-white">Ready to make your best work?</span>
        <p class="text-[#87E64B] email-setting-tease">Get tutorials, tips and tricks straight to your inbox.</p>
      </div>
      <div>
        <div class="input-block flex flex-col md:flex-row pt-6 lg:pt-0 max-w-[29.688rem]">
          <input
            type="email"
            id="email"
            name="email"
            class="email-setting-email-input-field bg-[#191919] border-none border-[#949494] outline active:outline focus:outline outline-1 active:outline-1 focus:outline-1 outline-gray-400 active:outline-gray-400 focus:outline-gray-400 font-family-polysan-regular text-white placeholder:text-grey-500 text-base w-full indent-2.5 md:w-96 h-12 md:mr-2 rounded"
            placeholder="Enter your email"
            required
            pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
          >
          <div class="mt-2 md:mt-0">
            <button name="button" type="submit" data-action="sign-up#sendData click-&gt;ga-analytics#sendSignUpEmailClickEvent" class="text-green-text-button text-base font-family-polysan-regular-median font-semibold h-12 md:w-[6.563rem] bg-interactive-green rounded border-none cursor-pointer hover:bg-lime-500 px-4">Sign up</button>
          </div>
        </div>
        <div class="suffix w-full text-[#707070] mt-2 ">
          <span class="suffix-content w-full font-family-polysan-regular">Unsubscribe at any time. <a target="_blank" rel="noopener noreferrer" class="text-grey-500 custom-underline hover:text-gray-300" href="https://www.envato.com/privacy/">Privacy Policy.</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>


</div>

</div>

</div>
</main></div><div class="cta-toast-popup" data-analytics-context-detail="cta toast"><turbo-frame id="cta_toast_popup" src="/cta_toast"></turbo-frame></div>    <div
      id="footer-promo-component"
      class="w-full h-fit flex justify-center items-center bg-white font-family-polysan-regular pb-20 px-4 sm:px-6"
    >
      <a
        class="w-full lg:max-w-[960px] 2xl:max-w-[1290px] h-[615px] sm:h-[343px] bg-[#87E64B] rounded-[15px] overflow-hidden flex flex-col sm:flex-row"
        href="https://elements.envato.com/pricing"
        data-action="click->ga-analytics#sendElementsClickEvent"
      >
        <div class="w-full sm:w-1/2 h-1/2 sm:h-full flex flex-col justify-center px-4 sm:pl-[24px] xl:pl-[64px] gap-y-4">
          <div class="whitespace-break-spaces text-3xl font-semibold text-black text-left">One subscription.
Unlimited downloads of assets.
Full stack of AI<span><img class='h-[16px] w-[16px] inline align-text-top' src='https://static.tutsplus.com/packs/static/images/ai_icon-48d355745542bc2efdc6.png'></span> tools.</div>
          <div class="text-black sm:hidden md:block">
            Find everything from photos to fonts, and templates to so much more.
          </div>
          <div>
            <button class="bg-[#191919] text-white rounded-md hover:bg-gray-800 active:bg-gray-700 text-[16px] font-semibold border-0 hover:cursor-pointer px-[25px] py-[8px]">
              Start creating
            </button>
          </div>
        </div>
        <div class="w-full sm:w-1/2 h-1/2 sm:h-full">
          <img
            class="w-full h-full sm:hidden object-cover"
            src="https://static.tutsplus.com/packs/static/images/AI_LandingPage_FooterBanner_Mobile-7b931bcdc5fe09dfb374.png"
          >
          <img
            class="hidden sm:block lg:hidden w-full h-full object-cover"
            src="https://static.tutsplus.com/packs/static/images/AI_LandingPage_FooterBanner_Tablet-cfcf92cb18b21ec3b0a5.png"
          >
          <img
            class="hidden lg:block w-full h-full object-cover"
            src="https://static.tutsplus.com/packs/static/images/AI_LandingPage_FooterBanner_Desktop-97f02583fc44f999cffb.png"
          >
        </div>
      </a>
    </div>
<div class="ecosystem-highlight" data-analytics-context-detail="ecosystem highlight"><div class="ecosystem-highlight__cards"><div class="ecosystem-highlight__card"><a data-action="click-&gt;ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?ec_unit=ecosystem_highlight&amp;utm_campaign=elements_tuts-ecosystem-promo_&amp;utm_medium=promos&amp;utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Elements-9c6156923682e0ca754a.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title">Unlimited Downloads<br />From $16.50/month</div><div class="ecosystem-highlight__card-description">Get access to over one million creative assets on Envato.</div></div></a></div><div class="ecosystem-highlight__card"><a data-action="click-&gt;ga-analytics#sendMarketClickEvent" href="https://themeforest.net?ec_unit=ecosystem_highlight&amp;utm_campaign=elements_tuts-ecosystem-promo_&amp;utm_medium=promos&amp;utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Market-b1c3dbb6b2a34956edf4.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Over 9 Million Digital Assets</div><div class="ecosystem-highlight__card-description"> Everything you need for your next creative project.</div></div></a></div><div class="ecosystem-highlight__card"><a data-action="click-&gt;ga-analytics#sendPlaceitClickEvent" href="https://placeit.net?ec_unit=ecosystem_highlight&amp;utm_campaign=placeit_mkt-footer&amp;utm_content=tuts_global-footer&amp;utm_medium=promos&amp;utm_source=tutsplus.com"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Placeit-2bfac81aff196db3c276.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Create Beautiful Logos, Designs <br> &amp; Mockups in Seconds</div><div class="ecosystem-highlight__card-description"> Design like a professional without Photoshop.</div></div></a></div><div class="ecosystem-highlight__card"><a href="https://community.envato.com?ec_unit=ecosystem_highlight&amp;utm_campaign=elements_tuts-ecosystem-promo_&amp;utm_medium=promos&amp;utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Community-4973bc700aa03754d91c.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Join the Community</div><div class="ecosystem-highlight__card-description"> Share ideas. Host meetups. Lead discussions. Collaborate.</div></div></a></div></div></div><footer class="w-full h-fit flex flex-col bg-[#FFF5ED] text-[#191919]  pl-4 pr-8" data-analytics-context="footer" data-controller="page-footer"><div class="flex flex-col my-10 md:flex-row"><div class="flex flex-col gap-y-3 pr-8 mb-10"><div><img loading="lazy" alt="envato-tuts+" class="mt-2 mb-4 align-middle w-auto h-6" src="https://static.tutsplus.com/packs/static/images/cta_block/envato_dark-d7fdce89d7315fa71e83.svg" /></div><div class="flex flex-row w-full items-center gap-x-7 md:gap-x-3"><a class="text-[#191919] flex" href="https://www.instagram.com/envato/" rel="noopener noreferrer" target="_blank" title="Envato - Instagram"><div><svg class="w-5 h-5" role="img" title="instagram" viewBox="0 0 24 24"><use href="#instagram"></use></svg></div></a><a class="text-[#191919] flex" href="https://www.tiktok.com/@envato" rel="noopener noreferrer" target="_blank" title="Envato - TikTok"><div><svg class="w-5 h-5" role="img" title="tik-tok" viewBox="0 0 24 24"><use href="#tik-tok"></use></svg></div></a><a class="text-[#191919] flex" href="https://www.facebook.com/envato/" rel="noopener noreferrer" target="_blank" title="Envato - Facebook"><div><svg class="w-5 h-5 fill-[#191919]" role="img" title="facebook-square" viewBox="0 0 24 24"><use href="#facebook-square"></use></svg></div></a><a class="text-[#191919] flex" href="https://www.youtube.com/user/Envato" rel="noopener noreferrer" target="_blank" title="Envato - YouTube"><div><svg class="w-5 h-5" role="img" title="youtube-outlined" viewBox="0 0 24 24"><use href="#youtube-outlined"></use></svg></div></a><a class="text-[#191919] flex" href="https://www.threads.net/@envato" rel="noopener noreferrer" target="_blank" title="Envato - Threads"><div><svg class="w-5 h-5" role="img" title="threads" viewBox="0 0 24 24"><use href="#threads"></use></svg></div></a><a class="text-[#191919] flex" href="https://www.pinterest.com.au/envato" rel="noopener noreferrer" target="_blank" title="Envato - Pinterest"><div><svg class="w-5 h-5" role="img" title="pinterest" viewBox="0 0 24 24"><use href="#pinterest"></use></svg></div></a><a class="text-[#191919] flex" href="https://x.com/envato" rel="noopener noreferrer" target="_blank" title="Envato - Twitter"><div><svg class="w-5 h-5" role="img" title="twitter-x" viewBox="0 0 24 24"><use href="#twitter-x"></use></svg></div></a></div></div><div class="w-full columns-2 md:columns-3 lg:columns-4 xl:columns-4"><div class="flex flex-col break-inside-avoid gap-y-1 mb-5"><span class="text-base font-semibold leading-normal tracking-normal">Discover</span><span><a class="text-[#191919] flex" href="https://elements.envato.com/about">About Envato</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/pricing">Our Pricing & Plans</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/c/stock-video">Stock Video</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/video-templates">Video Templates</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/audio/royalty-free-music">Royalty-Free Music</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/photos">Stock Photos</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/fonts">Fonts</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/popular-searches">Popular Searches</a></span></div><div class="flex flex-col break-inside-avoid gap-y-1 mb-5"><span class="text-base font-semibold leading-normal tracking-normal">License & User Terms</span><span><a class="text-[#191919] flex" href="https://elements.envato.com/license-terms">License Terms</a></span><span><a class="text-[#191919] flex" href="https://help.elements.envato.com/hc/en-us/articles/360000629006-User-Terms">Terms & Conditions</a></span><span><a class="text-[#191919] flex" href="https://www.envato.com/privacy/">Privacy Policy</a></span><span><a class="text-[#191919] flex" href="https://help.elements.envato.com/hc/en-us/articles/31035788503321-Acceptable-Use-Policy">Acceptable Use Policy</a></span><span><a class="text-[#191919] flex" href="https://help.elements.envato.com/hc/en-us/articles/360000621743-Fair-Use-Policy">Fair Use Policy</a></span><span><a class="text-[#191919] flex" href="https://www.envato.com/cookies/">Cookies</a></span><span><a class="text-[#191919] flex" data-action="click-&gt;page-footer#openCookieSettings" href="javascript:void(0);">Cookie Settings</a></span><span><a class="text-[#191919] flex" href="https://www.envato.com/privacy/my-personal-information/">Do not sell or share my personal information</a></span></div><div class="flex flex-col break-inside-avoid gap-y-1 mb-5"><span class="text-base font-semibold leading-normal tracking-normal">Resources</span><span><a class="text-[#191919] flex" href="https://www.youtube.com/@envatotuts">Discover Tuts+</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/learn/c/video-music">Video & Music</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/learn/c/design">Design</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/learn/c/marketing">Marketing</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/learn/c/web-design">Web Design</a></span><span><a class="text-[#191919] flex" href="https://elements.envato.com/learn">Explore Blog</a></span></div><div class="flex flex-col break-inside-avoid gap-y-1 mb-5"><span class="text-base font-semibold leading-normal tracking-normal">Help</span><span><a class="text-[#191919] flex" href="https://help.elements.envato.com/hc/en-us/">Help Center</a></span><span><a class="text-[#191919] flex" href="https://www.envato.com/affiliates/">Become an Affiliate</a></span></div><div class="flex flex-col break-inside-avoid gap-y-1 mb-5"><span class="text-base font-semibold leading-normal tracking-normal">About Us</span><span><a class="text-[#191919] flex" href="https://www.envato.com/about/">Who We Are</a></span><span><a class="text-[#191919] flex" href="https://www.envato.com/products/">Our Products</a></span><span><a class="text-[#191919] flex" href="https://www.envato.com/about/purpose/">Our Purpose</a></span><span><a class="text-[#191919] flex" href="https://www.envato.com/careers/">Join Our Team</a></span><span><a class="text-[#191919] flex" href="https://www.envato.com/blog/">Company Blog</a></span></div><div class="flex flex-col break-inside-avoid gap-y-1 mb-5"><span class="text-base font-semibold leading-normal tracking-normal">Authors</span><span><a class="text-[#191919] flex" href="https://www.envato.com/lp/become-an-elements-author/">Become an Author</a></span><span><a class="text-[#191919] flex" href="https://elements-contributors.envato.com">Author Sign In</a></span><span><a class="text-[#191919] flex" href="https://help.author.envato.com/hc/en-us">Author Help Center</a></span></div></div></div><div class="border-t-2 border-[#CCCCCC] py-10 flex flex-col gap-y-2"><div class="[&amp;&gt;:not(:last-child)]:border-r-2 [&amp;&gt;:not(:last-child)]:border-[#CCCCCC] [&amp;&gt;:not(:last-child)]:pr-4 [&amp;&gt;:not(:last-child)]:mr-4"><span><a class="text-[#191919]" data-action="click-&gt;ga-analytics#sendMarketClickEvent" href="https://themeforest.net">Envato Market</a></span><span><a class="text-[#191919]" href="https://tutsplus.com/">Envato Tuts+</a></span><span><a class="text-[#191919]" data-action="click-&gt;ga-analytics#sendPlaceitClickEvent" href="https://placeit.net">Placeit by Envato</a></span><span><a class="text-[#191919]" href="https://mixkit.co/">Mixkit</a></span><span><a class="text-[#191919]" href="https://www.envato.com/products/">All Products</a></span><span><a class="text-[#191919]" href="https://www.envato.com/sitemap/">Sitemap</a></span></div><div class="text-sm text-[#707070]" data-testid="footer-copyright"><p>© 2025 Envato Trademarks and brands are the property of their respective owners.</p></div></div></footer><script data-cookieconsent="statistics" defer="defer" src="https://www.google-analytics.com/analytics.js" type="text/plain"></script>  <noscript>
    <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=912712196247539&ev=PageView&noscript=1"/>
  </noscript>
<script src="https://static.tutsplus.com/packs/js/lazy_load_third_party_libraries-bad6aa64f3aa763211dd.js" defer="defer"></script><script type="text/javascript">
/* <![CDATA[ */
  var google_conversion_id = 943617023;
  var google_custom_params = window.google_tag_params;
  var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" defer="defer" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
  <div style="display:inline;">
    <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/943617023/?value=0&amp;guid=ON&amp;script=0"/>
  </div>
</noscript>
</body></html>