CINXE.COM

<!DOCTYPE html><html data-app-version="-production" lang="en"><head><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" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/951-fa7abab3c99e681f8324.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/766-8b3855d0505abca2d65c.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/125-8bac2cfbc87fa6771f10.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/697-38ad1287fcbab74f963d.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/home-063832998892458b8301.js" async="async" data-turbo-suppress-warning="" defer="defer"></script><link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/697-2b4a34c9.css" /> <link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/home-d291393f.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>Free Courses, Tutorials, Tips & Tricks with Envato Tuts+</title><link rel="canonical" href="https://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="Free Courses, Tutorials, Tips & Tricks with Envato Tuts+" property="og:title" /><meta content="Envato Tuts+" property="og:site_name" /><meta content="1494084460809023" property="fb:app_id" /> <meta property="og:description" name="description" content="Learn creative skills from leading industry experts with Envato Tuts+. Start your learning journey today!"> <meta property="og:type" content="website"> <meta property="og:url" content="https://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 home post__fullwidth-inarticle-ad-footer" data-analytics-context="body" data-controller="ga-analytics content-filters utm" data-ga-account="UA-11792865-37" 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: '17358', app_env: 'production', topic: '', page_type: 'home', 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="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://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="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='https://code.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'> Code </span> </a> </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%2Ftutsplus.com%2F">Sign In</a></turbo-frame></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://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" data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Envato</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" 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" rel="nofollow" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Ftutsplus.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 '> <a href='https://design.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Design</span> </a> </li> <li class='global-nav__header-item '> <a href='https://business.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Business</span> </a> </li> <li class='global-nav__header-item '> <a href='https://photography.tutsplus.com/photo' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Photo</span> </a> </li> <li class='global-nav__header-item '> <a href='https://photography.tutsplus.com/video' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Video</span> </a> </li> <li class='global-nav__header-item '> <a href='https://webdesign.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Web Design</span> </a> </li> <li class='global-nav__header-item '> <a href='https://code.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Code</span> </a> </li> <li class='global-nav__header-item '> <a href='https://music.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' 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://tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials..." class="global-nav__search-terms 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: 103px"></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 data-controller='home-page-analytics'> <div class="bg-grey-25 relative" data-block-name="Home Page Hero Block"> <div class="hero-image bg-hero-position-xsm bg-hero-size-xsm sm:bg-hero-position-sm sm:bg-hero-size-sm md:bg-hero-position-md md:bg-hero-size-md lg:bg-hero-position-lg lg:bg-hero-size-lg 2xl:bg-hero-position-2xl 2xl:bg-hero-size-2xl pt-8 pb-6 pl-4 pr-4 md:pl-6 md:pr-6 md:pt-24 md:pb-28 2xl:pb-28 lg:pl-0 lg:min-h-auto lg:pb-32 bg-no-repeat lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] mt-0 mr-auto mb-0 ml-auto" style="background-image: url('https://static.tutsplus.com/packs/static/images/home_hero_new-f73b1e74cb5af1737f62.png')"> <div class="md:mb-12 xsm:min-h-[480px] sm:min-h-[480px] md:min-h-fit"> <div> <h1 class="m-0 text-grey-700 font-bold md:pt-2.5 leading-12 md:leading-18 mb-4 text-4xl md:text-[3.375rem] lg:text-[3.5rem] lg:leading-normal lg:mb-0">Learn creative skills</h1> </div> <div> <h2 class="m-0 max-w-[290px] sm:max-w-[340px] md:max-w-[480px] 2xsm:leading-7 lg:leading-9 font-normal xsm:text-lg lg:text-2xl">Explore thousands of tutorials, tips and tricks from leading industry experts. <span class="relative"> Totally free. <div class="absolute lg:right-4 right-0 -bottom-6"> <svg width="90" height="13" viewBox="0 0 111 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 3.82339C52.1863 0.580862 39.868 0.606528 106.335 1.55985C107.498 1.57697 110.915 2.3054 109.768 2.60729C102.379 4.54817 94.8488 4.66428 87.4522 6.5196C82.3485 7.80048 77.3614 10.174 72.3166 12" stroke="#707070" stroke-width="2"/> </svg> </div> </span> </h2> </div> </div> <div class="absolute bottom-[5%] left-[6%] right-[6%] md:relative md:bottom-0 md:right-0 md:left-0"> <div class="relative" data-controller="global-search"> <form data-action="submit->home-page-analytics#logHeroBlockSearchEvent submit->global-search#perform_search" action="https://tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"> <button name="button" type="submit" class="fa-button absolute top-[0.7rem] left-4 text-gray-600 flex !mt-[5px]" aria-label="search"> <i class="fa fa-search"></i> </button> <input type="text" name="search[terms]" id="search_terms" data-action="keydown->global-search#keydown input->global-search#auto_suggestions focus->global-search#focus_in" placeholder="What do you want to learn today?" class="text-sm pl-12 w-full sm:max-w-[440px] md:w-[360px] lg:w-[380px] h-12 rounded-md border-solid border-px border-grey-100 focus:border-none" /> <div class="search__auto_suggestions_container home_hero" 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> </form> </div> </div> </div> </div> <div class="section-container">  <div name="" class="full-section bg-gradient-to-b from-white to-grey-25" style=""> <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-20 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-block-name='Home Page Large Card Featured Block' data-analytics-context-detail="start your learning journey"> <div class="mb-4"> <h2 class="text-[2rem] md:text-[2.5rem] font-bold mb-2 leading-10 mt-0">Start your learning journey</h2> <div class="lg:text-lg font-normal text-base max-w-[630px] text-grey-500">Explore free courses to learn fundamental techniques and concepts using industry-leading-software to drive your creative work and grow your career</div> </div> <div class="flex flex-wrap md:flex-nowrap"> <div class="md:sticky md:top-0 h-max md:basis-2/4 mt-6 mb-6 lg:-ml-2 md:mt-1 lg:mt-0 md:mb-0 md:mr-3 lg:mr-5"> <div class="card-view card-view__large max-w-[650px] lg:m-2 min-w-[300px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Graphic Design Basics" data-action="click->home-page-analytics#logAnchorLinkClick" data-alt-ga-text="Graphic Design Basics" href="https://design.tutsplus.com/graphic-design-basics--ytc-67c"> </a> <article> <header> <div class="relative flex"> <img class="object-cover rounded-md w-full h-auto" width="600px" height="auto" alt="Graphic Design Basics" loading="lazy" src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/2618/home_page_featured_blocks/large-card-block/item-list-card/graphic_design_basics_v2.png" /> <div class="mb-1 text-sm"> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span class="fa fa-fw fa-play-circle"></span> <span>01:03:05</span> </div> </div> </div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-lg mt-4 mb-1 lg:!mb-0"> Graphic Design Basics </h3> <div class="font-normal text-grey-700 text-sm "> <span>Course</span> <span>•</span> <span>Beginner</span> </div> <p class="text-sm leading-5 m-0 text-grey-500 mt-2"> So you want to be a graphic designer? Learn the fundamentals of design in this graphic design basics course. </p> </header> <footer> <div class="flex mt-4 "> <a class="flex z-[1] relative rounded-md" aria-label="Author: Laura Keung" href="https://tutsplus.com/authors/laura-keung"> <img src="https://cms-assets.tutsplus.com/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg" class="rounded-md" alt="Laura Keung" 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-700 block" aria-label="Author: Laura Keung" href="https://tutsplus.com/authors/laura-keung"> Laura Keung </a> </div> </footer> </article> </div> </div> <div class="max-w-1/2 lg:w-1/2"> <div data-test-id="" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Adobe Photoshop for Beginners" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Adobe Photoshop for Beginners" href="https://design.tutsplus.com/articles/photoshop-for-beginners--cms-93368"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="600px" aspect-ratio="16/9" alt="Adobe Photoshop for Beginners" loading="lazy" src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/2695/home_page_featured_blocks/large-card-block/item-list-card/photoshop_for_beginners_small.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span class="fa fa-fw fa-play-circle"></span> <span>03:06:48</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> Adobe Photoshop for Beginners </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Dan Scott" href="https://tutsplus.com/authors/daniel-walter-scott"> Dan Scott </a></div> </div> </div> </div> <div data-test-id="" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="The principles of design" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="The principles of design" href="https://design.tutsplus.com/articles/the-principles-of-design--cms-33962"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="The principles of design" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/33962/preview_image/Principles_of_Design.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/33962/preview_image/Principles_of_Design.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span class="fa fa-fw fa-play-circle"></span> <span>21:50</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> The principles of design </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Laura Keung" href="https://tutsplus.com/authors/laura-keung"> Laura Keung </a></div> </div> </div> </div> <div data-test-id="" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Adobe Illustrator for Beginners" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Adobe Illustrator for Beginners" href="https://design.tutsplus.com/articles/adobe-illustrator-for-beginners--cms-93489"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="Adobe Illustrator for Beginners" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2659/posts/93489/preview_image/AI_beginners_course_thumb.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2659/posts/93489/preview_image/AI_beginners_course_thumb.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span class="fa fa-fw fa-play-circle"></span> <span>03:17:02</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> Adobe Illustrator for Beginners </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Daniel Walter Scott" href="https://tutsplus.com/authors/daniel-walter-scott"> Daniel Walter Scott </a></div> </div> </div> </div> <div data-test-id="" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="After Effects for Beginners" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="After Effects for Beginners" href="https://photography.tutsplus.com/articles/after-effects-for-beginners--cms-93554"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="After Effects for Beginners" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/93554/preview_image/AfterEffects.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/93554/preview_image/AfterEffects.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span class="fa fa-fw fa-play-circle"></span> <span>08:13:29</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> After Effects for Beginners </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: David Bode" href="https://tutsplus.com/authors/david-bode"> David Bode </a></div> </div> </div> </div> <div data-test-id="" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Adobe InDesign for Beginners" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Adobe InDesign for Beginners" href="https://design.tutsplus.com/adobe-indesign-for-beginners--ytc-8c"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="Adobe InDesign for Beginners" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2801/youtube_courses/8/preview_image/InDesign.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2801/youtube_courses/8/preview_image/InDesign.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span class="fa fa-fw fa-play-circle"></span> <span>02:23:48</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> Adobe InDesign for Beginners </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Daniel Walter Scott" href="https://tutsplus.com/authors/daniel-walter-scott"> Daniel Walter Scott </a></div> </div> </div> </div> <div data-test-id="" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Web Design for Beginners" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Web Design for Beginners" href="https://webdesign.tutsplus.com/web-design-for-beginners--ytc-4c"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="Web Design for Beginners" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/48/youtube_courses/4/preview_image/wd_preview.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/48/youtube_courses/4/preview_image/wd_preview.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span class="fa fa-fw fa-play-circle"></span> <span>05:18:44</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> Web Design for Beginners </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Adi Purdila" href="https://tutsplus.com/authors/adi-purdila"> Adi Purdila </a></div> </div> </div> </div> <div data-test-id="" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Motion Design for the Web | FREE COURSE" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Motion Design for the Web | FREE COURSE" href="https://webdesign.tutsplus.com/motion-design-for-the-web-free-course--ytc-69c"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="Motion Design for the Web | FREE COURSE" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/30/youtube_courses/69/preview_image/web_motion_small.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/30/youtube_courses/69/preview_image/web_motion_small.png" /> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> Motion Design for the Web | FREE COURSE </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Course</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Adi Purdila" href="https://tutsplus.com/authors/adi-purdila"> Adi Purdila </a></div> </div> </div> </div> </div> </div> <div class="mt-12"> <div class="text-center text-sm font-bold"> <a href="https://tutsplus.com/t/courses" class="text-sm lg:text-lg font-bold text-blue-600" data-action="click->home-page-analytics#logAnchorLinkClick">More courses <span class="fas fa-arrow-right ml-2"></a> </div> </div> </div> </div> </div> <div name="" class="full-section " style=""> <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-20 pb-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto"> <div class="author-section !col-span-full" data-block-name='Home Page Authors Block' data-analytics-context-detail="author section"> <h2 class="font-bold text-[32px] lg:text-[40px] text-grey-700 leading-10 m-0">Learn from global creative experts</h2> <div class="font-normal text-sm md:text-lg text-grey-500 pt-2 pb-8">Our experienced instructors have worked for companies like Apple, Ubisoft, Adobe, and other industry-leading creative brands.</div> <div class="grid gap-x-4 gap-y-10 grid-cols-2 md:hidden"> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Laura Keung" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Laura Keung" href="https://tutsplus.com/authors/laura-keung"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Laura Keung"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Laura Keung</span> <span class="font-normal text-sm md:text-lg text-grey-500">Brand and Editorial Designer</span> </a> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Ashlee Harrell" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Ashlee Harrell" href="https://tutsplus.com/authors/ashlee-harrell"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Ashlee Harrell"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Ashlee Harrell</span> <span class="font-normal text-sm md:text-lg text-grey-500">Graphic Designer</span> </a> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Daniel Walter Scott" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Daniel Walter Scott" href="https://tutsplus.com/authors/daniel-walter-scott"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/2796/profiles/20695/profileImage/dan_scott.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Daniel Walter Scott"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Daniel Walter Scott</span> <span class="font-normal text-sm md:text-lg text-grey-500">Adobe Master</span> </a> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Jemima Abu" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Jemima Abu" href="https://tutsplus.com/authors/jemima-abu"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/2722/profiles/21247/profileImage/jemima_3.jpeg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Jemima Abu"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Jemima Abu</span> <span class="font-normal text-sm md:text-lg text-grey-500">Front-End Developer</span> </a> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Adi Purdila" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Adi Purdila" href="https://tutsplus.com/authors/adi-purdila"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/30/profiles/265/profileImage/adi.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Adi Purdila"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Adi Purdila</span> <span class="font-normal text-sm md:text-lg text-grey-500">Web Designer</span> </a> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: David Bode" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="David Bode" href="https://tutsplus.com/authors/david-bode"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/392/profiles/1802/profileImage/dave-bode.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of David Bode"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">David Bode</span> <span class="font-normal text-sm md:text-lg text-grey-500">Videographer</span> </a> </div> <div class="hidden md:block"> <div data-controller='card-carousel' data-cards-sm="0" data-cards-lsm="0" data-cards-md="2" data-cards-lmd="3" data-cards-lg="4" data-cards-mxl="4" data-cards-xl="4" data-cards-default="5" > <div> <div class="mr-3"> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Laura Keung" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Laura Keung" href="https://tutsplus.com/authors/laura-keung"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Laura Keung"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Laura Keung</span> <span class="font-normal text-sm md:text-lg text-grey-500">Brand and Editorial Designer</span> </a> </div> </div> <div> <div class="mr-3"> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Ashlee Harrell" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Ashlee Harrell" href="https://tutsplus.com/authors/ashlee-harrell"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Ashlee Harrell"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Ashlee Harrell</span> <span class="font-normal text-sm md:text-lg text-grey-500">Graphic Designer</span> </a> </div> </div> <div> <div class="mr-3"> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Daniel Walter Scott" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Daniel Walter Scott" href="https://tutsplus.com/authors/daniel-walter-scott"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/2796/profiles/20695/profileImage/dan_scott.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Daniel Walter Scott"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Daniel Walter Scott</span> <span class="font-normal text-sm md:text-lg text-grey-500">Adobe Master</span> </a> </div> </div> <div> <div class="mr-3"> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Jemima Abu" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Jemima Abu" href="https://tutsplus.com/authors/jemima-abu"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/2722/profiles/21247/profileImage/jemima_3.jpeg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Jemima Abu"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Jemima Abu</span> <span class="font-normal text-sm md:text-lg text-grey-500">Front-End Developer</span> </a> </div> </div> <div> <div class="mr-3"> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: Adi Purdila" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Adi Purdila" href="https://tutsplus.com/authors/adi-purdila"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/30/profiles/265/profileImage/adi.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of Adi Purdila"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">Adi Purdila</span> <span class="font-normal text-sm md:text-lg text-grey-500">Web Designer</span> </a> </div> </div> <div> <div class="mr-3"> <a class="flex flex-col max-w-[240px] rounded-md" id="author-card" aria-label="Author: David Bode" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="David Bode" href="https://tutsplus.com/authors/david-bode"> <div><img src="https://cms-assets.tutsplus.com/uploads/users/392/profiles/1802/profileImage/dave-bode.jpg" class="rounded-md max-w-[240px] w-full" loading="lazy" alt="Profile image of David Bode"></div> <span class="pt-4 font-bold text-grey-1000 text-lg">David Bode</span> <span class="font-normal text-sm md:text-lg text-grey-500">Videographer</span> </a> </div> </div> </div> </div> </div> </div> </div> <div name="" class="full-section bg-grey-25" style=""> <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-20 pb-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto"> <div class="mb-8" data-block-name='Home Page Choose A Tutorial Block' data-analytics-context-detail="choose a tutorial"> <h2 class="text-[2rem] lg:text-[2.5rem] font-bold mb-2 mt-0 leading-10 text-grey-700"> Choose a tutorial that's right for you </h2> <div class="flex justify-between mb-8"> <div class="lg:text-lg font-normal text-base text-grey-500 md:max-w-[460px] lg:max-w-[630px] 2xl:max-w-[720px]"> Develop your skills and stay ahead of trends with <strong>over 15,000</strong> tutorials. </div> <div class="mr-6 hidden md:block"> <div class="text-center text-sm font-bold"> <a href="https://tutsplus.com/t/tutorials" class="text-sm lg:text-lg font-bold text-blue-600" data-action="click->home-page-analytics#logAnchorLinkClick">More Tutorials <span class="fas fa-arrow-right ml-2"></a> </div> </div> </div> <div class="hidden md:block" data-test-id="choose-a-tutorial-section"> <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://design.tutsplus.com/articles/what-fonts-are-trending-now-and-font-trends-for-2024--cms-107902" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: What Fonts Are Trending Now and Font Trends for 2024" data-action="click->post-card-tracking#onClick" href="https://design.tutsplus.com/articles/what-fonts-are-trending-now-and-font-trends-for-2024--cms-107902"> </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 Fonts Are Trending Now and Font Trends for 2024" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/114/posts/107902/preview_image/Preview.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/114/posts/107902/preview_image/Preview.jpg" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>25 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Design Trends" href="https://design.tutsplus.com/c/theory/s/design-trends"> Design Trends </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> What Fonts Are Trending Now and Font Trends for 2024 </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Grace Fussell" href="https://tutsplus.com/authors/grace-fussell"> Grace Fussell </a></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://business.tutsplus.com/articles/37-effective-powerpoint-presentation-tips--cms-25421" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: 60 Effective PowerPoint Presentation Tips & Tricks (Giant List)" data-action="click->post-card-tracking#onClick" href="https://business.tutsplus.com/articles/37-effective-powerpoint-presentation-tips--cms-25421"> </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="60 Effective PowerPoint Presentation Tips & Tricks (Giant List)" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/25421/preview_image/Presentation.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/25421/preview_image/Presentation.jpg" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>35 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Communication" href="https://business.tutsplus.com/c/management/s/communication"> Communication </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> 60 Effective PowerPoint Presentation Tips & Tricks (Giant List) </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Brad Smith" href="https://tutsplus.com/authors/brad-smith"> Brad Smith </a></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://webdesign.tutsplus.com/a-beginners-guide-to-wireframing--webdesign-7399a" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: A Beginner’s Guide to Wireframing" data-action="click->post-card-tracking#onClick" href="https://webdesign.tutsplus.com/a-beginners-guide-to-wireframing--webdesign-7399a"> </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="A Beginner’s Guide to Wireframing" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/9203/preview_image/Wireframe.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/9203/preview_image/Wireframe.png" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>14 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Wireframing" href="https://webdesign.tutsplus.com/c/uxui/s/wireframing"> Wireframing </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> A Beginner’s Guide to Wireframing </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Winnie Lim" href="https://tutsplus.com/authors/winnie-lim"> Winnie Lim </a></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://photography.tutsplus.com/tutorials/premiere-pro-beginners-tour--cms-39955" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Find Your Way Around in Premiere Pro, a Tour for Beginners" data-action="click->post-card-tracking#onClick" href="https://photography.tutsplus.com/tutorials/premiere-pro-beginners-tour--cms-39955"> </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 Find Your Way Around in Premiere Pro, a Tour for Beginners" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/39955/preview_image/Premier_Pro_Intro.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/39955/preview_image/Premier_Pro_Intro.jpg" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>6 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Templates & Presets" href="https://photography.tutsplus.com/video/c/templates-presets"> Templates & Presets </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> How to Find Your Way Around in Premiere Pro, a Tour for Beginners </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Nona Blackman" href="https://tutsplus.com/authors/nona-blackman"> Nona Blackman </a></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="4" data-type="featured" data-url="https://photography.tutsplus.com/tutorials/how-to-install-transitions-premiere-pro--cms-36594" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Install Transitions in Premiere Pro" data-action="click->post-card-tracking#onClick" href="https://photography.tutsplus.com/tutorials/how-to-install-transitions-premiere-pro--cms-36594"> </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 Install Transitions in Premiere Pro" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/36594/preview_image/Premier_Pro_Trans2.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/36594/preview_image/Premier_Pro_Trans2.jpg" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>4 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Transitions" href="https://photography.tutsplus.com/video/c/templates-presets/s/transitions"> Transitions </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> How to Install Transitions in Premiere Pro </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Marie Gardiner" href="https://tutsplus.com/authors/marie-gardiner"> Marie Gardiner </a></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="5" data-type="featured" data-url="https://design.tutsplus.com/tutorials/sketch-photoshop-effect--cms-27461" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Create a Sketch Effect Action in Adobe Photoshop" data-action="click->post-card-tracking#onClick" href="https://design.tutsplus.com/tutorials/sketch-photoshop-effect--cms-27461"> </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 Sketch Effect Action in Adobe Photoshop" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/27461/preview_image/Sketch_Effect.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/27461/preview_image/Sketch_Effect.jpg" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>12 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Photoshop Actions" href="https://design.tutsplus.com/c/add-ons/s/photoshop-actions"> Photoshop Actions </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> How to Create a Sketch Effect Action in Adobe Photoshop </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Marko Kožokar" href="https://tutsplus.com/authors/marko-kozokar"> Marko Kožokar </a></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="6" data-type="featured" data-url="https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: Build an HTML Email Template From Scratch" data-action="click->post-card-tracking#onClick" href="https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a"> </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 an HTML Email Template From Scratch" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/9386/preview_image/HTML_Email2.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/9386/preview_image/HTML_Email2.png" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>18 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Email Design" href="https://webdesign.tutsplus.com/c/email/s/email-design"> Email Design </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> Build an HTML Email Template From Scratch </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Nicole Merlin" href="https://tutsplus.com/authors/nicole-merlin"> Nicole Merlin </a></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="7" data-type="featured" data-url="https://business.tutsplus.com/tutorials/creative-presentation-ideas--cms-27281" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: 30 Creative Presentation Ideas That'll Inspire Audiences to Action in 2024 (+Video)" data-action="click->post-card-tracking#onClick" href="https://business.tutsplus.com/tutorials/creative-presentation-ideas--cms-27281"> </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="30 Creative Presentation Ideas That'll Inspire Audiences to Action in 2024 (+Video)" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2777/posts/27281/preview_image/preview_presentation_ideas_copy.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2777/posts/27281/preview_image/preview_presentation_ideas_copy.jpg" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>32 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Creativity" href="https://business.tutsplus.com/c/marketing/s/creativity"> Creativity </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> 30 Creative Presentation Ideas That'll Inspire Audiences to Action in 2024 (+Video) </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Julia Melymbrose" href="https://tutsplus.com/authors/julia-melymbrose"> Julia Melymbrose </a></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="8" data-type="featured" data-url="https://photography.tutsplus.com/tutorials/three-light-setup-for-portrait-photos--cms-41460" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Use a Three-Light Setup for Portrait Photos" data-action="click->post-card-tracking#onClick" href="https://photography.tutsplus.com/tutorials/three-light-setup-for-portrait-photos--cms-41460"> </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 a Three-Light Setup for Portrait Photos" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2764/posts/41460/preview_image/ThreeLights17.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2764/posts/41460/preview_image/ThreeLights17.jpg" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>9 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Category: Lighting" href="https://photography.tutsplus.com/photo/c/equipment/s/lighting"> Lighting </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> How to Use a Three-Light Setup for Portrait Photos </h3> </header> <footer> <div class="flex font-normal text-xs md:text-sm mt-4 "> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Jamie Evan" href="https://tutsplus.com/authors/jamie-kronick"> Jamie Evan </a></div> </footer> </article> </li> </div> </div> </div> </div> <div class="md:hidden" data-test-id="choose-a-tutorial-section-mobile"> <div class="space-y-1 max-w-1/2"> <div data-test-id="choose-a-tutorial-section-card" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: What Fonts Are Trending Now and Font Trends for 2024" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="What Fonts Are Trending Now and Font Trends for 2024" href="https://design.tutsplus.com/articles/what-fonts-are-trending-now-and-font-trends-for-2024--cms-107902"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="What Fonts Are Trending Now and Font Trends for 2024" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/114/posts/107902/preview_image/Preview.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/114/posts/107902/preview_image/Preview.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>25 min read</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> What Fonts Are Trending Now and Font Trends for 2024 </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Tutorial</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Grace Fussell" href="https://tutsplus.com/authors/grace-fussell"> Grace Fussell </a></div> </div> </div> </div> <div data-test-id="choose-a-tutorial-section-card" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: 60 Effective PowerPoint Presentation Tips & Tricks (Giant List)" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="60 Effective PowerPoint Presentation Tips & Tricks (Giant List)" href="https://business.tutsplus.com/articles/37-effective-powerpoint-presentation-tips--cms-25421"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="60 Effective PowerPoint Presentation Tips & Tricks (Giant List)" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/25421/preview_image/Presentation.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/25421/preview_image/Presentation.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>35 min read</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> 60 Effective PowerPoint Presentation Tips & Tricks (Giant List) </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Tutorial</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Brad Smith" href="https://tutsplus.com/authors/brad-smith"> Brad Smith </a></div> </div> </div> </div> <div data-test-id="choose-a-tutorial-section-card" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Article: A Beginner’s Guide to Wireframing" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="A Beginner’s Guide to Wireframing" href="https://webdesign.tutsplus.com/a-beginners-guide-to-wireframing--webdesign-7399a"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="A Beginner’s Guide to Wireframing" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/9203/preview_image/Wireframe.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/9203/preview_image/Wireframe.png" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>14 min read</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> A Beginner’s Guide to Wireframing </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Tutorial</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Winnie Lim" href="https://tutsplus.com/authors/winnie-lim"> Winnie Lim </a></div> </div> </div> </div> <div data-test-id="choose-a-tutorial-section-card" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Tutorial: How to Find Your Way Around in Premiere Pro, a Tour for Beginners" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="How to Find Your Way Around in Premiere Pro, a Tour for Beginners" href="https://photography.tutsplus.com/tutorials/premiere-pro-beginners-tour--cms-39955"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="How to Find Your Way Around in Premiere Pro, a Tour for Beginners" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/posts/39955/preview_image/Premier_Pro_Intro.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/posts/39955/preview_image/Premier_Pro_Intro.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>6 min read</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> How to Find Your Way Around in Premiere Pro, a Tour for Beginners </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Tutorial</span> <span>•</span> <span>Beginner</span> </div> <div class="flex font-normal text-xs md:text-sm mt-4 !mt-0 lg:!mt-2"> <a class="flex z-[1] relative text-grey-700 !inline-block mb-1 md:mb-0" aria-label="Author: Nona Blackman" href="https://tutsplus.com/authors/nona-blackman"> Nona Blackman </a></div> </div> </div> </div> </div> </div> <div class="mt-10 md:hidden"> <div class="text-center text-sm font-bold"> <a href="https://tutsplus.com/t/tutorials" class="text-sm lg:text-lg font-bold text-blue-600" data-action="click->home-page-analytics#logAnchorLinkClick">More Tutorials <span class="fas fa-arrow-right ml-2"></a> </div> </div> </div> </div> </div>  <div name="" class="full-section " style=""> <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-20 pb-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto"> <div class="relative" data-block-name='Home Page Popular Topic / Categories Block' data-analytics-context-detail="popular topics"> <div class="h-full"> <h2 class="text-[2rem] lg:text-[2.5rem] font-bold mb-8 mt-0 leading-10">Explore our most popular categories</h2> <div class="hidden lg:block"> <div data-controller='card-carousel' data-cards-sm="0" data-cards-lsm="0" data-cards-md="2" data-cards-lmd="3" data-cards-lg="4" data-cards-mxl="4" data-cards-xl="4" data-cards-default="5" > <div> <div class="mr-3"> <a class="rounded-md" aria-label="Topic: Design & Illustration" data-alt-ga-text="design" data-action="click->home-page-analytics#logThumbnailLinkClick" href="https://design.tutsplus.com"> <div class="group relative text-design"> <div class="rounded-md"> <div class="relative -z-10 w-full h-60 rounded-md bg-cover bg-no-repeat" style="background-image: url('https://static.tutsplus.com/packs/static/images/home/topics/design-3aade4d3039115950a78.png')"> </div> </div> <div class="group-hover:hidden absolute font-bold text-lg bottom-2 left-4"> Design & Illustration </div> <div class="hidden group-hover:block absolute bottom-2 left-4 pr-4"> <div class="font-bold text-lg"> Design & Illustration <i class="fa fa-arrow-right"></i> </div> <div class="text-sm font-normal"> Design, draw, paint, sketch, and color your next graphic project. </div> </div> </div> </a> <div class="mt-4 w-60"> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://design.tutsplus.com/compatible-with/adobe-photoshop" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Adobe Photoshop </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://design.tutsplus.com/c/graphic-design" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Graphic Design </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://design.tutsplus.com/c/drawingillustration/s/illustration" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Illustration </a> </div> </div> </div> </div> <div> <div class="mr-3"> <a class="rounded-md" aria-label="Topic: Business" data-alt-ga-text="business" data-action="click->home-page-analytics#logThumbnailLinkClick" href="https://business.tutsplus.com"> <div class="group relative text-business"> <div class="rounded-md"> <div class="relative -z-10 w-full h-60 rounded-md bg-cover bg-no-repeat" style="background-image: url('https://static.tutsplus.com/packs/static/images/home/topics/business-14e3164bcb2087c4d6fe.png')"> </div> </div> <div class="group-hover:hidden absolute font-bold text-lg bottom-2 left-4"> Business </div> <div class="hidden group-hover:block absolute bottom-2 left-4 pr-4"> <div class="font-bold text-lg"> Business <i class="fa fa-arrow-right"></i> </div> <div class="text-sm font-normal"> Practical guides to launch and grow your business. </div> </div> </div> </a> <div class="mt-4 w-60"> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://business.tutsplus.com/c/presentations" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Presentations </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://business.tutsplus.com/c/marketing" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Marketing </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://business.tutsplus.com/c/management" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Management </a> </div> </div> </div> </div> <div> <div class="mr-3"> <a class="rounded-md" aria-label="Topic: Photo" data-alt-ga-text="photo" data-action="click->home-page-analytics#logThumbnailLinkClick" href="https://photography.tutsplus.com/photo"> <div class="group relative text-photo"> <div class="rounded-md"> <div class="relative -z-10 w-full h-60 rounded-md bg-cover bg-no-repeat" style="background-image: url('https://static.tutsplus.com/packs/static/images/home/topics/photo-efb019819a3f6e8b6663.png')"> </div> </div> <div class="group-hover:hidden absolute font-bold text-lg bottom-2 left-4"> Photo </div> <div class="hidden group-hover:block absolute bottom-2 left-4 pr-4"> <div class="font-bold text-lg"> Photo <i class="fa fa-arrow-right"></i> </div> <div class="text-sm font-normal"> Capture the perfect moment with techniques and insights from photography professionals. </div> </div> </div> </a> <div class="mt-4 w-60"> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/photo/c/equipment" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Equipment </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/photo/c/editing-post-processing" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Editing & Post-Processing </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/photo/c/types-of-photography" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Types of Photography </a> </div> </div> </div> </div> <div> <div class="mr-3"> <a class="rounded-md" aria-label="Topic: Video" data-alt-ga-text="video" data-action="click->home-page-analytics#logThumbnailLinkClick" href="https://photography.tutsplus.com/video"> <div class="group relative text-video"> <div class="rounded-md"> <div class="relative -z-10 w-full h-60 rounded-md bg-cover bg-no-repeat" style="background-image: url('https://static.tutsplus.com/packs/static/images/home/topics/video-ecdee6c13e277b28a704.png')"> </div> </div> <div class="group-hover:hidden absolute font-bold text-lg bottom-2 left-4"> Video </div> <div class="hidden group-hover:block absolute bottom-2 left-4 pr-4"> <div class="font-bold text-lg"> Video <i class="fa fa-arrow-right"></i> </div> <div class="text-sm font-normal"> Create and edit stunning videos with guides to filming, editing, and producing engaging content. </div> </div> </div> </a> <div class="mt-4 w-60"> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/video/c/equipment" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Equipment </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/video/c/post-production" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Post-Production </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/video/c/templates-presets" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Templates & Presets </a> </div> </div> </div> </div> <div> <div class="mr-3"> <a class="rounded-md" aria-label="Topic: Web Design" data-alt-ga-text="webdesign" data-action="click->home-page-analytics#logThumbnailLinkClick" href="https://webdesign.tutsplus.com"> <div class="group relative text-webdesign"> <div class="rounded-md"> <div class="relative -z-10 w-full h-60 rounded-md bg-cover bg-no-repeat" style="background-image: url('https://static.tutsplus.com/packs/static/images/home/topics/webdesign-9a802203de7003cfd6a7.png')"> </div> </div> <div class="group-hover:hidden absolute font-bold text-lg bottom-2 left-4"> Web Design </div> <div class="hidden group-hover:block absolute bottom-2 left-4 pr-4"> <div class="font-bold text-lg"> Web Design <i class="fa fa-arrow-right"></i> </div> <div class="text-sm font-normal"> Create beautiful, modern websites with step-by-step guides. </div> </div> </div> </a> <div class="mt-4 w-60"> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://webdesign.tutsplus.com/c/wordpress" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> WordPress </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://webdesign.tutsplus.com/c/htmlcss" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> HTML & CSS </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://webdesign.tutsplus.com/c/uxui/s/ux-design" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> UX / UI Design </a> </div> </div> </div> </div> <div> <div class="mr-3"> <a class="rounded-md" aria-label="Topic: Code" data-alt-ga-text="code" data-action="click->home-page-analytics#logThumbnailLinkClick" href="https://code.tutsplus.com"> <div class="group relative text-code"> <div class="rounded-md"> <div class="relative -z-10 w-full h-60 rounded-md bg-cover bg-no-repeat" style="background-image: url('https://static.tutsplus.com/packs/static/images/home/topics/code-714d86c09d728456acdc.png')"> </div> </div> <div class="group-hover:hidden absolute font-bold text-lg bottom-2 left-4"> Code </div> <div class="hidden group-hover:block absolute bottom-2 left-4 pr-4"> <div class="font-bold text-lg"> Code <i class="fa fa-arrow-right"></i> </div> <div class="text-sm font-normal"> Develop websites and apps with the latest programming skills. </div> </div> </div> </a> <div class="mt-4 w-60"> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://code.tutsplus.com/c/javascript" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> JavaScript </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://code.tutsplus.com/c/mobile-development" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Mobile Development </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://code.tutsplus.com/c/php" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> PHP </a> </div> </div> </div> </div> </div> </div> <div class="lg:hidden"> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://design.tutsplus.com" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Design & Illustration </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://business.tutsplus.com" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Business </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/photo" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Photo </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/video" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Video </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://webdesign.tutsplus.com" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Web Design </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://code.tutsplus.com" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Code </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://design.tutsplus.com/compatible-with/adobe-photoshop" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Adobe Photoshop </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://code.tutsplus.com/c/javascript" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> JavaScript </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://webdesign.tutsplus.com/c/wordpress" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> WordPress </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/photo/c/equipment" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Equipment </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/video/c/equipment" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Equipment </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://business.tutsplus.com/c/presentations" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Presentations </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://design.tutsplus.com/c/graphic-design" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Graphic Design </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://code.tutsplus.com/c/mobile-development" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Mobile Development </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://webdesign.tutsplus.com/c/htmlcss" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> HTML & CSS </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/photo/c/editing-post-processing" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Editing & Post-Processing </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://photography.tutsplus.com/video/c/post-production" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Post-Production </a> </div> <div class="inline-block lg:block mr-[3px] mb-[3px] lg:mr-0"> <a href="https://business.tutsplus.com/c/marketing" class="inline-block px-4 py-2 mb-1 text-sm border-solid border-gray-200 rounded-full text-grey-700" data-action='click->home-page-analytics#logAnchorLinkClick'> Marketing </a> </div> </div> </div> </div> </div> </div>  <div name="" class="full-section bg-grey-25" style=""> <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-20 pb-20 pl-4 pr-4 md:pl-6 md:pr-6 lg:pl-0 lg:pr-0 mt-0 mb-0 ml-auto mr-auto"> <div class="mb-8" data-block-name='Home Page Not Sure Where To Start Block' data-analytics-context-detail="not sure where to start"> <h2 class="text-[2rem] lg:text-[2.5rem] font-bold mb-2 mt-0 leading-10 text-grey-700"> Not sure where to start? </h2> <div class="flex justify-between mb-8"> <div class="lg:text-lg font-normal text-base text-grey-500 md:max-w-[460px] lg:max-w-[630px] 2xl:max-w-[720px]"> Choose a topic you want to learn, and let us guide you to all the best resources. </div> <div class="mr-6 hidden md:block"> <div class="text-center text-sm font-bold"> <a href="/series" class="text-sm lg:text-lg font-bold text-blue-600" data-action="click->home-page-analytics#logAnchorLinkClick">More Learning Guides <span class="fas fa-arrow-right ml-2"></a> </div> </div> </div> <div class="hidden md:block" data-test-id="not-sure-where-to-start-section"> <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://business.tutsplus.com/series/how-to-make-great-pitch-decks-startup-presentation-guide--cms-1309" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Syllabus: How to Make Great Pitch Decks (Startup Presentation Guide)" data-action="click->post-card-tracking#onClick" href="https://business.tutsplus.com/series/how-to-make-great-pitch-decks-startup-presentation-guide--cms-1309"> </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 Make Great Pitch Decks (Startup Presentation Guide)" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/syllabuses/1309/preview_image/PItch_decks.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/syllabuses/1309/preview_image/PItch_decks.png" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>1 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Topic: Business" href="https://business.tutsplus.com"> Business </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> How to Make Great Pitch Decks (Startup Presentation Guide) </h3> </header> <footer> </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://webdesign.tutsplus.com/series/--cms-1305" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Syllabus: The Designer’s Guide to Figma" data-action="click->post-card-tracking#onClick" href="https://webdesign.tutsplus.com/series/--cms-1305"> </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 Designer’s Guide to Figma" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/syllabuses/1305/preview_image/Figma1.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/syllabuses/1305/preview_image/Figma1.png" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>4 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Topic: Web Design" href="https://webdesign.tutsplus.com"> Web Design </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> The Designer’s Guide to Figma </h3> </header> <footer> </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/series/kotlin-from-scratch--cms-1209" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Syllabus: Kotlin From Scratch" data-action="click->post-card-tracking#onClick" href="https://code.tutsplus.com/series/kotlin-from-scratch--cms-1209"> </a> <article class="flex flex-col h-[auto]"> <header class="h-[auto]"> <div class="flex w-max h-fit mr-4 relative !w-full"> <img class="rounded-md min-w-[150px] h-auto !w-full md:max-w-[304px] aspect-[304/210.5]" width="304px" height="210.5px" alt="Kotlin From Scratch" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/syllabuses/1209/preview_image/Kotlin_from_scratch_black1.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/syllabuses/1209/preview_image/Kotlin_from_scratch_black1.png" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>1 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Topic: Code" href="https://code.tutsplus.com"> Code </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> Kotlin From Scratch </h3> </header> <footer> </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://design.tutsplus.com/series/learn-adobe-illustrator--cms-1110" > <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Syllabus: Learn Adobe Illustrator" data-action="click->post-card-tracking#onClick" href="https://design.tutsplus.com/series/learn-adobe-illustrator--cms-1110"> </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 Adobe Illustrator" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/syllabuses/1110/preview_image/Illustrator.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/syllabuses/1110/preview_image/Illustrator.jpg" /> <div class="absolute right-2 bottom-2 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>4 min read</span> </div> </div> <div> <a class="flex z-[1] relative font-bold mt-4 text-xs text-blue-600 uppercase !inline-block" aria-label="Topic: Design & Illustration" href="https://design.tutsplus.com"> Design & Illustration </a></div> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 mt-1 line-clamp-3"> Learn Adobe Illustrator </h3> </header> <footer> </footer> </article> </li> </div> </div> </div> </div> <div class="md:hidden" data-test-id="not-sure-where-to-start-section-mobile"> <div class="space-y-1 max-w-1/2"> <div data-test-id="not-sure-where-to-start-section-card" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Syllabus: How to Make Great Pitch Decks (Startup Presentation Guide)" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="How to Make Great Pitch Decks (Startup Presentation Guide)" href="https://business.tutsplus.com/series/how-to-make-great-pitch-decks-startup-presentation-guide--cms-1309"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="How to Make Great Pitch Decks (Startup Presentation Guide)" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/syllabuses/1309/preview_image/PItch_decks.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/syllabuses/1309/preview_image/PItch_decks.png" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>1 min read</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> How to Make Great Pitch Decks (Startup Presentation Guide) </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Tutorial</span> <span>•</span> <span>Beginner</span> </div> </div> </div> </div> <div data-test-id="not-sure-where-to-start-section-card" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Syllabus: The Designer’s Guide to Figma" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="The Designer’s Guide to Figma" href="https://webdesign.tutsplus.com/series/--cms-1305"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="The Designer’s Guide to Figma" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/syllabuses/1305/preview_image/Figma1.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/syllabuses/1305/preview_image/Figma1.png" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>4 min read</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> The Designer’s Guide to Figma </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Tutorial</span> <span>•</span> <span>Beginner</span> </div> </div> </div> </div> <div data-test-id="not-sure-where-to-start-section-card" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Syllabus: Kotlin From Scratch" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Kotlin From Scratch" href="https://code.tutsplus.com/series/kotlin-from-scratch--cms-1209"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="Kotlin From Scratch" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/syllabuses/1209/preview_image/Kotlin_from_scratch_black1.png 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/syllabuses/1209/preview_image/Kotlin_from_scratch_black1.png" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>1 min read</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> Kotlin From Scratch </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Tutorial</span> <span>•</span> <span>Beginner</span> </div> </div> </div> </div> <div data-test-id="not-sure-where-to-start-section-card" class="text-grey-700 mt-1 mb-1 lg:m-2 max-w-[340px] md:max-w-[450px] lg:max-w-[624px] relative"> <a class="flex z-[1] absolute w-full h-full rounded-md" aria-label="Syllabus: Learn Adobe Illustrator" data-action="click->home-page-analytics#logThumbnailLinkClick" data-alt-ga-text="Learn Adobe Illustrator" href="https://design.tutsplus.com/series/learn-adobe-illustrator--cms-1110"> </a> <div class="flex w-full"> <div class="flex w-max h-fit mr-4 relative "> <img class="rounded-md lg:max-w-[220px] min-w-[150px] max-w-[150px]" width="220px" aspect-ratio="16/9" alt="Learn Adobe Illustrator" loading="lazy" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1200/uploads/users/2796/syllabuses/1110/preview_image/Illustrator.jpg 2x" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/2796/syllabuses/1110/preview_image/Illustrator.jpg" /> <div class="absolute right-2 bottom-4 text-xs rounded-md pl-2 pr-2 pt-1 pb-1 text-white bg-black"> <span>4 min read</span> </div> </div> <div class="flex flex-col w-7/12"> <h3 class="font-bold text-lg text-grey-700 leading-6 m-0 !text-sm lg:!text-18 !mb-2 lg:!mb-0 line-clamp-3"> Learn Adobe Illustrator </h3> <div class="font-normal text-grey-700 text-sm hidden lg:block"> <span>Tutorial</span> <span>•</span> <span>Beginner</span> </div> </div> </div> </div> </div> </div> <div class="mt-10 md:hidden"> <div class="text-center text-sm font-bold"> <a href="/series" class="text-sm lg:text-lg font-bold text-blue-600" data-action="click->home-page-analytics#logAnchorLinkClick">More Learning Guides <span class="fas fa-arrow-right ml-2"></a> </div> </div> </div> </div> </div>  <div name="" class="full-section " style=""> <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-20 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="testimonial-component" class="relative" data-analytics-context-detail="testimonial"> <h2 class="text-[2rem] md:text-[2.5rem] font-bold mb-8 mt-0 leading-10 text-center lg:mb-15">What the community is saying</h2> <div class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4 overflow-hidden max-h-[33rem] lg:max-h-max" data-testimonial-component-target="grid"> <ul class="space-y-4 p-0 m-0 list-none"> <li class="p-5 bg-grey-25 rounded-md"> <div class="flex mb-4"> <img class="rounded-full w-10 h-10" alt="Zoe A" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/testimonials/Zoe-bfee5d136b5722dd6f2a.jpg" /> <div class="text-xs md:text-sm flex ml-4 -mt-1 w-max flex-col leading-5"> <span class="text-grey-700 text-lg font-bold">Zoe A</span> <span> <a class="text-blue-600 text-sm" href="https://design.tutsplus.com/articles/photoshop-for-beginners--cms-93368">Photoshop for Beginners</a> </span> </div> </div> <div> <div class="text-sm md:text-lg">Hello Dan, I wanted to let you know that in 3 hours you have taught me more about Photoshop than I learned at my 4-year design school. Thank you so much for this tutorial!</div> </div> </li> <li class="p-5 bg-grey-25 rounded-md"> <div class="flex mb-4"> <img class="rounded-full w-10 h-10" alt="Stefan Woldekidan" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/testimonials/Stefan-d9fa4401b6010d700138.jpg" /> <div class="text-xs md:text-sm flex ml-4 -mt-1 w-max flex-col leading-5"> <span class="text-grey-700 text-lg font-bold">Stefan Woldekidan</span> <span> <a class="text-blue-600 text-sm" href="https://webdesign.tutsplus.com/articles/introduction-to-figma-free-course--cms-93403">Introduction To Figma</a> </span> </div> </div> <div> <div class="text-sm md:text-lg">Amazing course! Thanks you for uploading and sharing your knowledge. Thanks to you the world is a better place.</div> </div> </li> <li class="p-5 bg-grey-25 rounded-md"> <div class="flex mb-4"> <img class="rounded-full w-10 h-10" alt="Passo King" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/testimonials/Passo-7c8e3d3a17cbcf143909.jpg" /> <div class="text-xs md:text-sm flex ml-4 -mt-1 w-max flex-col leading-5"> <span class="text-grey-700 text-lg font-bold">Passo King</span> <span> <a class="text-blue-600 text-sm" href="https://design.tutsplus.com/articles/photoshop-for-beginners--cms-93368">Photoshop for Beginners</a> </span> </div> </div> <div> <div class="text-sm md:text-lg">I love Envato Tuts+</div> </div> </li> </ul> <ul class="space-y-4 p-0 m-0 list-none"> <li class="p-5 bg-grey-25 rounded-md"> <div class="flex mb-4"> <img class="rounded-full w-10 h-10" alt="Ngozi Oluwafunmilayo Ukomadu" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/testimonials/Ngozi-3dedbb06a796559b8e07.jpg" /> <div class="text-xs md:text-sm flex ml-4 -mt-1 w-max flex-col leading-5"> <span class="text-grey-700 text-lg font-bold">Ngozi Oluwafunmilayo Ukomadu</span> <span> <a class="text-blue-600 text-sm" href="https://design.tutsplus.com/courses/from-the-top-adobe-illustrator-for-beginners">Adobe Illustrator for Beginners</a> </span> </div> </div> <div> <div class="text-sm md:text-lg">This was an amazing course. I feel like Dan is my physical tutor as I learned a lot from this. Thank you for the effort you put into all your courses. Your teaching method is superb.</div> </div> </li> <li class="p-5 bg-grey-25 rounded-md"> <div class="flex mb-4"> <img class="rounded-full w-10 h-10" alt="Latha Krishnan" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/testimonials/Latha-cf7513ae047508c949b5.jpg" /> <div class="text-xs md:text-sm flex ml-4 -mt-1 w-max flex-col leading-5"> <span class="text-grey-700 text-lg font-bold">Latha Krishnan</span> <span> <a class="text-blue-600 text-sm" href="https://webdesign.tutsplus.com/courses/adobe-xd-for-beginners">Adobe XD for Beginners</a> </span> </div> </div> <div> <div class="text-sm md:text-lg">Brilliant tutorial. Very clearly explained use of all the features. Thanks so much. Please continue with such wonderful work!</div> </div> </li> <li class="p-5 bg-grey-25 rounded-md"> <div class="flex mb-4"> <img class="rounded-full w-10 h-10" alt="DJ Sohil" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/testimonials/DJSohil-628dded95adb74b25115.jpg" /> <div class="text-xs md:text-sm flex ml-4 -mt-1 w-max flex-col leading-5"> <span class="text-grey-700 text-lg font-bold">DJ Sohil</span> <span> <a class="text-blue-600 text-sm" href="https://design.tutsplus.com/courses/from-the-top-adobe-illustrator-for-beginners">Adobe Illustrator for Beginners</a> </span> </div> </div> <div> <div class="text-sm md:text-lg">Amazing! Thank you so much for making this video. I learnt a lot.</div> </div> </li> </ul> <ul class="space-y-4 p-0 m-0 list-none hidden 2xl:block"> <li class="p-5 bg-grey-25 rounded-md"> <div class="flex mb-4"> <img class="rounded-full w-10 h-10" alt="Emil von Schwartzenberg" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/testimonials/Emil-1c6f478536d688e0b48e.jpg" /> <div class="text-xs md:text-sm flex ml-4 -mt-1 w-max flex-col leading-5"> <span class="text-grey-700 text-lg font-bold">Emil von Schwartzenberg</span> <span> <a class="text-blue-600 text-sm" href="https://design.tutsplus.com/courses/mastering-logo-design-in-adobe-illustrator">Mastering Logo Design in Adobe Illustrator</a> </span> </div> </div> <div> <div class="text-sm md:text-lg">Thanks for landing me smoothly into illustrator and making me feel ready to use it. I'm a big Photoshop guy, but for animations and other things, it's so much better to use illustrator. Thank YOU!</div> </div> </li> <li class="p-5 bg-grey-25 rounded-md"> <div class="flex mb-4"> <img class="rounded-full w-10 h-10" alt="dggd" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/testimonials/dggd-130d4d3bcbb9363f37f0.jpg" /> <div class="text-xs md:text-sm flex ml-4 -mt-1 w-max flex-col leading-5"> <span class="text-grey-700 text-lg font-bold">dggd</span> <span> <a class="text-blue-600 text-sm" href="https://design.tutsplus.com/courses/how-to-design-a-book-cover">How to Design a Book Cover</a> </span> </div> </div> <div> <div class="text-sm md:text-lg">You are THE VERY BEST! Thank you for clarifying EVERYTHING I needed to know after struggling with cover setup issues. I’ve learned so much more about Indesign through you. Much appreciation for your THOROUGH instruction. 😊 ❤ </div> </div> </li> </ul> </div> <div data-testimonial-component-target="expandContainer" class="lg:hidden inset-x-0 bottom-0 flex justify-center bg-gradient-to-t from-white pt-32 pb-8 pointer-events-none absolute font-[system-ui]"> <button type="button" data-testimonial-component-target="expand" data-action="click->testimonial-component#onExpand" class="relative cursor-pointer bg-white text-sm text-grey-700 font-semibold h-12 px-6 rounded-md flex items-center pointer-events-auto border border-grey-100 border-solid">Show more</button> </div> </div> <a href='https://www.youtube.com/c/tutsplus' target='_blank' class='mt-20 block rounded-md' data-analytics-context-detail="youtube" data-analytics-click-label="join us on youtube" > <div class='bg-[#FFF2EF] rounded-md hidden 2xl:block bg-contain bg-no-repeat bg-right' style="background-image: url('https://static.tutsplus.com/packs/static/images/home/YT_Crop@2x-0d630374894061da26e5.png')"> <div class='w-7/12 px-16 py-24'> <h2 class='text-[2.5rem] font-bold mb-3 mt-0 leading-10 text-grey-1000'>Join Us on YouTube</h2> <div class='text-lg mb-10 leading-7 text-grey-1000'>Creative courses and tutorials. Subscribe for daily videos.</div> <div class='text-lg font-bold leading-6 text-[#C62E46]'> Envato Tuts+ on YouTube <i class="fa fa-arrow-right"></i> </div> </div> </div> <div class='bg-[#FFF2EF] rounded-md hidden 2xl:hidden md:block bg-contain bg-no-repeat bg-right yt-banner-image' style="background-image: url('https://static.tutsplus.com/packs/static/images/home/YT_tablet_crop@2x-145a7f1a9a3326783ee4.png')"> <div class='w-7/12 px-10 py-14 xl:px-14 xl:py-20'> <h2 class='text-[2rem] lg:text-[2.5rem] font-bold mb-2 mt-0 leading-10 text-grey-1000'>Join Us on YouTube</h2> <div class='text-lg mb-10 leading-7 text-grey-1000'>Creative courses and tutorials. Subscribe for daily videos.</div> <h3 class='text-lg m-0 font-bold leading-6 text-[#C62E46]'> Envato Tuts+ on YouTube <i class="fa fa-arrow-right"></i> </h3> </div> </div> <div class='bg-[#FFF2EF] rounded-md md:hidden'> <div class='px-6 py-10'> <h2 class='text-3xl font-bold mb-2 mt-0 leading-10 text-grey-1000'>Join Us on YouTube</h2> <div class='text-sm mb-10 leading-5 text-grey-1000'>Creative courses and tutorials. Subscribe for daily videos.</div> <h3 class='text-sm m-0 font-bold leading-6 text-[#C62E46]'> Envato Tuts+ on YouTube <i class="fa fa-arrow-right"></i> </h3> </div> <img class='rounded-bl-md rounded-br-md w-full -mb-2' src="https://static.tutsplus.com/packs/static/images/home/YT_mobile@2x-75eb36c5a936e42444d3.png" loading='lazy' alt=''> </div> </a> </div> </div> <div name="" class="full-section bg-grey-25" style=""> <div class="lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] pt-20 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-analytics-context-detail="envato products"> <h2 class="text-left md:text-center font-bold text-[2rem] lg:text-[2.5rem] leading-10 text-grey-700 mb-8 mt-0 lg:mb-14"> Get any creative project done with Envato </h2> <div class="flex flex-col md:hidden lg:flex lg:flex-row justify-center lg:[&>*]:ml-4 lg:[&>*:first-child]:ml-0 [&>*]:mb-8 [&>*:last-child]:!mb-0 md:[&>*]:!mb-0"> <a class="rounded-md flex" data-action="click->ga-analytics#sendElementsClickEvent" data-value="promo" href="https://elements.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"> <div class="bg-white rounded-md"> <div class="p-8"> <div class="uppercase font-bold text-xs text-grey-1000 md:h-4">Unlimited downloads</div> <div class="pt-4 pb-4"><img width="88" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/logos/envato_elements-f1c37c48d68b34fa96fc.png" /></div> <div class="font-normal text-lg text-grey-500 md:h-32 2xl:h-16">Enjoy millions of creative assets with the unlimited creative subscription</div> </div> <div class="mb-4 hidden md:block"><img style="aspect-ratio: 1.38" class="w-full" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/thumbnails/envato_elements-71747c6d57481d187cfd.png" /></div> </div> </a> <a class="rounded-md flex" data-action="click->ga-analytics#sendMarketClickEvent" data-value="promo" href="https://themeforest.net?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"> <div class="bg-white rounded-md"> <div class="p-8"> <div class="uppercase font-bold text-xs text-grey-1000 md:h-4">Buy as you go</div> <div class="pt-4 pb-4"><img width="130" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/logos/market-03bb94822b83b7b6c393.png" /></div> <div class="font-normal text-lg text-grey-500 md:h-32 2xl:h-16">Discover individual assets from the world's leading creative marketplace</div> </div> <div class="mb-4 hidden md:block"><img style="aspect-ratio: 1.38" class="w-full" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/thumbnails/market-e664313605ed66943b48.png" /></div> </div> </a> <a class="rounded-md flex" data-action="click->ga-analytics#sendPlaceitClickEvent" data-value="promo" href="https://placeit.net?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"> <div class="bg-white rounded-md"> <div class="p-8"> <div class="uppercase font-bold text-xs text-grey-1000 md:h-4">Diy Maker</div> <div class="pt-4 pb-4"><img width="130" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/logos/placeit-959faec5cdced625c237.png" /></div> <div class="font-normal text-lg text-grey-500 md:h-32 2xl:h-16">Create mockups, logos, social posts and videos in seconds</div> </div> <div class="mb-4 hidden md:block"><img style="aspect-ratio: 1.38" class="w-full" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/thumbnails/placeit-9ec1451ad2dd92eeb1dc.png" /></div> </div> </a> <a class="rounded-md flex" data-action="" data-value="promo" href="https://mixkit.co?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"> <div class="bg-white rounded-md"> <div class="p-8"> <div class="uppercase font-bold text-xs text-grey-1000 md:h-4">Free video & Audio</div> <div class="pt-4 pb-4"><img width="60" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/logos/mixkit-310682e927f9c55776f0.png" /></div> <div class="font-normal text-lg text-grey-500 md:h-32 2xl:h-16">Awesome video & audio files, all completely free</div> </div> <div class="mb-4 hidden md:block"><img style="aspect-ratio: 1.38" class="w-full" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/thumbnails/mixkit-fe050b51f10d8097bea4.png" /></div> </div> </a> </div> <div class="hidden md:flex lg:hidden flex-row justify-center md:[&>*]:ml-4 md:[&>*:first-child]:ml-0"> <a class="rounded-md flex" data-action="click->ga-analytics#sendElementsClickEvent" data-value="promo" href="https://elements.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"> <div class="bg-white rounded-md"> <div class="p-8"> <div class="uppercase font-bold text-xs text-grey-1000 md:h-4">Unlimited downloads</div> <div class="pt-4 pb-4"><img width="88" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/logos/envato_elements-f1c37c48d68b34fa96fc.png" /></div> <div class="font-normal text-lg text-grey-500 md:h-32 2xl:h-16">Enjoy millions of creative assets with the unlimited creative subscription</div> </div> <div class="mb-4 hidden md:block"><img style="aspect-ratio: 1.38" class="w-full" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/thumbnails/envato_elements-71747c6d57481d187cfd.png" /></div> </div> </a> <a class="rounded-md flex" data-action="click->ga-analytics#sendMarketClickEvent" data-value="promo" href="https://themeforest.net?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"> <div class="bg-white rounded-md"> <div class="p-8"> <div class="uppercase font-bold text-xs text-grey-1000 md:h-4">Buy as you go</div> <div class="pt-4 pb-4"><img width="130" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/logos/market-03bb94822b83b7b6c393.png" /></div> <div class="font-normal text-lg text-grey-500 md:h-32 2xl:h-16">Discover individual assets from the world's leading creative marketplace</div> </div> <div class="mb-4 hidden md:block"><img style="aspect-ratio: 1.38" class="w-full" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/thumbnails/market-e664313605ed66943b48.png" /></div> </div> </a> <a class="rounded-md flex" data-action="click->ga-analytics#sendPlaceitClickEvent" data-value="promo" href="https://placeit.net?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"> <div class="bg-white rounded-md"> <div class="p-8"> <div class="uppercase font-bold text-xs text-grey-1000 md:h-4">Diy Maker</div> <div class="pt-4 pb-4"><img width="130" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/logos/placeit-959faec5cdced625c237.png" /></div> <div class="font-normal text-lg text-grey-500 md:h-32 2xl:h-16">Create mockups, logos, social posts and videos in seconds</div> </div> <div class="mb-4 hidden md:block"><img style="aspect-ratio: 1.38" class="w-full" alt="" loading="lazy" src="https://static.tutsplus.com/packs/static/images/home/products/thumbnails/placeit-9ec1451ad2dd92eeb1dc.png" /></div> </div> </a> </div> </div> </div> </div> </div> </div> </main></div><div class="cta-toast-popup" data-analytics-context-detail="cta toast"><turbo-frame id="cta_toast_popup" src="/home/cta_toast"></turbo-frame></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">25,324</div><div class="page-footer__count-label">Tutorials</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">553</div><div class="page-footer__count-label">Courses</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">18,689</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">© 2024 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>