<!DOCTYPE html>
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
	<meta charset="UTF-8">
	<link rel="preload" href="https://www.campcodes.com/wp-content/uploads/2025/02/cropped-cropped-cropped-CCodes.png" as="image" type="image/png" fetchpriority="high" />
<link rel="dns-prefetch" href="//doubleclick.net" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Search Engine Optimization by Rank Math PRO - https://rankmath.com/ -->
<title>CampCodes | Source Code Projects, Tutorials &amp; Project Ideas</title>
<meta name="description" content="Browse source code projects, practical programming guides, and Android and Flutter examples. Find project ideas, screenshots, and help getting code running locally."/>
<meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/>
<link rel="canonical" href="https://www.campcodes.com/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="CampCodes | Source Code Projects, Tutorials &amp; Project Ideas" />
<meta property="og:description" content="Browse source code projects, practical programming guides, and Android and Flutter examples. Find project ideas, screenshots, and help getting code running locally." />
<meta property="og:url" content="https://www.campcodes.com/" />
<meta property="og:site_name" content="CampCodes" />
<meta property="og:updated_time" content="2026-10-19T21:36:35+08:00" />
<meta property="fb:app_id" content="287296355740312" />
<meta property="article:published_time" content="2025-02-22T13:48:18+08:00" />
<meta property="article:modified_time" content="2026-10-19T21:36:35+08:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="CampCodes | Source Code Projects, Tutorials &amp; Project Ideas" />
<meta name="twitter:description" content="Browse source code projects, practical programming guides, and Android and Flutter examples. Find project ideas, screenshots, and help getting code running locally." />
<meta name="twitter:site" content="@CampCodes" />
<meta name="twitter:creator" content="@CampCodes" />
<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="CampCodes Administrator" />
<meta name="twitter:label2" content="Time to read" />
<meta name="twitter:data2" content="Less than a minute" />
<script type="application/ld+json" class="rank-math-schema-pro">{"@context":"https://schema.org","@graph":[{"@type":["Person","Organization"],"@id":"https://www.campcodes.com/#person","name":"admin","sameAs":["https://www.facebook.com/bermzisware","https://twitter.com/CampCodes"],"logo":{"@type":"ImageObject","@id":"https://www.campcodes.com/#logo","url":"https://www.campcodes.com/wp-content/uploads/2025/02/cropped-cropped-cropped-CCodes-150x120.png","contentUrl":"https://www.campcodes.com/wp-content/uploads/2025/02/cropped-cropped-cropped-CCodes-150x120.png","caption":"CampCodes","inLanguage":"en-US"},"image":{"@type":"ImageObject","@id":"https://www.campcodes.com/#logo","url":"https://www.campcodes.com/wp-content/uploads/2025/02/cropped-cropped-cropped-CCodes-150x120.png","contentUrl":"https://www.campcodes.com/wp-content/uploads/2025/02/cropped-cropped-cropped-CCodes-150x120.png","caption":"CampCodes","inLanguage":"en-US"}},{"@type":"WebSite","@id":"https://www.campcodes.com/#website","url":"https://www.campcodes.com","name":"CampCodes","publisher":{"@id":"https://www.campcodes.com/#person"},"inLanguage":"en-US","potentialAction":{"@type":"SearchAction","target":"https://www.campcodes.com/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://www.campcodes.com/#webpage","url":"https://www.campcodes.com/","name":"CampCodes | Source Code Projects, Tutorials &amp; Project Ideas","datePublished":"2025-02-22T13:48:18+08:00","dateModified":"2026-10-19T21:36:35+08:00","about":{"@id":"https://www.campcodes.com/#person"},"isPartOf":{"@id":"https://www.campcodes.com/#website"},"inLanguage":"en-US"},{"@type":"Person","@id":"https://www.campcodes.com/#author","name":"CampCodes Administrator","description":"Ser Bermz is the owner of the website: www.campcodes.com. He is a Computer Engineer and currently working as a Professor. All of his projects and tutorials with source codes are a Free of Cost. Mobile Development: Android and iOS Languages: Java, Visual Basic.NET, C#.NET, PHP, Python Frameworks: CodeIgniter, Slim, Node.js, Bootstrap, HTML, XML, JSON, Kotlin, Swift Databases: MySQL, Microsoft SQL Server, MS Access, MongoDB, SQLite, Neo4j (Graph Database) Microprocessors: Arduino, Raspberry PI Web Server: Apache Version Control: Git Business Email: serbermz2020@gmail.com Share our Channel with your friends and don't forget to subscribe Ser Bermz, a Free Education Portal.","image":{"@type":"ImageObject","@id":"https://www.campcodes.com/wp-content/litespeed/avatar/9e0ff7bf51f2b43000db33ea3653ebb5.jpg?ver=1794216250","url":"https://www.campcodes.com/wp-content/litespeed/avatar/9e0ff7bf51f2b43000db33ea3653ebb5.jpg?ver=1794216250","caption":"CampCodes Administrator","inLanguage":"en-US"},"sameAs":["https://www.campcodes.com/"]},{"@type":"BlogPosting","headline":"CampCodes | Source Code Projects, Tutorials &amp; Project Ideas","datePublished":"2025-02-22T13:48:18+08:00","dateModified":"2026-10-19T21:36:35+08:00","author":{"@id":"https://www.campcodes.com/#author","name":"CampCodes Administrator","@type":"Person","url":"https://www.campcodes.com/author/admin/"},"publisher":{"@id":"https://www.campcodes.com/#person","@type":"Organization","logo":{"@type":"ImageObject","url":"https://www.campcodes.com/wp-content/uploads/2020/05/cropped-cc-2.png","width":"512","height":"512"}},"description":"Browse source code projects, practical programming guides, and Android and Flutter examples. Find project ideas, screenshots, and help getting code running locally.","name":"CampCodes | Source Code Projects, Tutorials &amp; Project Ideas","@id":"https://www.campcodes.com/#richSnippet","isPartOf":{"@id":"https://www.campcodes.com/#webpage"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://www.campcodes.com/#webpage"},"articleBody":"Explore source code projects, programming tutorials, and ideas for your next project. Browse PHP, Python, JavaScript, C#, VB.NET, Android, and Flutter resources.Choose your starting pointFollow a tutorial, study an existing system, or plan a small project of your own.Source code systemsExplore stock, school, inventory, reservation, and voting systems, including PHP/MySQL and Python/Django projects.Practical guidesTry complete examples for JavaScript Fetch, Python CSV processing, and PHP PDO with SQLite.Android and Flutter examplesBrowse mobile layouts, a quiz application, and a QR-code scanner. Check the SDK and dependency requirements for each project.Setup help and common questionsRead requirements and licenses, run projects locally, trace one feature, then make and test a small change. See the download and setup guide for a complete checklist."}]}</script>
<!-- /Rank Math WordPress SEO plugin -->

<link rel='dns-prefetch' href='//pagead2.googlesyndication.com' />
<link rel='dns-prefetch' href='//www.googletagmanager.com' />
<link rel='dns-prefetch' href='//www.google-analytics.com' />
<link rel='dns-prefetch' href='//cdnjs.cloudflare.com' />
<link rel='preconnect' href='https://pagead2.googlesyndication.com' />
<link rel="alternate" type="application/rss+xml" title="Campcodes &raquo; Feed" href="https://www.campcodes.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Campcodes &raquo; Comments Feed" href="https://www.campcodes.com/comments/feed/" />
<style id="wp-img-auto-sizes-contain-inline-css">
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
 
<style id="wp-block-library-inline-css">
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}

/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
</style>
<style id="classic-theme-styles-inline-css">
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
</style>

<style id="global-styles-inline-css">
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--background: var(--background);--wp--preset--color--background-1: var(--background-1);--wp--preset--color--text-1: var(--text-1);--wp--preset--color--text-2: var(--text-2);--wp--preset--color--link-text: var(--link-text);--wp--preset--color--color-background: var(--color-background);--wp--preset--color--color-background-hover: var(--color-background-hover);--wp--preset--color--border-color: var(--border-color);--wp--preset--color--rgb-color-1: var(--rgb-color-1);--wp--preset--color--rgb-color-2: var(--rgb-color-2);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-background-color{color: var(--wp--preset--color--background) !important;}.has-background-1-color{color: var(--wp--preset--color--background-1) !important;}.has-text-1-color{color: var(--wp--preset--color--text-1) !important;}.has-text-2-color{color: var(--wp--preset--color--text-2) !important;}.has-link-text-color{color: var(--wp--preset--color--link-text) !important;}.has-color-background-color{color: var(--wp--preset--color--color-background) !important;}.has-color-background-hover-color{color: var(--wp--preset--color--color-background-hover) !important;}.has-border-color-color{color: var(--wp--preset--color--border-color) !important;}.has-rgb-color-1-color{color: var(--wp--preset--color--rgb-color-1) !important;}.has-rgb-color-2-color{color: var(--wp--preset--color--rgb-color-2) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-background-background-color{background-color: var(--wp--preset--color--background) !important;}.has-background-1-background-color{background-color: var(--wp--preset--color--background-1) !important;}.has-text-1-background-color{background-color: var(--wp--preset--color--text-1) !important;}.has-text-2-background-color{background-color: var(--wp--preset--color--text-2) !important;}.has-link-text-background-color{background-color: var(--wp--preset--color--link-text) !important;}.has-color-background-background-color{background-color: var(--wp--preset--color--color-background) !important;}.has-color-background-hover-background-color{background-color: var(--wp--preset--color--color-background-hover) !important;}.has-border-color-background-color{background-color: var(--wp--preset--color--border-color) !important;}.has-rgb-color-1-background-color{background-color: var(--wp--preset--color--rgb-color-1) !important;}.has-rgb-color-2-background-color{background-color: var(--wp--preset--color--rgb-color-2) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-background-border-color{border-color: var(--wp--preset--color--background) !important;}.has-background-1-border-color{border-color: var(--wp--preset--color--background-1) !important;}.has-text-1-border-color{border-color: var(--wp--preset--color--text-1) !important;}.has-text-2-border-color{border-color: var(--wp--preset--color--text-2) !important;}.has-link-text-border-color{border-color: var(--wp--preset--color--link-text) !important;}.has-color-background-border-color{border-color: var(--wp--preset--color--color-background) !important;}.has-color-background-hover-border-color{border-color: var(--wp--preset--color--color-background-hover) !important;}.has-border-color-border-color{border-color: var(--wp--preset--color--border-color) !important;}.has-rgb-color-1-border-color{border-color: var(--wp--preset--color--rgb-color-1) !important;}.has-rgb-color-2-border-color{border-color: var(--wp--preset--color--rgb-color-2) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */
</style>

<link rel='stylesheet' id='generate-widget-areas-css' href='https://www.campcodes.com/wp-content/themes/generatepress/assets/css/components/widget-areas.min.css?ver=3.6.1' media='all' />
<link rel='stylesheet' id='generate-style-css' href='https://www.campcodes.com/wp-content/themes/generatepress/assets/css/main.min.css?ver=3.6.1' media='all' />
<style id="generate-style-inline-css">
.is-right-sidebar{width:30%;}.is-left-sidebar{width:25%;}.site-content .content-area{width:100%;}@media (max-width: 768px){.main-navigation .menu-toggle,.sidebar-nav-mobile:not(#sticky-placeholder){display:block;}.main-navigation ul,.gen-sidebar-nav,.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav){display:none;}.nav-align-right .inside-navigation,.nav-align-center .inside-navigation{justify-content:space-between;}}
.dynamic-author-image-rounded{border-radius:100%;}.dynamic-featured-image, .dynamic-author-image{vertical-align:middle;}.one-container.blog .dynamic-content-template:not(:last-child), .one-container.archive .dynamic-content-template:not(:last-child){padding-bottom:0px;}.dynamic-entry-excerpt > p:last-child{margin-bottom:0px;}
/*# sourceURL=generate-style-inline-css */
</style>
<link rel='stylesheet' id='generatepress-dynamic-css' href='https://www.campcodes.com/wp-content/uploads/generatepress/style.min.css?ver=1764659227' media='all' />
<style id="generateblocks-inline-css">
.gb-container .wp-block-image img{vertical-align:middle;}.gb-grid-wrapper .wp-block-image{margin-bottom:0;}.gb-highlight{background:none;}.gb-shape{line-height:0;}:root{--gb-container-width:1200px;}
/*# sourceURL=generateblocks-inline-css */
</style>
<link rel='stylesheet' id='generate-offside-css' href='https://www.campcodes.com/wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css?ver=2.5.1' media='all' />
<style id="generate-offside-inline-css">
:root{--gp-slideout-width:265px;}.slideout-navigation.main-navigation{background-color:var(--background);}.slideout-navigation.main-navigation .main-nav ul li a{color:var(--text-1);}.slideout-navigation.main-navigation ul ul{background-color:rgba(0,0,0,0);}.slideout-navigation.main-navigation .main-nav ul ul li a{color:var(--text-1);}.slideout-navigation.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .slideout-navigation.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a, .slideout-navigation.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a{background-color:rgba(0,0,0,0);}.slideout-navigation.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a, .slideout-navigation.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a, .slideout-navigation.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a{background-color:rgba(0,0,0,0);}.slideout-navigation.main-navigation .main-nav ul li[class*="current-menu-"] > a{background-color:rgba(0,0,0,0);}.slideout-navigation.main-navigation .main-nav ul ul li[class*="current-menu-"] > a{background-color:rgba(0,0,0,0);}.slideout-navigation, .slideout-navigation a{color:var(--text-1);}.slideout-navigation button.slideout-exit{color:var(--text-1);padding-left:20px;padding-right:20px;}.slide-opened nav.toggled .menu-toggle:before{display:none;}@media (max-width: 768px){.menu-bar-item.slideout-toggle{display:none;}}
/*# sourceURL=generate-offside-inline-css */
</style>
<link rel='stylesheet' id='generate-navigation-branding-css' href='https://www.campcodes.com/wp-content/plugins/gp-premium/menu-plus/functions/css/navigation-branding-flex.min.css?ver=2.5.1' media='all' />
<style id="generate-navigation-branding-inline-css">
.main-navigation.has-branding .inside-navigation.grid-container, .main-navigation.has-branding.grid-container .inside-navigation:not(.grid-container){padding:0px 30px 0px 30px;}.main-navigation.has-branding:not(.grid-container) .inside-navigation:not(.grid-container) .navigation-branding{margin-left:10px;}.navigation-branding img, .site-logo.mobile-header-logo img{height:54px;width:auto;}.navigation-branding .main-title{line-height:54px;}@media (max-width: 768px){.main-navigation.has-branding.nav-align-center .menu-bar-items, .main-navigation.has-sticky-branding.navigation-stick.nav-align-center .menu-bar-items{margin-left:auto;}.navigation-branding{margin-right:auto;margin-left:10px;}.navigation-branding .main-title, .mobile-header-navigation .site-logo{margin-left:10px;}.main-navigation.has-branding .inside-navigation.grid-container{padding:0px;}}
/*# sourceURL=generate-navigation-branding-inline-css */
</style>
<style id="campcodes-experience-inline-css">
/* CampCodes reader experience: system fonts, responsive layout, visible keyboard focus. */
body.ccx{--cc-primary:#1b6786;--cc-accent:#1b6786;--cc-heading:#183440;--cc-text:#263b45;--cc-text-muted:#53636c;background:#f7f9fa;color:#263b45;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ccx h1,.ccx h2,.ccx h3,.ccx h4,.ccx button,.ccx input,.ccx select,.ccx textarea,.ccx .main-navigation a{font-family:inherit}.ccx a{color:#1b6786}.ccx a:focus-visible,.ccx button:focus-visible,.ccx input:focus-visible,.ccx summary:focus-visible{outline:3px solid #a04715;outline-offset:4px}.ccx .main-navigation .main-nav ul li a{font-weight:600}.ccx .main-navigation .main-nav ul li[class*="current-menu-"]>a{color:#1b6786}.ccx .site-header,.ccx .main-navigation{background:#fff}.ccx .site-header{border-top:3px solid #1b6786;box-shadow:none}.ccx .navigation-branding img,.ccx .site-logo img{max-height:50px;width:auto}.ccx .main-navigation .main-nav ul ul{border:1px solid #dbe2da;box-shadow:0 8px 22px #193d2d0a}.ccx .main-navigation .main-nav ul ul li a{min-height:44px;line-height:1.4;padding:14px 20px}.ccx .main-navigation .main-nav ul li:hover>a{color:#1b6786;background:#f0f5ee}
.ccx-wrap{width:min(1160px,calc(100% - 64px));margin:0 auto}.ccx-home{background:#f7f9fa}.ccx-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:74px 0 40px}.ccx-eyebrow,.ccx-kicker{font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:#1b6786}.ccx-eyebrow{display:flex;gap:9px;align-items:center;margin:0 0 22px}.ccx-eyebrow>span{width:8px;height:8px;border-radius:50%;background:#1b6786}.ccx-hero h1{font-size:clamp(34px,4.4vw,56px);font-weight:740;letter-spacing:-.045em;line-height:1.12;margin:0 0 24px;color:#183440}.ccx-hero h1 em{font-style:normal;color:#1b6786}.ccx-lead{max-width:510px;color:#53636c;font-size:18px;line-height:1.75;margin-bottom:28px}.ccx-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.ccx a.ccx-button,.ccx-button{display:inline-flex;gap:24px;align-items:center;justify-content:center;padding:14px 20px;min-height:48px;border-radius:7px;background:#1b6786;color:white!important;font-weight:650;text-decoration:none;box-shadow:none;border:1px solid #1b6786;font-size:14px;line-height:1.4}.ccx a.ccx-button:hover{background:#124c65}.ccx-secondary{font-weight:650;font-size:14px;text-decoration:none}.ccx-small{font-size:12px!important;line-height:1.7!important;color:#53636c}.ccx-hero-art{text-align:center}.ccx-hero-art img{width:100%;height:auto;display:block}.ccx-art-caption{font-size:11px;color:#53636c;letter-spacing:.02em}.ccx-search{background:white;border:1px solid #dbe2da;border-radius:10px;padding:22px 26px;display:flex;gap:26px;align-items:center;margin:12px 0 20px;box-shadow:0 6px 20px #183c2a03}.ccx-search label{font-size:15px;font-weight:650;flex-shrink:0;color:#263b45}.ccx-search>div{display:flex;flex:1;gap:8px}.ccx .ccx-search input{border:1px solid #c9d6cb;background:#f9fbf8;border-radius:5px;color:#263b45;width:100%;min-width:0;height:48px;padding:10px 14px;font-size:14px}.ccx .ccx-search input::placeholder{color:#5b6c64;opacity:1}.ccx-search button{flex-shrink:0;min-height:48px;padding:10px 20px;background:#1b6786;border:0;border-radius:5px;color:white;font-weight:650;font-size:14px}.ccx-topics{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding-bottom:30px}.ccx-topics>span{color:#53636c;font-size:12px;margin-right:8px}.ccx-topics a{font-size:12px;min-height:44px;padding:12px 14px;color:#263b45;text-decoration:none;border-radius:5px}.ccx-topics a:hover{background:#e9f0e6}.ccx-section{padding:54px 0;border-top:1px solid #dbe2da}.ccx-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}.ccx-kicker{margin:0 0 10px}.ccx-section h2,.ccx-workflow h2,.ccx-closing h2{font-size:clamp(25px,3vw,34px);font-weight:700;line-height:1.25;letter-spacing:-.035em;margin:0;color:#183440}.ccx-section-head>p{margin:0;color:#53636c;font-size:14px;line-height:1.7}.ccx-path-grid,.ccx-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.ccx-path{padding:26px;border:1px solid #dbe2da;border-radius:9px;text-decoration:none;background:#f0f4eb;display:flex;flex-direction:column;transition:background .15s}.ccx-path:nth-child(2){background:#edf3f3}.ccx-path:nth-child(3){background:#faf1e7}.ccx-path:hover{background:#e6eddf}.ccx-path>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.ccx-path-number{font-family:ui-monospace,monospace;font-size:12px;color:#53636c}.ccx-path-icon{font-family:ui-monospace,monospace;font-size:22px;color:#1b6786}.ccx-path h3{font-size:20px;font-weight:650;letter-spacing:-.02em;color:#183440;margin:0 0 12px}.ccx-path p{font-size:14px;line-height:1.75;color:#53636c;margin:0 0 26px}.ccx-text-link{font-size:13px;font-weight:700;color:#1b6786;text-decoration:none;line-height:1.6;display:inline-block}.ccx-path .ccx-text-link{margin-top:auto}.ccx-text-link:hover{text-decoration:underline}.ccx-card{border:1px solid #dbe2da;border-radius:9px;overflow:hidden;background:white;display:flex;flex-direction:column}.ccx-card-art{display:flex;aspect-ratio:16/9;overflow:hidden;background:#e9f0e6;align-items:center;justify-content:center}.ccx-card-art img{width:100%;height:100%;object-fit:cover}.ccx-art-code{font-size:56px;font-family:ui-monospace,monospace;color:#1b6786}.ccx-card-body{padding:22px;display:flex;flex:1;flex-direction:column}.ccx-card .ccx-kicker{font-size:10px}.ccx-card h3{font-size:20px;line-height:1.4;letter-spacing:-.025em;font-weight:650;margin:10px 0}.ccx-card h3 a{color:#183440;text-decoration:none}.ccx-card h3 a:hover{text-decoration:underline}.ccx-card p{font-size:14px;color:#53636c;line-height:1.75;margin:0 0 20px}.ccx-card .ccx-text-link{margin-top:auto}.ccx-section-intro{font-size:14px;color:#53636c;margin:-8px 0 24px}.ccx-ad{margin:10px auto 50px;min-height:124px;max-width:970px;text-align:center;border-block:1px solid #dbe2da;padding:14px 0;background:#f6f8f3;contain:layout}.ccx-ad>span{display:block;font-size:10px;color:#53636c;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}.ccx-ad ins{height:90px;max-height:90px;overflow:hidden}.ccx-workflow{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:45px;background:#eef3e9;border:1px solid #dbe2da;border-radius:12px;margin:10px 0 30px}.ccx-workflow h2{margin-bottom:18px}.ccx-workflow p{font-size:15px;line-height:1.75;color:#53636c;max-width:370px}.ccx-workflow ol{list-style:none;counter-reset:steps;margin:0;display:flex;flex-direction:column;gap:22px}.ccx-workflow li{counter-increment:steps;position:relative;padding-left:48px}.ccx-workflow li:before{content:counter(steps,decimal-leading-zero);position:absolute;left:0;top:0;font-family:ui-monospace,monospace;font-size:13px;color:#1b6786;border:1px solid #cbd8c9;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.ccx-workflow li strong{display:block;font-size:15px;margin-bottom:4px;color:#263b45}.ccx-workflow li span{display:block;font-size:13px;line-height:1.7;color:#53636c}.ccx-closing{text-align:center;padding:50px 0 65px}.ccx-closing p:not(.ccx-kicker){font-size:15px;color:#53636c;margin:16px 0}.ccx-footer{background:#193744;border-top:1px solid #dbe2da;padding:50px 0;color:#e1eaf0}.ccx-footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.1fr;gap:38px}.ccx .ccx-footer a{color:#e1eaf0;text-decoration:none}.ccx .ccx-footer a:hover{text-decoration:underline}.ccx-footer h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#e1eaf0;margin:4px 0 17px}.ccx-footer nav>a{display:block;font-size:12px;margin:0 0 6px;min-height:30px;padding:4px 0;line-height:1.6}.ccx-footer p{font-size:14px;line-height:1.8}.ccx-footer .ccx-small{color:#c1d1da}.ccx .ccx-wordmark{font-size:25px;font-weight:800;letter-spacing:-1px}.ccx-wordmark span{color:#b4d695}.ccx-footer .ccx-wordmark+p{margin-top:16px}.ccx .site-info{background:#122934;color:#c4d4ca}.ccx .site-info a{color:#c4d4ca}.ccx .cc-footer-mini-links{display:none}
/* Article and archive styles apply without replacing their existing URLs or content. */
.ccx .entry-content{font-size:17px;line-height:1.85;color:#263b45;overflow-wrap:break-word}.ccx .entry-content h2{font-size:28px;margin-top:2em;letter-spacing:-.025em;line-height:1.35}.ccx .entry-content h3{font-size:22px;line-height:1.4}.ccx .entry-content pre{max-width:100%;overflow:auto;font-size:14px;line-height:1.7}.ccx .entry-content pre code{white-space:pre}.ccx .entry-content figure{margin:28px 0}.ccx .entry-content figure img{width:100%;height:auto;border-radius:9px}.ccx .entry-content figcaption{font-size:13px;line-height:1.65;color:#53636c;margin-top:8px;text-align:left}.ccx .entry-content table{display:block;max-width:100%;overflow-x:auto}.ccx .entry-content th,.ccx .entry-content td{padding:12px 15px;border-color:#dbe2da;min-width:130px}.ccx .entry-content a{text-decoration:underline;text-underline-offset:3px}.ccx .ccx-note{background:#edf3eb;border:1px solid #c9d7c6;border-left:4px solid #1b6786;border-radius:6px;padding:20px 24px;margin:24px 0;font-size:15px;line-height:1.8}.ccx-note p:last-child{margin-bottom:0}.ccx .ccx-review-note{background:#fff8eb;border-left-color:#94600e}.ccx .in-article-ad,.ccx .ccp-ad-unit,.ccx .ccmp-ad-unit{margin:36px auto;max-width:100%;overflow:hidden}.ccx .cc-home-v2-ad-label,.ccx .cc-rail-label{color:#53636c}.ccx .cc-fallback-toc,.ccx #ez-toc-container{background:#f5f8f1;border:1px solid #dbe2da;max-width:100%;box-sizing:border-box}.ccx .entry-title{letter-spacing:-.035em;line-height:1.2}.ccx .ccx-meta{font-size:13px;color:#53636c;margin:10px 0 24px}.ccx .ccx-download-link{display:inline-block;margin:18px 0}.ccx .inside-article{border-color:#dbe2da}.ccx .menu-toggle{min-height:48px}.ccx .ccx-skip{position:absolute;left:16px;top:-150px;z-index:100000;background:#fff;padding:14px;color:#1b6786}.ccx .ccx-skip:focus{top:12px}
@media(min-width:961px){.ccx.single-post .content-area{width:74%}.ccx.single-post .widget-area.sidebar{width:26%}.ccx.single-post .entry-content{max-width:780px}.ccx .main-navigation .main-nav ul li a{padding-inline:16px;font-size:13px}}
@media(max-width:960px){.ccx-wrap{width:calc(100% - 40px)}.ccx-hero{gap:25px;padding-top:45px}.ccx-hero h1{font-size:38px}.ccx-lead{font-size:16px}.ccx-search{display:block}.ccx-search label{display:block;margin-bottom:12px}.ccx-path-grid,.ccx-card-grid{gap:14px}.ccx-path{padding:20px}.ccx-card-body{padding:18px}.ccx-card h3{font-size:18px}.ccx-workflow{gap:30px;padding:30px}.ccx-footer-grid{grid-template-columns:repeat(2,1fr);gap:30px}.ccx-section-head>p{display:none}}
@media(max-width:640px){.ccx-wrap{width:calc(100% - 36px)}.ccx-hero{grid-template-columns:1fr;padding:38px 0 22px;gap:20px}.ccx-hero h1{font-size:40px;max-width:480px}.ccx-hero-art{max-width:370px;margin:0 auto}.ccx-hero-art img{max-height:260px}.ccx-eyebrow{font-size:10px;margin-bottom:18px}.ccx-lead{font-size:16px;margin-bottom:22px}.ccx-search{padding:18px;margin-top:6px}.ccx-search>div{gap:6px}.ccx .ccx-search input{font-size:16px}.ccx-search button{padding:10px 14px}.ccx-topics{justify-content:flex-start;gap:2px;padding-bottom:24px}.ccx-topics>span{width:100%;margin:6px 0}.ccx-topics a{padding:12px 10px}.ccx-section{padding:36px 0}.ccx-section-head{align-items:flex-start;flex-wrap:wrap;gap:12px}.ccx-path-grid,.ccx-card-grid{grid-template-columns:1fr;gap:18px}.ccx-path{padding:24px}.ccx-path>div{margin-bottom:14px}.ccx-path p{margin-bottom:18px}.ccx-card-body{padding:22px}.ccx-card h3{font-size:22px}.ccx-workflow{grid-template-columns:1fr;padding:26px 22px;gap:30px}.ccx-workflow h2 br{display:none}.ccx-workflow li{padding-left:44px}.ccx-closing{padding:35px 0 45px}.ccx-footer{padding:35px 0}.ccx-footer-grid{gap:26px 20px}.ccx-footer-grid>div:first-child{grid-column:1/-1}.ccx-footer nav:last-child{grid-column:1/-1}.ccx .entry-content{font-size:16px;line-height:1.85}.ccx .entry-content h2{font-size:25px}.ccx .entry-content h3{font-size:21px}.ccx .entry-content pre{font-size:13px}.ccx .ccx-note{padding:18px}.ccx-ad{min-height:134px}}
@media(prefers-reduced-motion:reduce){.ccx *{scroll-behavior:auto!important;transition:none!important}}
@media (min-width:641px) and (max-width:800px){.ccx-hero{grid-template-columns:1fr 1fr;gap:24px}.ccx-hero h1{font-size:34px}.ccx-hero{padding-top:40px}.ccx-lead{font-size:15px}.ccx-actions{gap:16px}.ccx-secondary{font-size:13px}}
.ccx .site-footer .footer-widgets{display:none}.ccx .site-footer .site-info{padding:18px}.ccx .ccx-workflow ol{list-style:none}.ccx .ccx-workflow li::marker{content:''}
.ccx-share{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;border-block:1px solid #dbe2da;padding:20px 0;margin:30px 0;font-size:14px}.ccx-share a{min-height:44px;display:inline-flex;align-items:center}.ccx-share strong{margin-right:8px}

/* A programming publication: direct labels, real project screenshots, and a compact reading list. */
.ccx-editorial-hero{grid-template-columns:1.35fr 1fr;gap:65px;padding:50px 0 35px;align-items:start}.ccx-editorial-hero .ccx-eyebrow{font-size:12px;letter-spacing:.035em;text-transform:none;font-weight:650;color:#53636c;margin:0 0 14px}.ccx-editorial-hero h1{font-size:43px;letter-spacing:-.035em;line-height:1.16;margin-bottom:20px;font-weight:700}.ccx-editorial-hero .ccx-lead{font-size:16px;line-height:1.8;margin-bottom:24px}.ccx-editorial-hero .ccx-search{display:block;margin:0;padding:0;border:0;background:transparent;box-shadow:none}.ccx-editorial-hero .ccx-search label{display:block;margin-bottom:10px;font-size:13px}.ccx-editorial-hero .ccx-search input{background:#fff}.ccx-start-panel{border-left:2px solid #d6e1e7;padding:6px 0 6px 28px}.ccx-start-panel h2{font-size:19px;line-height:1.4;font-weight:650;color:#183440;margin:0 0 8px;letter-spacing:-.01em}.ccx-start-panel>p{font-size:14px;color:#53636c;line-height:1.7;margin:0 0 16px}.ccx-start-panel ol{margin:0 0 18px 19px}.ccx-start-panel li{padding-left:4px;margin-bottom:13px;font-size:14px;color:#53636c}.ccx-start-panel li a{font-weight:600;line-height:1.5;text-decoration:none;color:#1b6786}.ccx-start-panel li a:hover{text-decoration:underline}.ccx-start-panel li span{font-size:12px;display:block;line-height:1.7;margin-top:3px}.ccx-topics{justify-content:flex-start;padding:12px 0 18px;border-block:1px solid #dbe3e7;gap:2px 12px}.ccx-topics a{border-radius:3px;padding:12px 8px;color:#1b6786;font-weight:600}.ccx-topics a:hover{background:#e9f0f4}.ccx-section{border-top:0;padding:38px 0}.ccx-section-head{margin-bottom:23px;align-items:center}.ccx-section h2{font-size:27px;letter-spacing:-.02em}.ccx-section-head>div>p{color:#53636c;font-size:14px;line-height:1.7;margin:9px 0 0}.ccx-card{border-radius:5px;border-color:#dbe3e7}.ccx-card-art{aspect-ratio:16/9;background:#edf2f5}.ccx-card-body{padding:20px}.ccx-card .ccx-kicker{font-size:11px;letter-spacing:0;text-transform:none;font-weight:500;color:#53636c}.ccx-card h3{font-size:20px;font-weight:650;line-height:1.4;margin:7px 0 12px;letter-spacing:-.015em}.ccx-card p{font-size:14px;line-height:1.75}.ccx-card p:empty{display:none}.ccx-library-note{font-size:13px;line-height:1.8;color:#53636c;margin:20px 0 0}.ccx-ad{margin:5px auto 12px;background:#f4f6f8;border-color:#dbe3e7}.ccx-tutorials-section{padding-top:30px}.ccx-tutorial-list{border-top:1px solid #dbe3e7}.ccx-tutorial-row{display:grid;grid-template-columns:115px 1fr auto;gap:24px;align-items:start;padding:23px 0;border-bottom:1px solid #dbe3e7}.ccx-language{font-size:12px;color:#53636c;font-weight:600;padding-top:4px}.ccx-tutorial-row h3{font-size:19px;font-weight:650;line-height:1.45;margin:0 0 6px;letter-spacing:-.01em}.ccx-tutorial-row h3 a{color:#183440;text-decoration:none}.ccx-tutorial-row h3 a:hover{text-decoration:underline}.ccx-tutorial-row p{font-size:14px;line-height:1.7;margin:0;color:#53636c}.ccx-row-link{font-size:13px;line-height:1.6;font-weight:600;text-decoration:none;min-height:44px;display:flex;align-items:center;gap:8px}.ccx-setup-help{display:flex;gap:35px;align-items:center;justify-content:space-between;padding:27px 30px;margin:5px 0 45px;border:1px solid #dbe3e7;background:#edf3f6;border-radius:5px}.ccx-setup-help h2{font-size:21px;font-weight:650;line-height:1.4;letter-spacing:-.015em;margin:0 0 7px;color:#183440}.ccx-setup-help p{font-size:14px;color:#53636c;line-height:1.8;margin:0;max-width:650px}.ccx-setup-help .ccx-button{white-space:nowrap;font-size:13px}.ccx-footer{padding:38px 0}.ccx-footer h2{font-size:12px;letter-spacing:.015em;text-transform:none}.ccx .ccx-wordmark{letter-spacing:-.6px}.ccx-footer .ccx-wordmark+p{font-size:13px;line-height:1.8}.ccx-footer nav>a{font-size:13px}
@media(max-width:960px){.ccx-editorial-hero{gap:32px;grid-template-columns:1.2fr 1fr}.ccx-editorial-hero h1{font-size:35px}.ccx-start-panel{padding-left:22px}.ccx-tutorial-row{grid-template-columns:95px 1fr;gap:15px}.ccx-row-link{grid-column:2}.ccx-setup-help{padding:24px;gap:25px}}
@media(max-width:700px){.ccx-editorial-hero{grid-template-columns:1fr;padding:30px 0;gap:30px}.ccx-editorial-hero h1{font-size:36px}.ccx-editorial-hero .ccx-lead{font-size:16px}.ccx-start-panel{border-left:0;border-top:1px solid #dbe3e7;padding:23px 0 0}.ccx-start-panel ol{margin-bottom:10px}.ccx-start-panel li{margin-bottom:12px}.ccx-section{padding:30px 0}.ccx-section h2{font-size:25px}.ccx-setup-help{display:block;padding:22px;margin-bottom:30px}.ccx-setup-help .ccx-button{margin-top:17px}.ccx-tutorial-row{grid-template-columns:1fr;gap:8px;padding:20px 0}.ccx-language{padding:0;font-size:11px}.ccx-row-link{grid-column:1;min-height:38px}.ccx-tutorial-row h3{font-size:20px}.ccx-topics{gap:0 8px}.ccx-topics a{padding:12px 7px}.ccx-topics>span{font-size:12px}.ccx-section-head{gap:10px}.ccx-start-panel .ccx-text-link{min-height:44px;padding-top:10px}}
@media(min-width:701px) and (max-width:1000px){.ccx-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ccx-card-grid{grid-template-columns:1fr}}
.ccx-library-note a{text-decoration:underline;text-underline-offset:3px}
.ccx #ez-toc-container .ez-toc-list a{display:inline-block;padding-block:5px;line-height:1.5}
.ccx #ez-toc-container .ez-toc-cssicon-toggle-label{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}

/* Keep contents-link destinations below the fixed navigation bar. */
.ccx .entry-content :is(h2,h3,h4),.ccx .dynamic-entry-content :is(h2,h3,h4),.ccx .ez-toc-section{scroll-margin-top:100px}

/* Restore the fuller illustrated homepage, with room for each content group. */
.ccx-home-full{--home-ink:#193c32;--home-green:#246b54;background:#fbfcf8;color:#294239}
.ccx-home-full .ccx-hero{grid-template-columns:1.08fr 1fr;gap:54px;padding:62px 0 34px;align-items:center}
.ccx-home-full .ccx-eyebrow{font-size:11px;letter-spacing:.065em;color:#4b675a;line-height:1.6;margin-bottom:19px}
.ccx-home-full .ccx-eyebrow>span{background:var(--home-green)}
.ccx-home-full .ccx-hero h1{font-size:clamp(36px,4.4vw,56px);line-height:1.14;letter-spacing:-.04em;color:var(--home-ink);margin-bottom:23px}
.ccx-home-full .ccx-hero h1 em{color:var(--home-green)}
.ccx-home-full .ccx-lead{color:#52655c;font-size:17px;line-height:1.85;max-width:510px;margin-bottom:25px}
.ccx-home-full .ccx-hero-art{margin:0}
.ccx-home-full .ccx-hero-art img{max-height:none}
.ccx-home-full .ccx-art-caption{font-size:11px;color:#52655c;line-height:1.8;margin-top:3px}
.ccx-home-full .ccx-button{background:var(--home-green);border-color:var(--home-green);border-radius:7px}
.ccx-home-full .ccx-button:hover{background:#19523f}
.ccx-home-full .ccx-secondary,.ccx-home-full .ccx-text-link{color:var(--home-green)}
.ccx-home-full .ccx-small{color:#52655c}
.ccx-home-full .ccx-actions{gap:20px}
.ccx-home-full .ccx-search{background:#fff;border:1px solid #d8e1d4;border-radius:10px;padding:22px 25px;display:flex;gap:26px;margin:16px 0 10px;box-shadow:0 5px 18px #29423904}
.ccx-home-full .ccx-search label{font-size:14px;margin:0;color:var(--home-ink)}
.ccx-home-full .ccx-search input{background:#fbfcfa;border-color:#cbd7c6;color:#294239}
.ccx-home-full .ccx-search button{background:var(--home-green)}
.ccx-home-full .ccx-topics{justify-content:center;border:0;padding:6px 0 28px;gap:1px 10px}
.ccx-home-full .ccx-topics a{color:#37614e;font-weight:500}
.ccx-home-full .ccx-topics a:hover{background:#edf3e7}
.ccx-home-full .ccx-section{padding:46px 0;border-top:1px solid #dce4d7}
.ccx-home-full .ccx-section-head{margin-bottom:25px;align-items:flex-end}
.ccx-home-full .ccx-section h2,.ccx-home-full .ccx-workflow h2,.ccx-home-full .ccx-closing h2{font-size:clamp(26px,3vw,34px);line-height:1.28;letter-spacing:-.03em;color:var(--home-ink)}
.ccx-home-full .ccx-section-head>p{font-size:13px;line-height:1.8;color:#5a6b61;margin:0}
.ccx-home-full .ccx-kicker{color:#487353;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin:0 0 10px}
.ccx-home-full .ccx-section-intro{font-size:14px;line-height:1.8;color:#52655c;margin:-7px 0 25px;max-width:760px}
.ccx-home-full .ccx-path-grid,.ccx-home-full .ccx-card-grid{gap:23px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ccx-home-full .ccx-path{border:1px solid #d8e1d4;border-radius:10px;background:#eff4e8;padding:27px}
.ccx-home-full .ccx-path:nth-child(2){background:#ebf2f1}
.ccx-home-full .ccx-path:nth-child(3){background:#faf0e5}
.ccx-home-full .ccx-path:hover{border-color:#a5b59c}
.ccx-home-full .ccx-path>div{margin-bottom:22px}
.ccx-home-full .ccx-path-icon{color:var(--home-green)}
.ccx-home-full .ccx-path h3{color:var(--home-ink);font-size:21px}
.ccx-home-full .ccx-path p{color:#52655c;font-size:14px}
.ccx-home-full .ccx-card{border-color:#d8e1d4;border-radius:9px;box-shadow:0 3px 14px #29423903}
.ccx-home-full .ccx-card-art{background:#edf2e8}
.ccx-home-full .ccx-card-body{padding:22px}
.ccx-home-full .ccx-card .ccx-kicker{letter-spacing:.02em;font-size:10px;text-transform:none;color:#52655c;font-weight:600}
.ccx-home-full .ccx-card h3{font-size:20px;line-height:1.4;letter-spacing:-.02em;margin:1px 0 11px}
.ccx-home-full .ccx-card h3 a{color:var(--home-ink)}
.ccx-home-full .ccx-card p{color:#52655c;font-size:14px;line-height:1.8}
.ccx-home-full .ccx-card:hover{border-color:#aebea5}
.ccx-home-full .ccx-library-note{color:#52655c;font-size:12px;margin:20px 0 0;line-height:1.85}
.ccx-home-full .ccx-library-note a{color:var(--home-green)}
.ccx-home-full .ccx-library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ccx-home-full .ccx-library{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid #d8e1d4;border-radius:9px;padding:23px}
.ccx-home-full .ccx-library:hover{border-color:#98af94;background:#f7faf3}
.ccx-home-full .ccx-library-icon{display:grid;place-items:center;width:42px;height:42px;background:#edf3e7;border-radius:9px;font:600 15px/1 ui-monospace,monospace;color:var(--home-green);margin-bottom:19px}
.ccx-home-full .ccx-library:nth-child(3n+2) .ccx-library-icon{background:#ebf2f4;color:#32657c}
.ccx-home-full .ccx-library:nth-child(3n) .ccx-library-icon{background:#f9efe3;color:#8b5c2b}
.ccx-home-full .ccx-library h3{font-size:18px;line-height:1.4;margin:0 0 10px;font-weight:650;color:var(--home-ink);letter-spacing:-.015em}
.ccx-home-full .ccx-library p{font-size:13px;line-height:1.8;color:#52655c;margin:0 0 20px}
.ccx-home-full .ccx-library .ccx-text-link{margin-top:auto;font-size:12px}
.ccx-home-full .ccx-workflow{grid-template-columns:1fr 1fr;background:#eef3e7;border-color:#d4dfcd;border-radius:12px;margin:16px 0 42px;padding:43px;gap:62px}
.ccx-home-full .ccx-workflow h2{margin-bottom:17px}
.ccx-home-full .ccx-workflow p{color:#52655c;font-size:14px;line-height:1.9}
.ccx-home-full .ccx-workflow ol{list-style:none;margin:0}
.ccx-home-full .ccx-workflow li strong{color:var(--home-ink)}
.ccx-home-full .ccx-workflow li span{color:#52655c}
.ccx-home-full .ccx-workflow li:before{color:var(--home-green)}
.ccx-home-full .ccx-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.ccx-home-full .ccx-faq details{background:#fff;border:1px solid #d8e1d4;border-radius:8px;padding:0 20px}
.ccx-home-full .ccx-faq summary{cursor:pointer;font-size:14px;line-height:1.65;font-weight:650;color:var(--home-ink);padding:19px 0}
.ccx-home-full .ccx-faq details[open] summary{border-bottom:1px solid #e2e8dc}
.ccx-home-full .ccx-faq details p{font-size:14px;line-height:1.85;color:#52655c;margin:17px 0 22px}
.ccx-home-full .ccx-faq details a{color:var(--home-green);text-decoration:underline;text-underline-offset:3px}
.ccx-home-full .ccx-closing{padding:40px 0 58px;border-top:1px solid #dce4d7}
.ccx-home-full .ccx-closing>p:not(.ccx-kicker){color:#52655c;font-size:15px;line-height:1.8}
.ccx-home-full .ccx-closing>div{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 26px}
/* Ad sizes are inline on the homepage, as supported by AdSense responsive-code guidance. */
.ccx-home-full .ccx-ad{border-block:1px solid #dce4d7;background:#f5f7f1;max-width:none;margin:0 0 42px;padding:16px 0 18px;min-height:0;contain:layout}
.ccx-home-full .ccx-ad>span{font-size:10px;line-height:15px;letter-spacing:.06em;color:#657361;margin:0 0 10px}
.ccx-home-full .ccx-ad-space,.ccx-home-full .ccx-ad ins.adsbygoogle{width:300px;height:250px;max-height:none;overflow:visible;margin:0 auto}
@media(min-width:500px){.ccx-home-full .ccx-ad-space,.ccx-home-full .ccx-ad ins.adsbygoogle{width:468px;height:60px}}
@media(min-width:800px){.ccx-home-full .ccx-ad-space,.ccx-home-full .ccx-ad ins.adsbygoogle{width:728px;height:90px}}
@media(min-width:1100px){.ccx-home-full .ccx-ad-space,.ccx-home-full .ccx-ad ins.adsbygoogle{width:970px;height:90px}}
@media(max-width:339px){.ccx-home-full .ccx-ad-space,.ccx-home-full .ccx-ad ins.adsbygoogle{width:250px;height:250px}}
@media(max-width:1000px){.ccx-home-full .ccx-hero{gap:28px;padding-top:45px}.ccx-home-full .ccx-hero h1{font-size:40px}.ccx-home-full .ccx-actions{gap:15px}.ccx-home-full .ccx-secondary{font-size:13px}.ccx-home-full .ccx-search{display:block}.ccx-home-full .ccx-search label{display:block;margin-bottom:12px}.ccx-home-full .ccx-card-grid{gap:18px}.ccx-home-full .ccx-path-grid{gap:16px}.ccx-home-full .ccx-path{padding:22px}.ccx-home-full .ccx-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ccx-home-full .ccx-workflow{gap:30px;padding:32px}}
@media(min-width:701px) and (max-width:900px){.ccx-home-full .ccx-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ccx-home-full .ccx-hero{grid-template-columns:1fr;padding:32px 0 22px;gap:22px}.ccx-home-full .ccx-hero h1{font-size:39px;max-width:520px}.ccx-home-full .ccx-lead{font-size:16px;max-width:none}.ccx-home-full .ccx-hero-art{max-width:370px;margin:0 auto}.ccx-home-full .ccx-hero-art img{max-height:270px}.ccx-home-full .ccx-art-caption{font-size:10px}.ccx-home-full .ccx-search{padding:20px;margin-top:8px}.ccx-home-full .ccx-search input{font-size:16px}.ccx-home-full .ccx-topics{justify-content:flex-start;padding-bottom:25px;gap:0 8px}.ccx-home-full .ccx-topics>span{width:100%;margin:8px 0 2px}.ccx-home-full .ccx-section{padding:34px 0}.ccx-home-full .ccx-section-head{align-items:flex-start;flex-wrap:wrap;gap:15px;margin-bottom:24px}.ccx-home-full .ccx-section h2,.ccx-home-full .ccx-workflow h2,.ccx-home-full .ccx-closing h2{font-size:28px}.ccx-home-full .ccx-path-grid,.ccx-home-full .ccx-card-grid{grid-template-columns:1fr;gap:20px}.ccx-home-full .ccx-path{padding:25px}.ccx-home-full .ccx-card-body{padding:23px}.ccx-home-full .ccx-card h3{font-size:22px}.ccx-home-full .ccx-library-grid{gap:13px}.ccx-home-full .ccx-library{padding:19px}.ccx-home-full .ccx-library-icon{margin-bottom:15px}.ccx-home-full .ccx-library p{font-size:12px}.ccx-home-full .ccx-workflow{grid-template-columns:1fr;padding:28px 24px;gap:30px;margin:15px 0 30px}.ccx-home-full .ccx-workflow h2 br{display:none}.ccx-home-full .ccx-faq-grid{grid-template-columns:1fr}.ccx-home-full .ccx-closing{padding:32px 0 42px}.ccx-home-full .ccx-ad{margin-bottom:30px}}
@media(max-width:380px){.ccx-home-full .ccx-hero h1{font-size:35px}.ccx-home-full .ccx-library-grid{grid-template-columns:1fr}.ccx-home-full .ccx-search{padding:17px}.ccx-home-full .ccx-search button{padding-inline:13px}.ccx-home-full .ccx-hero-art{max-width:310px}}
.ccx-home-full .ccx-mobile-cards .ccx-card-art{background:#f0f4ed}.ccx-home-full .ccx-mobile-cards .ccx-card-art img{object-fit:contain}
.ccx .ccx-home-full a.ccx-button{background:#246b54;border-color:#246b54}.ccx .ccx-home-full a.ccx-button:hover{background:#19523f}.home.ccx .ccx-footer{background:#193d2d}.home.ccx .site-info{background:#112c21}

/*# sourceURL=campcodes-experience-inline-css */
</style>
<script id="jquery-core-js" src="https://www.campcodes.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1"></script>
<link rel="https://api.w.org/" href="https://www.campcodes.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://www.campcodes.com/wp-json/wp/v2/pages/18204" /><link rel="icon" href="https://www.campcodes.com/wp-content/uploads/2020/05/cropped-cc-2-32x32.png" sizes="32x32" />
<link rel="icon" href="https://www.campcodes.com/wp-content/uploads/2020/05/cropped-cc-2-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://www.campcodes.com/wp-content/uploads/2020/05/cropped-cc-2-180x180.png" />
<meta name="msapplication-TileImage" content="https://www.campcodes.com/wp-content/uploads/2020/05/cropped-cc-2-270x270.png" />
	<style id="campcodes-hide-legacy-home-strip">
		.gb-container-96752454,
		.gb-container-73e288de {
			display: none !important;
		}
	</style>
		<style id="campcodes-hide-secondary-sidebar-ad">
		#right-sidebar .campcodes-sidebar-ad-widget--secondary {
			display: none !important;
		}
	</style>
		<style id="campcodes-sidebar-posts-thumb-responsive">
		#right-sidebar .tptn_posts.tptn-left-thumbs li {
			display: grid !important;
			grid-template-columns: 108px minmax(0, 1fr);
			column-gap: 12px;
			align-items: flex-start;
			margin-bottom: 12px;
		}
		/* Only the thumbnail link gets a fixed image column. */
		#right-sidebar .tptn_posts.tptn-left-thumbs li > a.tptn_link {
			grid-column: 1;
			display: block !important;
			width: 108px !important;
			max-width: 108px !important;
			margin: 0 !important;
		}
		#right-sidebar .tptn_posts.tptn-left-thumbs img.tptn_thumb,
		#right-sidebar .tptn_posts.tptn-left-thumbs img.tptn_thumbnail,
		#right-sidebar .campcodes-wpp-fallback img.tptn_thumb,
		#right-sidebar .campcodes-wpp-fallback img.tptn_thumbnail {
			display: block !important;
			width: 100% !important;
			max-width: 108px !important;
			height: 68px !important;
			aspect-ratio: 16 / 9;
			object-fit: cover;
			border-radius: 6px;
		}
		#right-sidebar .tptn_posts.tptn-left-thumbs .tptn_after_thumb {
			grid-column: 2;
			display: block !important;
			min-width: 0 !important;
		}
		#right-sidebar .tptn_posts.tptn-left-thumbs .tptn_after_thumb .tptn_link {
			display: block !important;
			width: 100% !important;
			max-width: none !important;
			margin: 0 0 4px !important;
			text-decoration: none !important;
		}
		#right-sidebar .tptn_posts.tptn-left-thumbs .tptn_title {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			font-size: 16px !important;
			line-height: 1.35 !important;
			font-weight: 700 !important;
		}
		#right-sidebar .tptn_posts.tptn-left-thumbs .tptn_excerpt {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			font-size: 14px !important;
			line-height: 1.45 !important;
			color: #4b5563;
		}
		#right-sidebar .tptn_posts.tptn-left-thumbs .tptn_excerpt a,
		#right-sidebar .tptn_posts.tptn-left-thumbs .tptn_after_thumb a[rel~="tag"] {
			display: none !important;
		}
		@media (max-width: 768px) {
			#right-sidebar .tptn_posts.tptn-left-thumbs li {
				grid-template-columns: 96px minmax(0, 1fr);
				column-gap: 10px;
			}
			#right-sidebar .tptn_posts.tptn-left-thumbs li > a.tptn_link {
				width: 96px !important;
				max-width: 96px !important;
			}
			#right-sidebar .tptn_posts.tptn-left-thumbs img.tptn_thumb,
			#right-sidebar .tptn_posts.tptn-left-thumbs img.tptn_thumbnail {
				max-width: 96px !important;
				height: 60px !important;
			}
			#right-sidebar .tptn_posts.tptn-left-thumbs .tptn_title {
				font-size: 15px !important;
			}
		}
	</style>
	    <style id="campcodes-front-page-loop-hide">
        /* body.home = blog index; body.front-page = static front page */
        body.home #primary.content-area,
        body.front-page #primary.content-area {
            display: none !important;
        }
        body.home .site-content,
        body.front-page .site-content {
            padding-top: 0 !important;
        }
        /* Belt-and-braces: hide sidebar on front page regardless of GP layout setting */
        body.home #secondary.widget-area,
        body.front-page #secondary.widget-area {
            display: none !important;
        }
    </style>
    <meta name="generator" content="WordPress Download Manager 3.3.76" />
                <style>
        /* WPDM Link Template Styles */        </style>
                <style>

            :root {
                --color-primary: #4a8eff;
                --color-primary-rgb: 74, 142, 255;
                --color-primary-hover: #4a8eff;
                --color-primary-active: #4a8eff;
                --clr-sec: #6c757d;
                --clr-sec-rgb: 108, 117, 125;
                --clr-sec-hover: #6c757d;
                --clr-sec-active: #6c757d;
                --color-secondary: #6c757d;
                --color-secondary-rgb: 108, 117, 125;
                --color-secondary-hover: #6c757d;
                --color-secondary-active: #6c757d;
                --color-success: #18ce0f;
                --color-success-rgb: 24, 206, 15;
                --color-success-hover: #18ce0f;
                --color-success-active: #18ce0f;
                --color-info: #2CA8FF;
                --color-info-rgb: 44, 168, 255;
                --color-info-hover: #2CA8FF;
                --color-info-active: #2CA8FF;
                --color-warning: #FFB236;
                --color-warning-rgb: 255, 178, 54;
                --color-warning-hover: #FFB236;
                --color-warning-active: #FFB236;
                --color-danger: #ff5062;
                --color-danger-rgb: 255, 80, 98;
                --color-danger-hover: #ff5062;
                --color-danger-active: #ff5062;
                --color-green: #30b570;
                --color-blue: #0073ff;
                --color-purple: #8557D3;
                --color-red: #ff5062;
                --color-muted: rgba(69, 89, 122, 0.6);
                --wpdm-font: "-apple-system", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            }

            .wpdm-download-link.btn.btn-link.btn-xs {
                border-radius: 0px;
            }


        </style>
        </head>

<body class="home wp-singular page-template-default page page-id-18204 wp-custom-logo wp-embed-responsive wp-theme-generatepress wp-child-theme-generatepressblog ccx google-anno-skip post-image-aligned-center slideout-enabled slideout-desktop sticky-menu-no-transition sticky-enabled both-sticky-menu no-sidebar nav-below-header separate-containers header-aligned-left dropdown-hover full-width-content" itemtype="https://schema.org/WebPage" itemscope>
	<a class="ccx-skip" href="#ccx-main">Skip to content</a>		<nav class="has-branding main-navigation nav-align-right has-menu-bar-items sub-menu-right" id="site-navigation" aria-label="Primary"  itemtype="https://schema.org/SiteNavigationElement" itemscope>
			<div class="inside-navigation grid-container">
				<div class="navigation-branding"><div class="site-logo">
						<a href="https://www.campcodes.com/" title="Campcodes" rel="home">
							<img  class="header-image is-logo-image" alt="Campcodes" src="https://www.campcodes.com/wp-content/uploads/2025/02/cropped-cropped-cropped-CCodes.png" title="Campcodes" srcset="https://www.campcodes.com/wp-content/uploads/2025/02/cropped-cropped-cropped-CCodes.png 1x, https://www.campcodes.com/wp-content/uploads/2025/02/cropped-cropped-cropped-CCodes.png 2x" width="600" height="120" />
						</a>
					</div></div>				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
					<span class="gp-icon icon-menu-bars"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z" /></svg><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" /></svg></span><span class="mobile-menu">MENU</span>				</button>
				<div id="primary-menu" class="main-nav"><ul id="menu-campcodes-learning-navigation-2026" class=" menu sf-menu"><li id="menu-item-22062" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22062"><a href="https://www.campcodes.com/start-here/">Start here</a></li>
<li id="menu-item-22063" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-22063"><a href="https://www.campcodes.com/projects/">Projects<span role="presentation" class="dropdown-menu-toggle"><span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" /></svg></span></span></a>
<ul class="sub-menu">
	<li id="menu-item-22064" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22064"><a href="https://www.campcodes.com/projects/php/">PHP &#038; MySQL</a></li>
	<li id="menu-item-22065" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22065"><a href="https://www.campcodes.com/projects/python/">Python</a></li>
	<li id="menu-item-22066" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22066"><a href="https://www.campcodes.com/projects/laravel-projects/">Laravel</a></li>
	<li id="menu-item-22067" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22067"><a href="https://www.campcodes.com/mini-projects/">Mini projects</a></li>
	<li id="menu-item-22068" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22068"><a href="https://www.campcodes.com/mobile-app/android-studio/">Android</a></li>
	<li id="menu-item-22069" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22069"><a href="https://www.campcodes.com/mobile-app/flutter/">Flutter</a></li>
</ul>
</li>
<li id="menu-item-22070" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-22070"><a href="https://www.campcodes.com/tutorials/">Tutorials<span role="presentation" class="dropdown-menu-toggle"><span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" /></svg></span></span></a>
<ul class="sub-menu">
	<li id="menu-item-22071" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22071"><a href="https://www.campcodes.com/tutorials/php-tutorials/">PHP tutorials</a></li>
	<li id="menu-item-22072" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22072"><a href="https://www.campcodes.com/tutorials/javascript-tutorials/">JavaScript tutorials</a></li>
	<li id="menu-item-22073" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22073"><a href="https://www.campcodes.com/tutorials/python-tutorials/">Python tutorials</a></li>
	<li id="menu-item-22074" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22074"><a href="https://www.campcodes.com/tutorials/java-tutorials/">Java tutorials</a></li>
	<li id="menu-item-22075" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22075"><a href="https://www.campcodes.com/latest-post/">All articles</a></li>
</ul>
</li>
<li id="menu-item-22076" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22076"><a href="https://www.campcodes.com/download-and-setup-guide/">Setup guide</a></li>
<li id="menu-item-22077" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-22077"><a href="https://www.campcodes.com/about-us/">About<span role="presentation" class="dropdown-menu-toggle"><span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" /></svg></span></span></a>
<ul class="sub-menu">
	<li id="menu-item-22078" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22078"><a href="https://www.campcodes.com/editorial-standards/">Editorial standards</a></li>
	<li id="menu-item-22079" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22079"><a href="https://www.campcodes.com/contact-us-campcodes/">Contact / Report an issue</a></li>
</ul>
</li>
</ul></div><div class="menu-bar-items">	<span class="menu-bar-item">
		<a href="#" role="button" aria-label="Open search" aria-haspopup="dialog" aria-controls="gp-search" data-gpmodal-trigger="gp-search"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z" /></svg><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" /></svg></span></a>
	</span>
	<span class="menu-bar-item slideout-toggle hide-on-mobile has-svg-icon"><a href="#" role="button" aria-label="Open Off-Canvas Panel"><span class="gp-icon pro-menu-bars">
				<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
					<path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z" />
				</svg>
			</span></a></span></div>			</div>
		</nav>
		<main id="ccx-main" class="ccx-home ccx-home-full" tabindex="-1">
    <div class="ccx-wrap">
        <header class="ccx-hero">
            <div class="ccx-hero-copy">
                <p class="ccx-eyebrow"><span aria-hidden="true"></span> Source code, tutorials, and project ideas</p>
                <h1>Your next project<br>starts <em>with a little code.</em></h1>
                <p class="ccx-lead">Find a system to study, follow a tutorial, or try a small programming exercise. Explore PHP, Python, JavaScript, and mobile projects at your own pace.</p>
                <div class="ccx-actions"><a class="ccx-button" href="https://www.campcodes.com/projects/">Browse source code <span aria-hidden="true">↗</span></a><a class="ccx-secondary" href="https://www.campcodes.com/start-here/">New here? Start with a guide →</a></div>
                <p class="ccx-small">For students, beginners, and developers working through an idea.</p>
            </div>
            <figure class="ccx-hero-art"><img src="https://www.campcodes.com/wp-content/mu-plugins/campcodes-experience/build-a-little.svg" width="600" height="460" fetchpriority="high" decoding="async" alt="Illustration of a code editor and a local project test."><figcaption class="ccx-art-caption">Read the code, run it locally, then try a change of your own.</figcaption></figure>
        </header>
        <form class="ccx-search" role="search" action="https://www.campcodes.com/" method="get"><label for="ccx-search-input">What would you like to build?</label><div><input id="ccx-search-input" type="search" name="s" placeholder="Try inventory system, Python CSV, or JavaScript Fetch" required><button type="submit">Search <span aria-hidden="true">→</span></button></div></form>
        <nav class="ccx-topics" aria-label="Browse by technology"><span>Browse by language</span><a href="https://www.campcodes.com/projects/php/">PHP &amp; MySQL</a><a href="https://www.campcodes.com/projects/python/">Python</a><a href="https://www.campcodes.com/tutorials/javascript-tutorials/">JavaScript</a><a href="https://www.campcodes.com/projects/laravel-projects/">Laravel</a><a href="https://www.campcodes.com/projects/c/">C#</a><a href="https://www.campcodes.com/projects/vb-net/">VB.NET</a><a href="https://www.campcodes.com/mobile-app/flutter/">Flutter</a><a href="https://www.campcodes.com/mobile-app/android-studio/">Android</a></nav>

        <section class="ccx-section" aria-labelledby="ccx-paths">
            <div class="ccx-section-head"><div><p class="ccx-kicker">Find your starting point</p><h2 id="ccx-paths">What do you want to work on?</h2></div><p>Choose an example, a full system,<br>or a plan for your first project.</p></div>
            <div class="ccx-path-grid">
                                <a class="ccx-path" href="https://www.campcodes.com/tutorials/"><div><span class="ccx-path-number">01</span><span class="ccx-path-icon" aria-hidden="true">{ }</span></div><h3>Learn a concept</h3><p>Follow a focused example with code, instructions, and an expected result.</p><span class="ccx-text-link">Explore tutorials ↗</span></a>
                                <a class="ccx-path" href="https://www.campcodes.com/projects/"><div><span class="ccx-path-number">02</span><span class="ccx-path-icon" aria-hidden="true">&lt;/&gt;</span></div><h3>Study a complete project</h3><p>Look through an existing system, its screenshots, database, and setup notes.</p><span class="ccx-text-link">Browse source code ↗</span></a>
                                <a class="ccx-path" href="https://www.campcodes.com/start-here/"><div><span class="ccx-path-number">03</span><span class="ccx-path-icon" aria-hidden="true">→</span></div><h3>Plan your own project</h3><p>Choose one useful workflow and build a version small enough to understand.</p><span class="ccx-text-link">Read the getting started guide ↗</span></a>
                            </div>
        </section>
        <aside class="ccx-ad" aria-label="Advertisement"><span>Advertisement</span><div class="ccx-ad-space" data-ad-client="ca-pub-9157322147162951" data-ad-slot="2975395155"></div></aside>
        <section class="ccx-section" aria-labelledby="ccx-projects">
            <div class="ccx-section-head"><div><p class="ccx-kicker">Inside the project library</p><h2 id="ccx-projects">Systems you can explore</h2></div><a class="ccx-text-link" href="https://www.campcodes.com/projects/">All source code projects ↗</a></div>
            <p class="ccx-section-intro">Start with the screenshots and feature list. Each listing has its own requirements and download information.</p>
            <div class="ccx-card-grid"><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/projects/stock-management-system-using-php-mysql/"><img src="https://www.campcodes.com/wp-content/uploads/2021/02/ccx-card-6758.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">PHP / MySQL</span><h3><a href="https://www.campcodes.com/projects/stock-management-system-using-php-mysql/">Stock management system</a></h3><p>Add and update items, track stock levels, and record goods moving in and out. Includes database and local setup instructions.</p><a class="ccx-text-link" href="https://www.campcodes.com/projects/stock-management-system-using-php-mysql/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: Stock management system</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/projects/advanced-school-management-system-using-php-mysql-free-download/"><img src="https://www.campcodes.com/wp-content/uploads/2020/12/ccx-card-5961.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">PHP / MySQL</span><h3><a href="https://www.campcodes.com/projects/advanced-school-management-system-using-php-mysql-free-download/">School management system</a></h3><p>Student records, fee collection, class attendance, timetables, and exam results in one PHP/MySQL project.</p><a class="ccx-text-link" href="https://www.campcodes.com/projects/advanced-school-management-system-using-php-mysql-free-download/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: School management system</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/projects/online-inventory-management-system-in-php-mysql-free-download/"><img src="https://www.campcodes.com/wp-content/uploads/2021/01/ccx-card-6188.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">PHP / MySQL</span><h3><a href="https://www.campcodes.com/projects/online-inventory-management-system-in-php-mysql-free-download/">Inventory management system</a></h3><p>A PHP/MySQL inventory project with products, orders, user groups, stores, and reports. See the screenshots and setup notes.</p><a class="ccx-text-link" href="https://www.campcodes.com/projects/online-inventory-management-system-in-php-mysql-free-download/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: Inventory management system</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/projects/online-hotel-reservation-system-in-php-mysql/"><img src="https://www.campcodes.com/wp-content/uploads/2021/01/ccx-card-6294.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">PHP / MySQL</span><h3><a href="https://www.campcodes.com/projects/online-hotel-reservation-system-in-php-mysql/">Hotel reservation system</a></h3><p>Explore room records, customer bookings, reservation approvals, and check-in and check-out screens.</p><a class="ccx-text-link" href="https://www.campcodes.com/projects/online-hotel-reservation-system-in-php-mysql/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: Hotel reservation system</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/projects/online-voting-system-in-php/"><img src="https://www.campcodes.com/wp-content/uploads/2024/02/ccx-card-6630.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">PHP / MySQL</span><h3><a href="https://www.campcodes.com/projects/online-voting-system-in-php/">Voting management system</a></h3><p>Study voter and candidate records, ballot previews, result charts, and printable voting reports.</p><a class="ccx-text-link" href="https://www.campcodes.com/projects/online-voting-system-in-php/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: Voting management system</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/projects/complete-college-school-management-system-using-python-django/"><img src="https://www.campcodes.com/wp-content/uploads/2020/07/ccx-card-5502.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">Python / Django</span><h3><a href="https://www.campcodes.com/projects/complete-college-school-management-system-using-python-django/">School management with Django</a></h3><p>Browse student, teacher, department, library, and class-scheduling features in a Django project.</p><a class="ccx-text-link" href="https://www.campcodes.com/projects/complete-college-school-management-system-using-python-django/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: School management with Django</span></a></div></article></div>
            <p class="ccx-library-note">These are learning references from the existing library. Read each project's license and setup notes before using its code.</p>
        </section>

        <section class="ccx-section" aria-labelledby="ccx-guides">
            <div class="ccx-section-head"><div><p class="ccx-kicker">Start small and run the code</p><h2 id="ccx-guides">Three practical programming guides</h2></div><a class="ccx-text-link" href="https://www.campcodes.com/tutorials/">All tutorials ↗</a></div>
            <p class="ccx-section-intro">These guides include complete example files, steps to run them, and checks for common failures.</p>
            <div class="ccx-card-grid"><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/tutorials/javascript-how-to-use-fetch-api-in-a-real-project/"><img src="https://www.campcodes.com/wp-content/mu-plugins/campcodes-experience/fetch-workflow.svg" width="640" height="360" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">JavaScript</span><h3><a href="https://www.campcodes.com/tutorials/javascript-how-to-use-fetch-api-in-a-real-project/">Load JSON with the Fetch API</a></h3><p>Build a task list with a loading message, response checks, and useful error feedback.</p><a class="ccx-text-link" href="https://www.campcodes.com/tutorials/javascript-how-to-use-fetch-api-in-a-real-project/">View tutorial<span aria-hidden="true"> →</span><span class="screen-reader-text">: Load JSON with the Fetch API</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/mini-projects/python-mini-projects/python-build-a-python-csv-cleaner-for-beginners/"><img src="https://www.campcodes.com/wp-content/mu-plugins/campcodes-experience/csv-workflow.svg" width="640" height="360" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">Python</span><h3><a href="https://www.campcodes.com/mini-projects/python-mini-projects/python-build-a-python-csv-cleaner-for-beginners/">Clean a CSV file with Python</a></h3><p>Validate contact records, remove duplicates, and save a clean copy without replacing the original.</p><a class="ccx-text-link" href="https://www.campcodes.com/mini-projects/python-mini-projects/python-build-a-python-csv-cleaner-for-beginners/">View tutorial<span aria-hidden="true"> →</span><span class="screen-reader-text">: Clean a CSV file with Python</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/tutorials/php-how-to-use-pdo-in-a-real-project/"><img src="https://www.campcodes.com/wp-content/mu-plugins/campcodes-experience/pdo-workflow.svg" width="640" height="360" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">PHP / PDO</span><h3><a href="https://www.campcodes.com/tutorials/php-how-to-use-pdo-in-a-real-project/">Save tasks with PHP and SQLite</a></h3><p>Use prepared database statements to add, list, and search tasks in a small command-line program.</p><a class="ccx-text-link" href="https://www.campcodes.com/tutorials/php-how-to-use-pdo-in-a-real-project/">View tutorial<span aria-hidden="true"> →</span><span class="screen-reader-text">: Save tasks with PHP and SQLite</span></a></div></article></div>
        </section>
        <aside class="ccx-ad" aria-label="Advertisement"><span>Advertisement</span><div class="ccx-ad-space" data-ad-client="ca-pub-9157322147162951" data-ad-slot="8053692366"></div></aside>
        <section class="ccx-section" aria-labelledby="ccx-libraries">
            <div class="ccx-section-head"><div><p class="ccx-kicker">Browse the collection</p><h2 id="ccx-libraries">Find projects for your tools</h2></div><p>Web systems, desktop applications,<br>and mobile apps.</p></div>
            <div class="ccx-library-grid">
                                <a class="ccx-library" href="https://www.campcodes.com/projects/php/"><span class="ccx-library-icon" aria-hidden="true">PHP</span><h3>PHP &amp; MySQL</h3><p>Inventory, booking, school, and other database-backed web systems.</p><span class="ccx-text-link">Browse projects →</span></a>
                                <a class="ccx-library" href="https://www.campcodes.com/projects/python/"><span class="ccx-library-icon" aria-hidden="true">Py</span><h3>Python</h3><p>Desktop tools, games, and projects built with Python frameworks.</p><span class="ccx-text-link">Browse projects →</span></a>
                                <a class="ccx-library" href="https://www.campcodes.com/projects/laravel-projects/"><span class="ccx-library-icon" aria-hidden="true">L</span><h3>Laravel</h3><p>Explore the Laravel projects listed in the web-development library.</p><span class="ccx-text-link">Browse projects →</span></a>
                                <a class="ccx-library" href="https://www.campcodes.com/projects/c/"><span class="ccx-library-icon" aria-hidden="true">C#</span><h3>C#</h3><p>Windows desktop applications and database project examples.</p><span class="ccx-text-link">Browse projects →</span></a>
                                <a class="ccx-library" href="https://www.campcodes.com/projects/vb-net/"><span class="ccx-library-icon" aria-hidden="true">VB</span><h3>VB.NET</h3><p>Desktop systems with forms, records, and reports.</p><span class="ccx-text-link">Browse projects →</span></a>
                                <a class="ccx-library" href="https://www.campcodes.com/mini-projects/"><span class="ccx-library-icon" aria-hidden="true">&lt;/&gt;</span><h3>Mini projects</h3><p>Smaller project ideas for practicing a particular feature.</p><span class="ccx-text-link">Browse projects →</span></a>
                                <a class="ccx-library" href="https://www.campcodes.com/mobile-app/android-studio/"><span class="ccx-library-icon" aria-hidden="true">A</span><h3>Android</h3><p>Native Android examples, interface code, and application projects.</p><span class="ccx-text-link">Browse projects →</span></a>
                                <a class="ccx-library" href="https://www.campcodes.com/mobile-app/flutter/"><span class="ccx-library-icon" aria-hidden="true">F</span><h3>Flutter</h3><p>Flutter interfaces and mobile application examples.</p><span class="ccx-text-link">Browse projects →</span></a>
                            </div>
        </section>

        <section class="ccx-section" aria-labelledby="ccx-mobile">
            <div class="ccx-section-head"><div><p class="ccx-kicker">On a smaller screen</p><h2 id="ccx-mobile">Android and Flutter examples</h2></div><a class="ccx-text-link" href="https://www.campcodes.com/mobile-app/">Browse mobile projects ↗</a></div>
            <div class="ccx-card-grid ccx-mobile-cards"><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/mobile-app/android-studio/login-and-registration-app-with-sqlite-database-in-android-studio/"><img src="https://www.campcodes.com/wp-content/uploads/2021/04/ccx-card-8090.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">Android / SQLite</span><h3><a href="https://www.campcodes.com/mobile-app/android-studio/login-and-registration-app-with-sqlite-database-in-android-studio/">Android login and registration</a></h3><p>Read the interface layouts and local database example. Review the account logic before adapting it.</p><a class="ccx-text-link" href="https://www.campcodes.com/mobile-app/android-studio/login-and-registration-app-with-sqlite-database-in-android-studio/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: Android login and registration</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/mobile-app/android-studio/complete-android-quiz-app-using-android-studio/"><img src="https://www.campcodes.com/wp-content/uploads/2021/01/ccx-card-6164.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">Android Studio</span><h3><a href="https://www.campcodes.com/mobile-app/android-studio/complete-android-quiz-app-using-android-studio/">Android quiz application</a></h3><p>Explore quiz categories, multiple-choice questions, answer review, and the included setup instructions.</p><a class="ccx-text-link" href="https://www.campcodes.com/mobile-app/android-studio/complete-android-quiz-app-using-android-studio/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: Android quiz application</span></a></div></article><article class="ccx-card"><a class="ccx-card-art" tabindex="-1" aria-hidden="true" href="https://www.campcodes.com/mobile-app/qr-code-scanner-using-flutter/"><img src="https://www.campcodes.com/wp-content/uploads/2020/07/ccx-card-5560.webp" width="480" height="270" alt="" loading="lazy" decoding="async"></a><div class="ccx-card-body"><span class="ccx-kicker">Flutter / Dart</span><h3><a href="https://www.campcodes.com/mobile-app/qr-code-scanner-using-flutter/">QR code scanner with Flutter</a></h3><p>Follow the camera-view integration and see how a scanned value is displayed in the interface.</p><a class="ccx-text-link" href="https://www.campcodes.com/mobile-app/qr-code-scanner-using-flutter/">View project<span aria-hidden="true"> →</span><span class="screen-reader-text">: QR code scanner with Flutter</span></a></div></article></div>
            <p class="ccx-library-note">Some mobile projects use older SDKs and packages. Check the documented versions before opening a project in your current tools.</p>
        </section>

        <section class="ccx-workflow" aria-labelledby="ccx-workflow">
            <div><p class="ccx-kicker">From download to a local test</p><h2 id="ccx-workflow">Get a project running,<br>then understand it.</h2><p>Start with one feature. Trace what happens when a user opens a page, submits a form, or saves a record.</p><a class="ccx-button" href="https://www.campcodes.com/download-and-setup-guide/">Read the setup guide ↗</a></div>
            <ol><li><strong>Read the requirements</strong><span>Find the runtime, database, dependencies, and license.</span></li><li><strong>Run it locally</strong><span>Use a separate development environment and sample data.</span></li><li><strong>Trace one feature</strong><span>Follow a request through the interface, code, and database.</span></li><li><strong>Make a small change</strong><span>Test the result and write down what you changed and why.</span></li></ol>
        </section>
        <aside class="ccx-ad" aria-label="Advertisement"><span>Advertisement</span><div class="ccx-ad-space" data-ad-client="ca-pub-9157322147162951" data-ad-slot="2225420260"></div></aside>
        <section class="ccx-section ccx-faq" aria-labelledby="ccx-faq-title">
            <div class="ccx-section-head"><div><p class="ccx-kicker">Before you download</p><h2 id="ccx-faq-title">A few common questions</h2></div><a class="ccx-text-link" href="https://www.campcodes.com/contact-us-campcodes/">Report a problem ↗</a></div>
            <div class="ccx-faq-grid">
                <details><summary>Where should I start if I'm a beginner?</summary><p>Try one of the three practical guides above. Each gives you a small task, complete files, and an expected result. The <a href="https://www.campcodes.com/start-here/">getting started guide</a> can help you choose.</p></details>
                <details><summary>Why won't an older project run on my computer?</summary><p>Check the runtime and dependency versions first. Then compare your error with the installation steps. Use the <a href="https://www.campcodes.com/download-and-setup-guide/">setup checklist</a> to work through the environment, database, and configuration.</p></details>
                <details><summary>Can I use a downloaded project for coursework?</summary><p>Check your institution's rules and the project's license. Credit the original work and clearly identify your own changes. Be ready to explain the code you submit.</p></details>
                <details><summary>Does a free download include commercial-use rights?</summary><p>That depends on the project's license. Read the license included with the files. If permissions are unclear, ask the rights holder before redistributing the project or using it commercially.</p></details>
            </div>
        </section>
        <section class="ccx-closing" aria-labelledby="ccx-about-title"><p class="ccx-kicker">About CampCodes</p><h2 id="ccx-about-title">A library for learning how software works.</h2><p>Browse a project, follow the code, and use what you learn in your own work.</p><div><a class="ccx-text-link" href="https://www.campcodes.com/about-us/">About the site →</a><a class="ccx-text-link" href="https://www.campcodes.com/editorial-standards/">How our guides are reviewed →</a></div></section>
    </div>
</main>

	<div class="site grid-container container hfeed" id="page">
				<div class="site-content" id="content">
			
	</div>
</div>

    <footer class="ccx-footer"><div class="ccx-wrap ccx-footer-grid">
        <div><a class="ccx-wordmark" href="https://www.campcodes.com/">CampCodes</a><p>Source code projects and programming tutorials for students and developers.</p><p class="ccx-small">Check a project's requirements and license before using its code.</p></div>
        <nav aria-label="Explore CampCodes"><h2>Explore</h2><a href="https://www.campcodes.com/start-here/">Start here</a><a href="https://www.campcodes.com/projects/">Source code projects</a><a href="https://www.campcodes.com/tutorials/">Programming tutorials</a><a href="https://www.campcodes.com/latest-post/">All articles</a></nav>
        <nav aria-label="Help and editorial information"><h2>Help &amp; about</h2><a href="https://www.campcodes.com/download-and-setup-guide/">Download &amp; setup guide</a><a href="https://www.campcodes.com/editorial-standards/">Editorial standards</a><a href="https://www.campcodes.com/about-us/">About CampCodes</a><a href="https://www.campcodes.com/contact-us-campcodes/">Contact / Report a problem</a></nav>
        <nav aria-label="Site policies"><h2>Site information</h2><a href="https://www.campcodes.com/privacy-policy-campcodes/">Privacy policy</a><a href="https://www.campcodes.com/terms-and-agreement-campcodes/">Terms and agreement</a><a href="https://www.campcodes.com/disclaimer-campcodes/">Disclaimer</a><p class="ccx-small">A free download does not automatically grant permission for commercial reuse. Check each project's license.</p></nav>
    </div></footer>
    
<div class="site-footer footer-bar-active footer-bar-align-right">
			<footer class="site-info" aria-label="Site"  itemtype="https://schema.org/WPFooter" itemscope>
			<div class="inside-site-info grid-container">
						<div class="footer-bar">
			<aside id="nav_menu-1" class="widget inner-padding widget_nav_menu"></aside>		</div>
						<div class="copyright-bar">
					&copy; 2026 CampCodes.				</div>
			</div>
		</footer>
		</div>

		<nav id="generate-slideout-menu" class="main-navigation slideout-navigation do-overlay" itemtype="https://schema.org/SiteNavigationElement" itemscope>
			<div class="inside-navigation grid-container grid-parent">
				<button class="slideout-exit has-svg-icon"><span class="gp-icon pro-close">
				<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
					<path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" />
				</svg>
			</span> <span class="screen-reader-text">Close</span></button><div class="main-nav"><ul id="menu-campcodes-learning-navigation-2027" class=" slideout-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22062"><a href="https://www.campcodes.com/start-here/">Start here</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-22063"><a href="https://www.campcodes.com/projects/">Projects<span role="presentation" class="dropdown-menu-toggle"><span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" /></svg></span></span></a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22064"><a href="https://www.campcodes.com/projects/php/">PHP &#038; MySQL</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22065"><a href="https://www.campcodes.com/projects/python/">Python</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22066"><a href="https://www.campcodes.com/projects/laravel-projects/">Laravel</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22067"><a href="https://www.campcodes.com/mini-projects/">Mini projects</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22068"><a href="https://www.campcodes.com/mobile-app/android-studio/">Android</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22069"><a href="https://www.campcodes.com/mobile-app/flutter/">Flutter</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-22070"><a href="https://www.campcodes.com/tutorials/">Tutorials<span role="presentation" class="dropdown-menu-toggle"><span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" /></svg></span></span></a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22071"><a href="https://www.campcodes.com/tutorials/php-tutorials/">PHP tutorials</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22072"><a href="https://www.campcodes.com/tutorials/javascript-tutorials/">JavaScript tutorials</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22073"><a href="https://www.campcodes.com/tutorials/python-tutorials/">Python tutorials</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22074"><a href="https://www.campcodes.com/tutorials/java-tutorials/">Java tutorials</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22075"><a href="https://www.campcodes.com/latest-post/">All articles</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22076"><a href="https://www.campcodes.com/download-and-setup-guide/">Setup guide</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-22077"><a href="https://www.campcodes.com/about-us/">About<span role="presentation" class="dropdown-menu-toggle"><span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" /></svg></span></span></a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22078"><a href="https://www.campcodes.com/editorial-standards/">Editorial standards</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22079"><a href="https://www.campcodes.com/contact-us-campcodes/">Contact / Report an issue</a></li>
</ul>
</li>
</ul></div>			</div><!-- .inside-navigation -->
		</nav><!-- #site-navigation -->

		    <script async src="https://www.googletagmanager.com/gtag/js?id=G-99FM0QYK8J"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-99FM0QYK8J');
    </script>
    <script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/generatepressblog/*","/wp-content/themes/generatepress/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
            <script>
                const abmsg = "We noticed an ad blocker. Consider whitelisting us to support the site ❤️";
                const abmsgd = "download";
                const iswpdmpropage = 0;
                jQuery(function($){

                    
                });
            </script>
            <div id="fb-root"></div>
            <script id="generate-a11y">
!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("pointerdown",(function(){e.classList.add("using-mouse")}),{passive:!0}),e.addEventListener("keydown",(function(){e.classList.remove("using-mouse")}),{passive:!0})}}();
</script>
	<div class="gp-modal gp-search-modal" id="gp-search" role="dialog" aria-modal="true" aria-label="Search">
		<div class="gp-modal__overlay" tabindex="-1" data-gpmodal-close>
			<div class="gp-modal__container">
					<form role="search" method="get" class="search-modal-form" action="https://www.campcodes.com/">
		<label for="search-modal-input" class="screen-reader-text">Search for:</label>
		<div class="search-modal-fields">
			<input id="search-modal-input" type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
			<button aria-label="Search"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z" /></svg></span></button>
		</div>
			</form>
				</div>
		</div>
	</div>
	<script data-wp-strategy="defer" defer id="generate-sticky-js" src="https://www.campcodes.com/wp-content/plugins/gp-premium/menu-plus/functions/js/sticky.min.js?ver=2.5.1"></script>
<script id="generate-offside-js-extra">
var offSide = {"side":"left"};
//# sourceURL=generate-offside-js-extra
</script>
<script data-wp-strategy="defer" defer id="generate-offside-js" src="https://www.campcodes.com/wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js?ver=2.5.1"></script>
<script id="wp-hooks-js" src="https://www.campcodes.com/wp-includes/js/dist/hooks.min.js?ver=f0f188028580e8dc1255"></script>
<script data-wp-strategy="defer" id="wp-i18n-js" src="https://www.campcodes.com/wp-includes/js/dist/i18n.min.js?ver=1dfe7db3940c23ea9216"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
//# sourceURL=wp-i18n-js-after
</script>
<script id="generate-menu-js-before">
var generatepressMenu = {"toggleOpenedSubMenus":true,"openSubMenuLabel":"Open Sub-Menu","closeSubMenuLabel":"Close Sub-Menu"};
//# sourceURL=generate-menu-js-before
</script>
<script data-wp-strategy="defer" defer id="generate-menu-js" src="https://www.campcodes.com/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.6.1"></script>
<script data-wp-strategy="defer" defer id="generate-modal-js" src="https://www.campcodes.com/wp-content/themes/generatepress/assets/dist/modal.js?ver=3.6.1"></script>
<script data-wp-strategy="defer" defer id="litespeed-cache-js" src="https://www.campcodes.com/wp-content/plugins/litespeed-cache/assets/js/instant_click.min.js?ver=7.9.3"></script>
<script data-wp-strategy="defer" defer id="campcodes-experience-js" src="https://www.campcodes.com/wp-content/mu-plugins/campcodes-experience/experience.js?ver=1792417336"></script>
    <script>
    (function () {
        'use strict';
        function addCopyButtons() {
            document.querySelectorAll('pre.cc-prism-block').forEach(function (pre) {
                if (pre.querySelector('.cc-copy-btn')) return;
                var btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'cc-copy-btn';
                btn.setAttribute('aria-label', 'Copy code');
                btn.textContent = 'Copy';
                pre.appendChild(btn);
                btn.addEventListener('click', function () {
                    var code = pre.querySelector('code');
                    var text = code ? (code.textContent || code.innerText) : pre.innerText;
                    function done() {
                        btn.textContent = 'Copied!';
                        btn.classList.add('cc-copied');
                        setTimeout(function () {
                            btn.textContent = 'Copy';
                            btn.classList.remove('cc-copied');
                        }, 2000);
                    }
                    function fallback() {
                        var ta = document.createElement('textarea');
                        ta.value = text;
                        ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
                        document.body.appendChild(ta);
                        ta.focus();
                        ta.select();
                        try { document.execCommand('copy'); } catch (e) {}
                        document.body.removeChild(ta);
                        done();
                    }
                    if (navigator.clipboard && window.isSecureContext) {
                        navigator.clipboard.writeText(text).then(done).catch(fallback);
                    } else {
                        fallback();
                    }
                });
            });
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', addCopyButtons);
        } else {
            addCopyButtons();
        }
    })();
    </script>
    
<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a58e50caca7401c7',t:'MTc5NDQxMDc4OQ=='};var l=window.parent.location,o;try{o=new URL(l.origin).origin}catch(e){try{o=new URL(new URL(l.href).origin).origin}catch(e){o=''}}var u='/cdn-cgi/challenge-platform/scripts/jsd/main.js?ray=a58e50caca7401c7',a=document.createElement('script');a.src=o?new URL(u,o).href:u;document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>


<!-- Page cached by LiteSpeed Cache 7.9.3 on 2026-11-11 23:26:29 -->