CINXE.COM

<!DOCTYPE html><html data-app-version="-production" lang="en"><head><link rel="next" href="https://code.tutsplus.com?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 = false; 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-76a1416ff3535925e8ac.js" data-turbo-suppress-warning="" async="async"></script> <script src="https://static.tutsplus.com/packs/js/556-0e43d15004b7bcb6044a.js" data-turbo-suppress-warning="" async="async"></script> <script src="https://static.tutsplus.com/packs/js/697-215d08194352e868864e.js" data-turbo-suppress-warning="" async="async"></script> <script src="https://static.tutsplus.com/packs/js/topic-75f5849b2de08d735459.js" data-turbo-suppress-warning="" async="async"></script><link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/697-de6b682b.css" /> <link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/topic-635f2018.css" /><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>Code Courses and Tutorials | Envato Tuts+</title><link rel="canonical" href="https://code.tutsplus.com/" /><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="Code Courses and Tutorials | 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="Thousands of free tutorials and online courses to help you learn software development from mobile devices to web applications and everything in between. Join our community to improve your coding skills and workflow. What would you like to learn?"> <meta property="og:type" content="website"> <meta property="og:url" content="https://code.tutsplus.com/"> <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": "Organization", "name": "Envato", "alternateName": "Envato Tuts+", "url": "https://tutsplus.com/", "logo": "https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png", "contactPoint": {"@type": "ContactPoint", "telephone": "+61 3 8376 6284", "contactType": "corporate contact"}, "parentOrganization": {"@type": "Organization", "name": "Envato Pty Ltd", "url": "https://www.envato.com/about"}, "sameAs": [ "https://tutsplus.com/", "https://business.tutsplus.com/", "https://code.tutsplus.com/", "https://design.tutsplus.com/", "https://webdesign.tutsplus.com/", "https://photography.tutsplus.com/", "https://music.tutsplus.com/", "https://cgi.tutsplus.com/", "https://gamedevelopment.tutsplus.com/", "https://computers.tutsplus.com/", "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/", "https://twitter.com/envato", "https://www.facebook.com/envato", "https://www.youtube.com/user/Envato", "https://www.instagram.com/envato/", "https://www.pinterest.com/envato/", "https://market.envato.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 body--announcement-bar topic-code post__fullwidth-inarticle-ad-footer" data-analytics-context="body" data-controller="ga-analytics content-filters utm" 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"> <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(/&/g, '&') .replace(/'/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: '1199', app_env: 'production', topic: 'code', page_type: 'topic', category: '', 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>  <script src="https://static.tutsplus.com/packs/js/global_nav_scroll-e15d1af062eca0d35d71.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->global-nav#sendNewNavDataLayerEvent" href="#page-content">Skip to content</a><div class="announcement-bar view announcement-bar--open" data-controller="announcement-bar" data-announcement-id="newbrand_dec24" data-background-image="" data-fallback-background-color="#9CEE69" data-text-color="#000000" data-link-color="#FFFFFF" data-analytics-context="announcement bar" > <div class="announcement-bar__content"> <div class="announcement-bar__primary"> <div class="announcement-bar__title"> <div align="center" class="font-family-polysan-regular"> <span class="announcement-bar__title-desktop"> <strong>Unlimited fonts, graphic templates, mockups, add-ons & more </strong> </span> <span class="announcement-bar__title-mobile"> <strong>Unlimited creative assets </strong> </span> <a rel="noskim" href="https://elements.envato.com/?utm_source=tutsplus.com&utm_medium=promos&utm_campaign=elements_tuts-header_promo" data-action="click->ga-analytics#sendElementsClickEvent">From $16.50/m</a> </div> <style> .announcement-bar__title a { border-radius:4px; background-color:#191919; padding:0px 20px; box-shadow:0px 0px 0px #aeec7b; margin:10px 10px 10px 10px; font-size:12px; height:30px; line-height:30px; text-decoration:none; color:#ffffff; } .announcement-bar__title a:hover { background-color: #383838; text-decoration:none; color:#25410d; } </style> </div> </div> <div class="announcement-bar__secondary"> <a title="Close this announcement bar" class="announcement-bar__close-link" data-action="click->announcement-bar#close click->global-nav#onAnnouncementBarClose" href="#"> <span class="announcement-bar__close-label">Dismiss</span> <i class="fa fa-times announcement-bar__close-icon"></i> </a> </div> </div> </div> <div class="global-nav__mobile-closed"><div class="nav-actions"><a class="mobile-menu-icon mobile-header-action" data-action="click->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->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->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->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->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->global-nav#sendSearchDataLayerEvent submit->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->global-search#keydown input->global-search#auto_suggestions focus->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->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->global-nav#toggleSecondLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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->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->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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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->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->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->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->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->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->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->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->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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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->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->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->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->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->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->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->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->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->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->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->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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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->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->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->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->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->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->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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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->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->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->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->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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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->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 & SQL'> <a href='https://code.tutsplus.com/c/coding-fundamentals/s/databases-sql' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Databases & 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->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->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->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->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->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->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->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 & Git'> <a href='https://code.tutsplus.com/c/coding-fundamentals/s/version-control-git' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Version Control & 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->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->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->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->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->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='Game Development'> <a href='https://code.tutsplus.com/c/coding-fundamentals/s/game-development' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Game Development </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->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->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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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->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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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->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->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='Cloud & Hosting'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> Cloud & 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->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->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 & Hosting </span> <a href='https://code.tutsplus.com/c/cloud-hosting' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all Cloud & 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->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->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->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->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 & SQL'> <a href='https://code.tutsplus.com/c/cloud-hosting/s/databases-sql' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Databases & 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%2F">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->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->global-nav#sendNewNavDataLayerEvent" href="https://elements.envato.com">Envato</a></li></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"><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->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Envato Elements</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">|</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->global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Tuts+ YouTube</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">|</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%2F">Sign In</a></turbo-frame></li></ul></div></div><div class="global-new-nav__header-bottom"><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->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 font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://design.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Design</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://business.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Business</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://photography.tutsplus.com/photo' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Photo</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://photography.tutsplus.com/video' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Video</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://webdesign.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Web Design</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median global-nav__top-level-item--expanded'> <a href='https://code.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !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'> <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->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->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->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->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->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->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->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->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->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->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->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->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->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->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 ' 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->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->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->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->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->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->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->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->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->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->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'>   </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->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->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->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->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->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->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->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->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->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->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->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->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->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->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->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->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->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->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->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->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 & SQL'> <a href='https://code.tutsplus.com/c/coding-fundamentals/s/databases-sql' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Databases & 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->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->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->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->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->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->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'>   </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->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 & 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->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Version Control & 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->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->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->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->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->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='Game Development'> <a href='https://code.tutsplus.com/c/coding-fundamentals/s/game-development' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Game Development </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->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->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->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->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->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->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->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->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 ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Cloud & Hosting'> <a href='https://code.tutsplus.com/c/cloud-hosting' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> Cloud & 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->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->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->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->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 & SQL'> <a href='https://code.tutsplus.com/c/cloud-hosting/s/databases-sql' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Databases & 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->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All Cloud & 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 font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://music.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !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" data-controller="global-search"><form class="global-nav__search-form nonmobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->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" data-action="keydown->global-search#keydown input->global-search#auto_suggestions focus->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></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-5 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="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="col-span-2 flex flex-col justify-center category-heading-intro-wrapper"> <h1 class="m-0 md:text-5xl font-family-polysan-regular-median"> Code </h1> <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"><p>Discover thousands of free code tutorials to help you learn web and mobile development. You can learn <a href="https://code.tutsplus.com/c/mobile-development/s/android-development/t/tutorials">Android app development</a>, master <a href="https://code.tutsplus.com/c/mobile-development/s/react-native-development/t/tutorials">React Native</a>, become a better <a href="https://code.tutsplus.com/c/wordpress/t/tutorials">WordPress developer</a>, and much more.</p></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->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->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 class="hidden lg:flex text-right flex-col justify-center category-heading-hero-image-wrapper"> <img src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/2618/topics/7/hero_image_url/code_2x.jpg" alt="Person smiling and learning" width="100%" loading="lazy"> </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-5 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">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/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/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="topic-featured-articles" data-analytics-context="featured content"> <div class="flex justify-between"> <div> <h2 class="mt-0 mb-6 leading-5 font-family-polysan-regular-median "> Featured Code Tutorials </h2> </div> <div class="mr-6 mb-4 self-end hidden md:block"> <div class="text-center text-sm font-bold"> <a href="/t/tutorials" class="text-sm font-bold text-blue-600" data-action="click->home-page-analytics#logAnchorLinkClick">Browse All Tutorials</a> </div> </div> </div> <div class="hidden md:block" data-test-id="topic-featured-articles-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-3"> <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/how-to-use-map-filter-reduce-in-javascript--cms-26209t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Use Map, Filter, and Reduce in JavaScript" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-use-map-filter-reduce-in-javascript--cms-26209t"> </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 Use Map, Filter, and Reduce in JavaScript" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/34/posts/26209/preview_image/javascript-wide-retina-preview.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/34/posts/26209/preview_image/javascript-wide-retina-preview.png" /> </div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median"> How to Use Map, Filter, and Reduce in JavaScript </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 [&>a]:truncate [&>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: Peleke Sengstacke" href="https://tutsplus.com/authors/peleke-sengstacke"> Peleke Sengstacke </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">16 Oct 2021</time> </div> </footer> </article> </li> </div> </div> <div> <div class="mr-3"> <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/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655a" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: The Best Way to Deep Copy an Object in JavaScript" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655a"> </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="The Best Way to Deep Copy an Object in JavaScript" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/39655/preview_image/abstract_geometric_figures_three_dimensional_pyra_2021_08_26_22_27_22_utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/39655/preview_image/abstract_geometric_figures_three_dimensional_pyra_2021_08_26_22_27_22_utc.jpg" /> </div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median"> The Best Way to Deep Copy an Object in JavaScript </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 [&>a]:truncate [&>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: Kingsley Ubah" href="https://tutsplus.com/authors/kingsley-ubah"> Kingsley Ubah </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">8 Mar 2022</time> </div> </footer> </article> </li> </div> </div> <div> <div class="mr-3"> <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://code.tutsplus.com/create-a-javascript-ajax-post-request-with-and-without-jquery--cms-39195a" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: Create a JavaScript AJAX Post Request: With and Without jQuery" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/create-a-javascript-ajax-post-request-with-and-without-jquery--cms-39195a"> </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 JavaScript AJAX Post Request: With and Without jQuery" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/39195/preview_image/black-digital-computer-data-and-network-connection-2021-08-29-01-03-33-utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/39195/preview_image/black-digital-computer-data-and-network-connection-2021-08-29-01-03-33-utc.jpg" /> </div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median"> Create a JavaScript AJAX Post Request: With and Without jQuery </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 [&>a]:truncate [&>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: Kingsley Ubah" href="https://tutsplus.com/authors/kingsley-ubah"> Kingsley Ubah </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">21 Dec 2021</time> </div> </footer> </article> </li> </div> </div> <div> <div class="mr-3"> <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/how-to-use-php-in-html-code--cms-34378t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Use PHP in HTML" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-use-php-in-html-code--cms-34378t"> </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 Use PHP in HTML" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/34378/preview_image/web%20dev.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/34378/preview_image/web%20dev.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 Use PHP in HTML </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 [&>a]:truncate [&>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: Sajal Soni" href="https://tutsplus.com/authors/sajal-soni"> Sajal Soni </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">26 Mar 2022</time> </div> </footer> </article> </li> </div> </div> </div> </div> <div class="md:hidden" data-test-id="topic-featured-articles-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/how-to-use-map-filter-reduce-in-javascript--cms-26209t" class="list-none " data-test-id="topic-featured-articles-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: How to Use Map, Filter, and Reduce in JavaScript" href="https://code.tutsplus.com/how-to-use-map-filter-reduce-in-javascript--cms-26209t"> </a> <div class="flex-none w-1/2"> <img class="flex object-contain w-full rounded-md aspect-1/1" alt="How to Use Map, Filter, and Reduce in JavaScript" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/34/posts/26209/preview_image/javascript-wide-retina-preview.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/34/posts/26209/preview_image/javascript-wide-retina-preview.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"> How to Use Map, Filter, and Reduce in JavaScript </h3> <div class="flex font-normal text-xs md:text-sm mt-4 !block [&>time]:block [&>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: Peleke Sengstacke" href="https://tutsplus.com/authors/peleke-sengstacke"> Peleke Sengstacke </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">16 Oct 2021</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/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655a" class="list-none " data-test-id="topic-featured-articles-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: The Best Way to Deep Copy an Object in JavaScript" href="https://code.tutsplus.com/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655a"> </a> <div class="flex-none w-1/2"> <img class="flex object-contain w-full rounded-md aspect-1/1" alt="The Best Way to Deep Copy an Object in JavaScript" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/39655/preview_image/abstract_geometric_figures_three_dimensional_pyra_2021_08_26_22_27_22_utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/769/posts/39655/preview_image/abstract_geometric_figures_three_dimensional_pyra_2021_08_26_22_27_22_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"> The Best Way to Deep Copy an Object in JavaScript </h3> <div class="flex font-normal text-xs md:text-sm mt-4 !block [&>time]:block [&>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: Kingsley Ubah" href="https://tutsplus.com/authors/kingsley-ubah"> Kingsley Ubah </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">8 Mar 2022</time> </div> </div> </article> </li> <li data-explanation="" data-controller="post-card-tracking" data-index="2" data-type="featured" data-url="https://code.tutsplus.com/create-a-javascript-ajax-post-request-with-and-without-jquery--cms-39195a" class="list-none " data-test-id="topic-featured-articles-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: Create a JavaScript AJAX Post Request: With and Without jQuery" href="https://code.tutsplus.com/create-a-javascript-ajax-post-request-with-and-without-jquery--cms-39195a"> </a> <div class="flex-none w-1/2"> <img class="flex object-contain w-full rounded-md aspect-1/1" alt="Create a JavaScript AJAX Post Request: With and Without jQuery" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/39195/preview_image/black-digital-computer-data-and-network-connection-2021-08-29-01-03-33-utc.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/769/posts/39195/preview_image/black-digital-computer-data-and-network-connection-2021-08-29-01-03-33-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"> Create a JavaScript AJAX Post Request: With and Without jQuery </h3> <div class="flex font-normal text-xs md:text-sm mt-4 !block [&>time]:block [&>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: Kingsley Ubah" href="https://tutsplus.com/authors/kingsley-ubah"> Kingsley Ubah </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">21 Dec 2021</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/how-to-use-php-in-html-code--cms-34378t" class="list-none " data-test-id="topic-featured-articles-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: How to Use PHP in HTML" href="https://code.tutsplus.com/how-to-use-php-in-html-code--cms-34378t"> </a> <div class="flex-none w-1/2"> <img class="flex object-contain w-full rounded-md aspect-1/1" alt="How to Use PHP in HTML" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/34378/preview_image/web%20dev.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/769/posts/34378/preview_image/web%20dev.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 Use PHP in HTML </h3> <div class="flex font-normal text-xs md:text-sm mt-4 !block [&>time]:block [&>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: Sajal Soni" href="https://tutsplus.com/authors/sajal-soni"> Sajal Soni </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">26 Mar 2022</time> </div> </div> </article> </li> </div> </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="topic-featured-courses" data-analytics-context="featured content"> <div class="flex justify-between"> <div> <h2 class="mt-0 mb-6 leading-5 font-family-polysan-regular-median "> Code Courses </h2> </div> <div class="mr-6 mb-4 self-end hidden md:block"> <div class="text-center text-sm font-bold"> <a href="/t/courses" class="text-sm font-bold text-blue-600" data-action="click->home-page-analytics#logAnchorLinkClick">Browse All Courses</a> </div> </div> </div> <div class="hidden md:block" data-test-id="topic-featured-courses-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-3"> <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-react-18-the-complete-react-developer--cms-93008t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Learn React 18: The Complete React Developer Course" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/learn-react-18-the-complete-react-developer--cms-93008t"> </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 React 18: The Complete React Developer Course" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/769/posts/93008/preview_image/learn_react_18.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/93008/preview_image/learn_react_18.jpg" /> </div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median"> Learn React 18: The Complete React Developer Course </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 [&>a]:truncate [&>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">27 Sep 2022</time> </div> </footer> </article> </li> </div> </div> <div> <div class="mr-3"> <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/php-tutorial-for-beginners--cms-93000t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: PHP Tutorial for Beginners: Free 7-Hour Course " data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/php-tutorial-for-beginners--cms-93000t"> </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="PHP Tutorial for Beginners: Free 7-Hour Course " loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/93000/preview_image/PHP.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/93000/preview_image/PHP.jpg" /> </div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median"> PHP Tutorial for Beginners: Free 7-Hour Course </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 [&>a]:truncate [&>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: Jeremy McPeak" href="https://tutsplus.com/authors/jeremy-mcpeak"> Jeremy McPeak </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">15 Feb 2023</time> </div> </footer> </article> </li> </div> </div> <div> <div class="mr-3"> <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://code.tutsplus.com/javascript-fundamentals--CRS-200204c" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Course: Modern JavaScript Fundamentals" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/javascript-fundamentals--CRS-200204c"> </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="Modern JavaScript Fundamentals" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/71/courses/544/preview_image/js400.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/71/courses/544/preview_image/js400.jpg" /> </div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median"> Modern JavaScript Fundamentals </h3> <div class="font-normal text-grey-900 text-sm mt-1"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 [&>a]:truncate [&>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: Dan Wellman" href="https://tutsplus.com/authors/dan-wellman"> Dan Wellman </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">12 Dec 2019</time> </div> </footer> </article> </li> </div> </div> <div> <div class="mr-3"> <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/learn-modern-javascript-fundamentals-in-7-hours-free-course--ytc-24c" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="YoutubeCourse: Learn Modern JavaScript Fundamentals in 7 Hours: Free Course" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/learn-modern-javascript-fundamentals-in-7-hours-free-course--ytc-24c"> </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 Modern JavaScript Fundamentals in 7 Hours: Free Course" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/71/youtube_courses/24/preview_image/javascript_fundamentals.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/71/youtube_courses/24/preview_image/javascript_fundamentals.jpg" /> </div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-4 line-clamp-3 font-family-polysan-regular-median"> Learn Modern JavaScript Fundamentals in 7 Hours: Free Course </h3> <div class="font-normal text-grey-900 text-sm mt-1"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 [&>a]:truncate [&>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: Dan Wellman" href="https://tutsplus.com/authors/dan-wellman"> Dan Wellman </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">6 Jul 2023</time> </div> </footer> </article> </li> </div> </div> </div> </div> <div class="md:hidden" data-test-id="topic-featured-courses-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-react-18-the-complete-react-developer--cms-93008t" class="list-none " data-test-id="topic-featured-courses-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 React 18: The Complete React Developer Course" href="https://code.tutsplus.com/learn-react-18-the-complete-react-developer--cms-93008t"> </a> <div class="flex-none w-1/2"> <img class="flex object-contain w-full rounded-md aspect-1/1" alt="Learn React 18: The Complete React Developer Course" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/769/posts/93008/preview_image/learn_react_18.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/769/posts/93008/preview_image/learn_react_18.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 React 18: The Complete React Developer Course </h3> <div class="flex font-normal text-xs md:text-sm mt-4 !block [&>time]:block [&>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">27 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/php-tutorial-for-beginners--cms-93000t" class="list-none " data-test-id="topic-featured-courses-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: PHP Tutorial for Beginners: Free 7-Hour Course " href="https://code.tutsplus.com/php-tutorial-for-beginners--cms-93000t"> </a> <div class="flex-none w-1/2"> <img class="flex object-contain w-full rounded-md aspect-1/1" alt="PHP Tutorial for Beginners: Free 7-Hour Course " loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/93000/preview_image/PHP.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/2796/posts/93000/preview_image/PHP.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"> PHP Tutorial for Beginners: Free 7-Hour Course </h3> <div class="flex font-normal text-xs md:text-sm mt-4 !block [&>time]:block [&>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: Jeremy McPeak" href="https://tutsplus.com/authors/jeremy-mcpeak"> Jeremy McPeak </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">15 Feb 2023</time> </div> </div> </article> </li> <li data-explanation="" data-controller="post-card-tracking" data-index="2" data-type="featured" data-url="https://code.tutsplus.com/javascript-fundamentals--CRS-200204c" class="list-none free-course" data-test-id="topic-featured-courses-mobile-card" > <article class="flex mt-4 mb-4 relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Course: Modern JavaScript Fundamentals" href="https://code.tutsplus.com/javascript-fundamentals--CRS-200204c"> </a> <div class="flex-none w-1/2"> <img class="flex object-contain w-full rounded-md aspect-1/1" alt="Modern JavaScript Fundamentals" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/71/courses/544/preview_image/js400.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/71/courses/544/preview_image/js400.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"> Modern JavaScript Fundamentals </h3> <div class="flex font-normal text-xs md:text-sm mt-4 !block [&>time]:block [&>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: Dan Wellman" href="https://tutsplus.com/authors/dan-wellman"> Dan Wellman </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">12 Dec 2019</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/learn-modern-javascript-fundamentals-in-7-hours-free-course--ytc-24c" class="list-none " data-test-id="topic-featured-courses-mobile-card" > <article class="flex mt-4 mb-4 relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="YoutubeCourse: Learn Modern JavaScript Fundamentals in 7 Hours: Free Course" href="https://code.tutsplus.com/learn-modern-javascript-fundamentals-in-7-hours-free-course--ytc-24c"> </a> <div class="flex-none w-1/2"> <img class="flex object-contain w-full rounded-md aspect-1/1" alt="Learn Modern JavaScript Fundamentals in 7 Hours: Free Course" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/71/youtube_courses/24/preview_image/javascript_fundamentals.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=300/uploads/users/71/youtube_courses/24/preview_image/javascript_fundamentals.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 Modern JavaScript Fundamentals in 7 Hours: Free Course </h3> <div class="flex font-normal text-xs md:text-sm mt-4 !block [&>time]:block [&>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: Dan Wellman" href="https://tutsplus.com/authors/dan-wellman"> Dan Wellman </a> <span class="hidden md:inline text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500">6 Jul 2023</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-16 md:pb-16 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 Code 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/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/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/21-ridiculously-impressive-html5-canvas-experiments--net-14210a" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: 25 ridiculously impressive HTML5 canvas experiments" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/21-ridiculously-impressive-html5-canvas-experiments--net-14210a"> </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="25 ridiculously impressive HTML5 canvas experiments" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/9251/preview_image/canvas.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/9251/preview_image/canvas.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: HTML" href="https://webdesign.tutsplus.com/c/htmlcss/s/html"> HTML </a></div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median"> 25 ridiculously impressive HTML5 canvas experiments </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"> Looking to take your HTML5 animations to the next level? Get inspired by these 25 extremely cool examples of canvas in HTML5! </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: Abhin Sharma" href="https://tutsplus.com/authors/abhin-sharma"> <img src="//www.gravatar.com/avatar/cf0f793d0733e6fa53c2a3c5fe4df11a?s=200&d=https%3A%2F%2Fassets.tutsplus.com%2Fimages%2Fhub%2Favatar_default.png&r=PG" class="rounded-md" alt="Abhin Sharma" 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: Abhin Sharma" href="https://tutsplus.com/authors/abhin-sharma"> Abhin Sharma </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">24 Mar 2025</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/easy-slider-carousel-with-pure-css--cms-107626t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Easy CSS slider (carousel with pure CSS)" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/easy-slider-carousel-with-pure-css--cms-107626t"> </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="Easy CSS slider (carousel with pure CSS)" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/107626/preview_image/carousel_pre.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/107626/preview_image/carousel_pre.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: CSS" href="https://webdesign.tutsplus.com/c/htmlcss/s/css"> CSS </a></div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median"> Easy CSS slider (carousel with pure CSS) </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"> A carousel is a great example of a possible CSS-only interactive feature. In this tutorial, we’ll build a carousel with a few extra features using only CSS. </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: Jemima Abu" href="https://tutsplus.com/authors/jemima-abu"> <img src="https://cms-assets.tutsplus.com/uploads/users/2722/profiles/21247/profileImage/jemima_3.jpeg" class="rounded-md" alt="Jemima Abu" 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: Jemima Abu" href="https://tutsplus.com/authors/jemima-abu"> Jemima Abu </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">4 Mar 2025</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/currency-converter-with-html-css-and-vanilla-javascript--cms-108362t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Create a currency converter with HTML, CSS, and vanilla JavaScript" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/currency-converter-with-html-css-and-vanilla-javascript--cms-108362t"> </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 currency converter with HTML, CSS, and vanilla JavaScript" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/108362/preview_image/currency_converter.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/108362/preview_image/currency_converter.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: JavaScript for Designers" href="https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers"> JavaScript for Designers </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 currency converter with HTML, CSS, and vanilla JavaScript </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"> Let’s create a currency converter using HTML, CSS, and vanilla JavaScript, with data from the Exchange Rate API. </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: Esther Vaati" href="https://tutsplus.com/authors/esther-kalei"> <img src="https://cms-assets.tutsplus.com/uploads/users/1885/profiles/20400/profileImage/Tn2cD3Wq_400x400.jpg" class="rounded-md" alt="Esther Vaati" 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: Esther Vaati" href="https://tutsplus.com/authors/esther-kalei"> Esther Vaati </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">23 Jan 2025</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/what-to-do-when-one-of-your-wordpress-plugins-gets-compromised--cms-109077a" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: What to do when one of your WordPress plugins gets compromised" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/what-to-do-when-one-of-your-wordpress-plugins-gets-compromised--cms-109077a"> </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="What to do when one of your WordPress plugins gets compromised" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/109077/preview_image/wp_plugins.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/109077/preview_image/wp_plugins.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: WordPress Plugins" href="https://webdesign.tutsplus.com/c/wordpress/s/wordpress-plugins"> WordPress Plugins </a></div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median"> What to do when one of your WordPress plugins gets compromised </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"> A recent study from Patchstack found that 97% of detected WordPress security vulnerabilities came from WordPress plugins. Here’s what you need to know to... </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: Suzanne Scacca" href="https://tutsplus.com/authors/suzanne-scacca"> <img src="https://cms-assets.tutsplus.com/uploads/users/2779/profiles/21303/profileImage/Suzanne Scacca Headshot 400x400.JPG" class="rounded-md" alt="Suzanne Scacca" 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: Suzanne Scacca" href="https://tutsplus.com/authors/suzanne-scacca"> Suzanne Scacca </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">13 Jan 2025</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/how-to-build-horizontal-marquee-effects-with-gsap--cms-108794t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to build horizontal marquee effects with GSAP" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-build-horizontal-marquee-effects-with-gsap--cms-108794t"> </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 build horizontal marquee effects with GSAP" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/108794/preview_image/marquee.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/108794/preview_image/marquee.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"> How to build horizontal marquee effects with GSAP </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"> Let me show you how to create infinite marquees with the GSAP JavaScript animation library. This is a common UX pattern I’m sure you’ve seen on plenty of sites. </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: George Martsoukos" href="https://tutsplus.com/authors/george-martsoukos"> <img src="https://cms-assets.tutsplus.com/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" class="rounded-md" alt="George Martsoukos" 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: George Martsoukos" href="https://tutsplus.com/authors/george-martsoukos"> George Martsoukos </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">3 Jan 2025</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/python-send-email-api--cms-108845t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Send email in Python with the API method: A step-by-step guide" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/python-send-email-api--cms-108845t"> </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="Send email in Python with the API method: A step-by-step guide" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/108845/preview_image/email_python.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/108845/preview_image/email_python.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: Python" href="https://code.tutsplus.com/c/python"> Python </a></div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median"> Send email in Python with the API method: A step-by-step guide </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’ll learn the step-by-step process of sending emails in Python using the API method. </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: Veljko Ristić" href="https://tutsplus.com/authors/veljko-ristic"> <img src="https://cms-assets.tutsplus.com/uploads/users/30/profiles/21374/profileImage/mailtrap.jpg" class="rounded-md" alt="Veljko Ristić" 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: Veljko Ristić" href="https://tutsplus.com/authors/veljko-ristic"> Veljko Ristić </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">6 Sep 2024</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/how-to-clear-the-wordpress-cache--cms-34439t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to clear the WordPress cache" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-clear-the-wordpress-cache--cms-34439t"> </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 clear the WordPress cache" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/34439/preview_image/clear_cache.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/34439/preview_image/clear_cache.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: WordPress Plugins" href="https://webdesign.tutsplus.com/c/wordpress/s/wordpress-plugins"> WordPress Plugins </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 clear the WordPress cache </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"> Learn the 5 different methods for clearing the WordPress cache. These include clearing the browser cache, using a WordPress caching plugin, and more. </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: Suzanne Scacca" href="https://tutsplus.com/authors/suzanne-scacca"> <img src="https://cms-assets.tutsplus.com/uploads/users/2779/profiles/21303/profileImage/Suzanne Scacca Headshot 400x400.JPG" class="rounded-md" alt="Suzanne Scacca" 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: Suzanne Scacca" href="https://tutsplus.com/authors/suzanne-scacca"> Suzanne Scacca </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">13 Aug 2024</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/how-to-create-an-auto-text-typing-effect-with-vanilla-javascript--cms-108795t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to create an auto “text typing effect” with vanilla JavaScript" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-create-an-auto-text-typing-effect-with-vanilla-javascript--cms-108795t"> </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 create an auto “text typing effect” with vanilla JavaScript" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/108795/preview_image/network_engineer_typing.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/108795/preview_image/network_engineer_typing.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: JavaScript for Designers" href="https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers"> JavaScript for Designers </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 create an auto “text typing effect” with vanilla JavaScript </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"> An auto text typing effect is one way to grab a user’s attention. It can give users cues when using an application, and it’s also a way to convey an... </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: Esther Vaati" href="https://tutsplus.com/authors/esther-kalei"> <img src="https://cms-assets.tutsplus.com/uploads/users/1885/profiles/20400/profileImage/Tn2cD3Wq_400x400.jpg" class="rounded-md" alt="Esther Vaati" 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: Esther Vaati" href="https://tutsplus.com/authors/esther-kalei"> Esther Vaati </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">8 Aug 2024</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/how-to-create-a-pdf-viewer-in-javascript--cms-32505t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to create a JavaScript PDF viewer" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-create-a-pdf-viewer-in-javascript--cms-32505t"> </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 create a JavaScript PDF viewer" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/32505/preview_image/pdf_viewer.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/32505/preview_image/pdf_viewer.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: HTML" href="https://webdesign.tutsplus.com/c/htmlcss/s/html"> HTML </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 create a JavaScript PDF viewer </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"> Modern browsers can display PDF files, but they do so using a PDF viewer that runs in an independent tab or window, forcing users to leave your website. In... </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>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">2 Aug 2024</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/how-to-integrate-bootstrap-5-tabs-with-chartjs--cms-107864t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Integrate Bootstrap 5 Tabs With Chart.js" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-integrate-bootstrap-5-tabs-with-chartjs--cms-107864t"> </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 Integrate Bootstrap 5 Tabs With Chart.js" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/107864/preview_image/bootstrap_charts.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/107864/preview_image/bootstrap_charts.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: JavaScript for Designers" href="https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers"> JavaScript for Designers </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 Integrate Bootstrap 5 Tabs With Chart.js </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"> Today, you’ll learn how to incorporate charts generated by the Charts.js charting library into Bootstrap 5 tabs/pills. </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: George Martsoukos" href="https://tutsplus.com/authors/george-martsoukos"> <img src="https://cms-assets.tutsplus.com/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" class="rounded-md" alt="George Martsoukos" 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: George Martsoukos" href="https://tutsplus.com/authors/george-martsoukos"> George Martsoukos </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">31 Jan 2024</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/build-a-simple-youtube-app-with-vanilla-javascript--cms-93502t" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: Build a Simple YouTube App with Vanilla JavaScript" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/build-a-simple-youtube-app-with-vanilla-javascript--cms-93502t"> </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="Build a Simple YouTube App with Vanilla JavaScript" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/93502/preview_image/pre.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/93502/preview_image/pre.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: JavaScript for Designers" href="https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers"> JavaScript for Designers </a></div> <h3 class="font-semibold text-lg text-grey-1000 m-0 mt-1 line-clamp-3 font-family-polysan-regular-median"> Build a Simple YouTube App with Vanilla JavaScript </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"> We’re going to build a simple, yet fully functional YouTube app with Vanilla JavaScript: a simple UI where we can enter the ID of a channel and our app will... </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: George Martsoukos" href="https://tutsplus.com/authors/george-martsoukos"> <img src="https://cms-assets.tutsplus.com/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" class="rounded-md" alt="George Martsoukos" 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: George Martsoukos" href="https://tutsplus.com/authors/george-martsoukos"> George Martsoukos </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">9 Jan 2024</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/how-to-set-up-wordpress-error-logs-in-your-wp-config-file--cms-108117a" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: How to Set Up WordPress Error Logs In Your WP-Config File" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/how-to-set-up-wordpress-error-logs-in-your-wp-config-file--cms-108117a"> </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 Set Up WordPress Error Logs In Your WP-Config File" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/posts/108117/preview_image/error_logs.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/posts/108117/preview_image/error_logs.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: WordPress" href="https://code.tutsplus.com/c/wordpress"> WordPress </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 Set Up WordPress Error Logs In Your WP-Config File </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"> Have problems with random errors appearing on your WordPress website? Have you checked all your plugins and server settings and issues still persist? </p> </header> <footer> <div class="flex mt-4 [&>div>a]:!inline-block [&>div>a]:truncate [&>div>a]:max-w-[160px]"> <a class="flex z-[1] relative rounded-md" aria-label="Author: Daniel Strongin" href="https://tutsplus.com/authors/daniel-strongin"> <img src="https://cms-assets.tutsplus.com/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" class="rounded-md" alt="Daniel Strongin" 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: Daniel Strongin" href="https://tutsplus.com/authors/daniel-strongin"> Daniel Strongin </a> <span class="text-grey-500 ml-1 mr-1">•</span> <time class="text-grey-500 font-family-polysan-regular">24 Nov 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="?page=2">2</a><a class="pagination__button " aria-label="page 3" href="?page=3">3</a><span class="pagination__gap">…</span><a class="pagination__button " aria-label="page 49" href="?page=49">49</a><a class="pagination__button " aria-label="page 50" href="?page=50">50</a><a rel="next" class="pagination__button pagination__next-button" aria-label="next" href="?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 "> Popular 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->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->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: Mobile Development" data-action="click->facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/mobile-development"> <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">Mobile Development</div> </a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: PHP" data-action="click->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> </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->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->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: Mobile Development" data-action="click->facet-pills-component#linkClicked" href="https://code.tutsplus.com/c/mobile-development"> <div class="border border-solid border-gray-300 rounded-full px-4 py-2 hover:bg-gray-150">Mobile Development</div> </a><a class="text-clip text-current text-sm whitespace-nowrap rounded-full" aria-label="Category: PHP" data-action="click->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->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->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->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->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>  <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 sm:h-[20.5rem] md:!h-[18.75rem] bg-[#191919] flex space-x-4 justify-between mb-0 mx-auto"> <div class=" px-6 my-10 rounded-lg md:pl-16 md:mt-12 md:pr-8 flex-1 w-full"> <div class="text-4xl leading-9 mb-2 mt-0 text-white font-family-polysan-wide">Get in the know</div> <div class="text-base max-w-lg text-white email-setting-tease mb-6 md:mb-4 font-family-polysan-regular">Get ready to make your best work yet with tips, tricks, and offers straight to your inbox.</div> <div class="input-block flex flex-col md:flex-row max-w-[29.688rem]"> <input type="email" name="email" id="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 mb-2 md:mr-2 rounded" placeholder="Enter your email" required="required" /> <button name="button" type="submit" data-action="sign-up#sendData click->ga-analytics#sendSignUpEmailClickEvent" class="text-green-text-button text-base font-family-polysan-regular w-full h-12 md:w-[6.563rem] bg-interactive-green rounded border-none cursor-pointer hover:bg-lime-500">Sign up</button> </div> <div class="suffix w-full mt-3 text-[#707070] "> <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 class="background-image hidden lg:flex flex-1"> <img alt="Side image" class="w-full" src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/15/email_settings/topic_page/backgroundImage/637x300_v1__1x.png" /> </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 flex justify-center items-center bg-white pb-20 px-6 font-family-polysan-regular"> <a href="https://elements.envato.com/pricing" class="h-[343px] w-full lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] rounded-2xl overflow-hidden flex hover:cursor-default" data-action="click->ga-analytics#sendElementsClickEvent" > <div class="w-1/2 flex flex-col justify-center xsm:px-2 sm:px-8 md:px-16 lg:pr-48 gap-y-4 bg-[#9CEE69]"> <div class="text-3xl font-semibold text-black text-left">Let’s create something extraordinary</div> <div class="text-black hidden md:flex">Your one-stop creative asset destination</div> <div class="w-full flex justify-start"> <button class="bg-[#191919] text-white rounded-md xsm:px-1 xsm:py-0 sm:px-6 sm:py-2 hover:bg-gray-800 active:bg-gray-700 text-lg border-0 hover:cursor-pointer">Let’s create!</button> </div> </div> <div class="w-1/2"> <img class="w-full h-full object-cover" src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/2843/posts/109025/image-upload/Tuts_Homepage_Uplift_FooterBanner_645x343_v1_2_.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->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&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->ga-analytics#sendMarketClickEvent" href="https://themeforest.net?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&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->ga-analytics#sendPlaceitClickEvent" href="https://placeit.net?ec_unit=ecosystem_highlight&utm_campaign=placeit_mkt-footer&utm_content=tuts_global-footer&utm_medium=promos&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> & 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&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&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="page-footer view" data-analytics-context="footer" data-controller="page-footer"><div class="page-footer__content"><div class="page-footer__links-column"><div class="page-footer__section page-footer__section--first"><div class="page-footer__heading">Envato Tuts+</div><a class="page-footer__links-column-expansion-link" data-action="click->page-footer#toggleFooterSection" href="javascript:void(0);"><span class="page-footer__links-column-expansion-link-expand-text"><i class="fa fa-plus page-footer__links-column-link-icon"></i></span><span class="page-footer__links-column-expansion-link-collapse-text"><i class="fa fa-minus page-footer__links-column-link-icon"></i></span></a><div class="page-footer__item"><a class="page-footer__link" href="https://tutsplus.com/about">About Envato Tuts+</a></div><div class="page-footer__item"><a class="page-footer__link" href="https://tutsplus.com/terms-of-use">Terms of Use</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/privacy">Privacy</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/cookies/">Cookies</a></div><div class="page-footer__item"><a class="page-footer__link" data-action="click->page-footer#openCookieSettings" href="javascript:void(0);">Cookie Settings</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/privacy/#my-personal-information">Do not sell or share my personal information</a></div></div></div><div class="page-footer__links-column"><div class="page-footer__section page-footer__section--first"><div class="page-footer__heading">Help</div><a class="page-footer__links-column-expansion-link" data-action="click->page-footer#toggleFooterSection" href="javascript:void(0);"><span class="page-footer__links-column-expansion-link-expand-text"><i class="fa fa-plus page-footer__links-column-link-icon"></i></span><span class="page-footer__links-column-expansion-link-collapse-text"><i class="fa fa-minus page-footer__links-column-link-icon"></i></span></a><div class="page-footer__item"><a class="page-footer__link" href="https://help.elements.envato.com/hc/en-us/categories/360000070683">FAQ</a></div><div class="page-footer__item"><a class="page-footer__link" href="https://help.elements.envato.com">Help Center</a></div></div></div><div class="page-footer__links-column page-footer__links-last-column"><div class="page-footer__brands-wrapper"><div class="page-footer__tuts-brand"><img loading="lazy" alt="envato-tuts+" class="page-footer__tuts-logo-image tuts-logo" src="https://static.tutsplus.com/packs/static/images/tuts_logo-73b941f1418b55c886ac.svg" /><div class="page-footer__counts"><div class="page-footer__count-item"><div class="page-footer__count-value">22,978</div><div class="page-footer__count-label">Tutorials</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">552</div><div class="page-footer__count-label">Courses</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">17,964</div><div class="page-footer__count-label">Translations</div></div></div></div><div class="page-footer__bcorp-brand"><a class="page-footer__bcorp-brand-link" href="https://www.bcorporation.net/en-us/find-a-b-corp/company/envato" rel="noopener" target="_blank"><img alt="B Corp logo" loading="lazy" src="https://static.tutsplus.com/packs/static/images/bcorp-bfc565be3a93741fc88c.svg" /></a></div></div></div></div><div class="page-footer__envato-bar"><div class="page-footer__envato-bar-content"><div class="page-footer__envato-bar-content-left-column"><ul class="page-footer__envato-bar-links"><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com">Envato</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendMarketClickEvent" href="https://market.envato.com">Envato Market</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendPlaceitClickEvent" href="https://placeit.net/">Placeit by Envato</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/products/">All products</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/about/careers/">Careers</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/sitemap/">Sitemap</a></li></ul><div class="page-footer__copyright">© 2025 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.</div></div><div class="page-footer__envato-bar-content-right-column"><ul class="page-footer__follow-us"><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__youtube-link" href="https://www.youtube.com/@envatotuts"><img alt="Youtube" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_youtube-2fdd89edede4b116d099.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__instagram-link" href="https://www.instagram.com/envato/"><img alt="Instagram" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_instagram-f01c9d7dc71f1ea86182.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__tiktok-link" href="https://www.tiktok.com/@envato"><img alt="Tiktok" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_tiktok-57b06ff17a284d8a1744.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__facebook-link" href="https://www.facebook.com/envato/"><img alt="Facebook" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_facebook-f35494f677e855ad50dd.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__twitter-link" href="https://twitter.com/envato"><img alt="Twitter" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_twitter-98772a5169f3f29dd437.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__pinterest-link" href="https://www.pinterest.com.au/envato/"><img alt="Pinterest" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_pinterest-c768bee1968ceb51ae43.svg" /></a></li></ul></div></div></div></footer><script defer="defer" src="https://www.google-analytics.com/analytics.js"></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-3f74f88902b8cb9ca575.js" defer="defer"></script></body></html>