Welcome, user.

We're one of Khan Academy's biggest coding teams.

We're beauty hunters. We're perfectionists. We're passionate about making programs that don't just work, but inspire.

We believe in collaboration as a means to create things that would've been impossible to build otherwise.

We unite all kinds of languages and levels into a team capable of building anything we set our minds to.

Welcome to CodeX.

Wanna collaborate?

CodeX was founded with the idea of being a team of teams—a place where entire teams can unite to create the impossible.

But today, we accept both teams and individuals. Meaning whether you're a team leader trying to raise your team to whole new level of productive, or simply that lone coder looking for a few extra hands, you're in the right place.

Because we can do things together we can't do alone.

Like this theme?

Like it so much you want to build with it?

We've got you covered. Use the boilerplate code below to create something awesome. Don't forget to give us credit. We've included it in the code.

            
<!--Built off of a CodeX template.-->
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>New CodeX Webpage</title>
      <!--Google fonts and icons-->
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Code:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
      <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
      <!--Stylesheet for code highlighting-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/tokyo-night-dark.min.css" />
      <!--CodeX theme stylesheet. CSS has been minified. Do not edit.-->
      <style>
      [type=checkbox]+span,[type=radio]+span,button,input,nav,nav>ul>li,textarea{box-shadow:0 0 0 1px var(--medium-contrast)}label,nav>ul{display:flex}.page,.pop-up{display:none}code,pre,table{overflow:hidden}:root{color-scheme:light dark;--main-background:light-dark(#fff, #000);--font-color:light-dark(#000, #fff);--bg-hover-color:light-dark(#000, #fff);--font-hover-color:light-dark(#fff, #000);--low-contrast:light-dark(#eee, #222);--medium-contrast:light-dark(#ddd, #444)}body{background-color:var(--main-background);color:var(--font-color);padding:50px;margin:0;transition:.3s ease-in-out}h1,h2,h3,h4,h5,h6{font-family:"DM Sans";font-weight:400;margin:0 0 1rem}a,blockquote,button,fieldset,figcaption,input,label,li,p,span,td,th{font-family:Inter;font-weight:300}h1{font-size:4rem}h2{font-size:3rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}blockquote{margin:1rem 0 1rem 2rem;border-width:6px;border-left-style:solid;border-image:linear-gradient(var(--low-contrast),var(--medium-contrast)) 1;border-image-outset:0 12px}a{color:#00f}.inactive-indicator,a:visited{color:red}ol>ol,ul>ol{list-style-type:upper-roman}button,input,nav>ul>li{background-color:var(--low-contrast);color:var(--font-color);padding:12px;border:none;border-radius:9999px;transition:.3s ease-in-out}fieldset,nav{margin:1rem 0;padding:0}figure,table{padding:none}fieldset,hr{border:none}button,nav>ul>li{cursor:pointer}input,select{outline:0;width:200px}.selected,[type=checkbox]:checked+span,[type=radio]:checked+span,button:hover,input:focus,nav>ul>li:hover,textarea:focus{background-color:var(--bg-hover-color);color:var(--font-hover-color)}button:active,nav,nav>ul>li:active{background-color:var(--low-contrast)}button:active,nav>ul>li:active{color:var(--font-color);transition:none}#color-scheme-btn,textarea{transition:.3s ease-in-out}label{margin:1rem 0;justify-content:space-between;align-items:center}label:has(textarea){display:block}fieldset>label{font-size:11px;margin-left:2rem}nav>ul,nav>ul>li{justify-content:space-between;margin:0}[type=checkbox],[type=radio]{opacity:0}[type=checkbox]+span,[type=radio]+span{width:11px;height:11px;cursor:pointer;background-color:var(--low-contrast);border:none;border-radius:9999px;transition:.3s ease-in-out}textarea{display:block;width:476px;padding:12px;margin:1rem 0;font-size:11px;resize:vertical;border-radius:25px;outline:0;border:none}[type=submit]{margin:1rem 0;width:100%}hr{height:6px;border-radius:9999px;background-image:linear-gradient(to left,var(--low-contrast),var(--medium-contrast));margin:1rem 0}.spacer{height:3rem}nav{width:500px;border:none;border-radius:9999px;position:sticky;top:0;left:50px;z-index:1}nav>ul{padding:3px}nav>ul>li{list-style-type:none;display:inline-flex;align-items:end;font-size:11px}nav>ul>li>.material-symbols-outlined{font-size:16px;margin-right:4px}.theme-header{width:500px;height:375px;margin:0 0 1rem;border-radius:25px;background-color:#eee;color:#000;background-image:radial-gradient(at 90% 90%,#89fa50 0,transparent 50%),radial-gradient(at 96% 96%,#71c5de 0,transparent 50%),radial-gradient(at 62% 25%,#fde17b 0,transparent 50%),radial-gradient(at 33% 25%,#3caefb 0,transparent 50%),radial-gradient(at 18% 12%,#3ff845 0,transparent 50%),radial-gradient(at 27% 62%,#81e892 0,transparent 50%),radial-gradient(at 63% 1%,#40d9fc 0,transparent 50%);position:relative}.blog-card,.member-card,.pop-up,.project-card,footer,table{background-color:var(--low-contrast);box-shadow:0 0 0 1px var(--medium-contrast)}.theme-header-centered{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.theme-header-default{margin:0;position:absolute;bottom:0;left:20px}code,pre,table{border-radius:25px;margin:1rem 0}.pop-up{width:400px;max-height:500px;overflow:scroll;position:fixed;top:50px;left:50%;transform:translateX(-50%);padding:12px;border-radius:25px;font-size:11px;z-index:9999;overflow-wrap:break-word}.hljs span{font-family:"Fira Code";font-size:11px}.blog-card,.member-card,.project-card{padding:12px;border-radius:25px;margin:1rem 0;display:flex;justify-content:space-between}.blog-card>figure,.member-card>figure,.project-card>figure{height:100px;width:100px;background-color:var(--medium-contrast);border-radius:25px;padding:12px;margin:0}.blog-card>img,.project-card>img{width:100px;height:100px;border-radius:25px}.member-card>figure>img{display:block;width:100%;height:100%;border-radius:inherit}.blog-data-cont,.member-data-cont,.project-data-cont{margin-left:12px;flex-grow:1;display:flex;justify-content:space-between}.blog-data-l-column,.blog-data-r-column,.member-data-l-column,.member-data-r-column,.project-data-l-column,.project-data-r-column{display:flex;flex-direction:column;justify-content:space-between;max-width:250px}.member-data-l-column>span,.member-data-r-column>span,td{font-size:11px}.blog-data-l-column>span,.blog-data-r-column>span,.project-data-l-column>span,.project-data-r-column>span{font-size:11px;opacity:.5}.blog-data-r-column>span,.member-data-r-column>span,.project-data-r-column>span{text-align:right}.blog-data-r-column>a,.member-data-r-column>a,.project-data-r-column>a{font-size:11px;text-wrap:nowrap}.member-skills>span{display:block;font-family:"Fira Code";font-size:11px;opacity:.5}.blog-post-author{display:block;margin-bottom:11px;font-style:italic}.active-indicator,.inactive-indicator{display:block;margin-left:auto;font-family:"Fira Code";font-size:11px}.active-indicator{color:light-dark(green,#7fff00)}.admin::after{color:red;content:"Admin";font-size:11px;vertical-align:text-top}.theme-sphere{width:200px;height:200px;background-color:#eee;border-radius:9999px}figure{max-width:200px;margin:0 0 12px}figure>img{max-width:200px;max-height:200px;margin-bottom:12px}figcaption{color:var(--font-color);font-size:11px;font-style:italic;text-align:center;opacity:.5}#color-scheme-btn{position:fixed;bottom:50px;right:50px;z-index:2;display:flex;justify-content:center;align-items:center;margin-left:auto}footer{border-radius:25px;padding:1rem;margin-top:100px}footer>p{opacity:.5;font-style:italic;font-size:11px}table{border-collapse:collapse}td,th{border:1px solid var(--medium-contrast);padding:12px}th{text-align:left}
      </style>
   </head>
   <body>
      <button id="color-scheme-btn">
         <span class="material-symbols-outlined"> light_mode </span>
      </button>
      <div class="theme-header">
         <h1 class="theme-header-default">Hero text.</h1>
      </div>
      <h1>Title here.</h1>
      <footer>
         <h6>CodeX, a team of teams.</h6>
         <p>Designed and built by Nicolas, Admin at CodeX. Report any issues to a CodeX Admin.</p>
         <p>Check out my <a href="https://nicolasgreenwood.github.io/poetry/" target="blank">website</a>!</p>
         <p data-codex-destination-id="rules-regs-popup" style="text-decoration: underline; cursor: pointer;">CodeX Rules and Regulations</p>
         <div class="pop-up" id="rules-regs-popup">
            <ol>
            <li>
               <p>
               <b>Equality:</b><br />
               CodeX doesn't have any one leader or leaders. All members have an
               equal say in decisions on all matters CodeX, and no member may force
               any other member(s) to do anything against their wish.
               </p>
            </li>
            <li>
               <p>
                  <b>Structure:</b><br />
                  CodeX has only two levels: regular member and Admin. Regular members
                  and admins enjoy equal rights and authority in all matters, with the
                  exceptions of:
               <ol type="I">
                  <li>Admins are granted edit access to the CodeX Admin account.</li>
                  <li>Admins are responsible for admitting new members.</li>
                  <li>Admins have the authority to expel members if required.</li>
                  <li>Admins have the authority to modify/update CodeX policy.</li>
               </ol>
               </p>
            </li>
            <li>
               <p>
                  <b>Admission:</b><br />
                  New members may apply upon filling out the requested information in
                  the Join form. Applicants are not considered members until approved by
                  a CodeX Admin. If no response is given to an applicant one week after
                  appplication, the applicant is considered a member and possesses all
                  the rights as such.
               </p>
               <p>
                  CodeX Admins reserve the right to refuse membership, with or without
                  explanation.
               </p>
            </li>
            <li>
               <p>
                  <b>To become an Admin:</b><br>
                  To become a CodeX Admin, there are several requirements:
               </p>
               <ol type="I">
                  <li>Demonstrate more than very basic coding skill in at least one of the programming languages taught on Khan Academy.</li>
                  <li>Posess a usable Google account (for use with forms, spreadsheets and sensitive data sharing).</li>
                  <li>Be communicative and friendly.</li>
                  <li>Recieve approval from at least two existing CodeX admins. If only one CodeX admin is active, one approval will suffice.</li>
               </ol>
               <p>
                  If you're interested in becoming an Admin, let any existing Admin know, and they will guide you through the process.
               </p>
            </li>
            <li>
               <p>
                  <b>Projects:</b><br>
                  Any member may suggest and create projects in the name of CodeX, provided the project in full compliance with Khan Academy guidelines. Members may also group to work on projects without the full involvement of the team or permission from Admins. Admins retain the right to order project cancellation if deemed necessary.
               </p>
            </li>
            <li>
               <p>
                  <b>AI and Plagiarism:</b><br>
                  Use of AI in generating code, especially entire projects, is strictly forbidden, and violators may be expelled. Use of AI in research of programming concepts, basic debugging and occassional (very small) code snippets is not forbidden. 
               </p>
               <p>Plagiarism of any kind without giving appropriate credit is also strictly forbidden, and violators may also face expulsion. Use the "Spin off" button whenever possible, and when not possible, provide credit in a visible place in the program.</p>
            </li>
            <li>
               <p>
                  <b>Teams and Individuals:</b><br>
                  Both teams and individuals may apply for CodeX membership. Individuals may also apply in the name of their team.
               </p>
            </li>
            <li>
               <p>
                  <b>Members of Other Teams:</b><br>
                  While being a member of a team other than CodeX simultaneously is completely common and permitted, we encourage members to give careful consideration they are able to contribute to CodeX in a meaningful way before joining. Applicants are also able, and even encouraged, to invite their entire team to join CodeX if possible.
               </p>
            </li>
            <li>
               <p>
                  <b>Behavior:</b><br>
                  While CodeX does not censor socialization, members are required to be civil and respectful. Answering questions, being instructive and helpful and bearing the name of CodeX with pride and responsibility is our code. Being rude, offensive, provocative or intolerant is not permitted.
               </p>
               <p>
                  CodeX is a place to build and learn, and to have fun while we're at it. At the same time, we're not a social club. Do not join this team or create threads for the sole purpose of socialization.
               </p>
            </li>
            <li>
               <p>
                  <b>Activity Status:</b><br>
                  CodeX has long faced issues with member inactivity. As a member, you are not obligated to be active for certain periods of time. However, you should report your inactivity in advance, so we can stay informed as to who is available for work on projects. You may do so in the Activity Status Report thread in the Tips & Thanks of this homepage.
               </p>
               <p>
                  While we do value members keeping us informed of their activity status, we also understand it may not always be feasible to report absence. As such, CodeX Admins reserve the right to mark members as inactive/active at their own discretion.
               </p>
            </li>
         </ol>
         </div>
         <p>© Nicolas Greenwood, 2025. All rights reserved.</p>
      </footer>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
      <script type>
      // WELCOME TO BASIC CODEX SCRIPTS. IF YOU'RE USING AS PART OF THE BOILERPLATE, BE AWARE THAT EDITING RISKS BREAKING FUNCTIONALITY OF YOUR WEBPAGE. DO NOT EDIT UNLESS YOU ARE PROFICIENT IN JAVASCRIPT.

      //----------Highlight.js function to highlight all code snippets

      hljs.highlightAll();

      //----------Lenis smooth scroll config

      // new Lenis instance
      const lenis = new Lenis({
         lerp: 0.05,
         wheelMultiplier: 0.8,
         duration: 1.5,
         easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      });

      function raf(time) {
         lenis.raf(time);
         requestAnimationFrame(raf);
      }

      requestAnimationFrame(raf);

      //----------Color scheme button script

      const colorSchemeBtn = document.getElementById("color-scheme-btn");

      // set the default theme
      document.documentElement.style.colorScheme = "dark";

      colorSchemeBtn.addEventListener("click", () => {
         // get current color scheme
         const currentColorScheme = document.documentElement.style.colorScheme;

         // if the color scheme is dark, change the color scheme to light, otherwise change it to dark
         if (currentColorScheme === "dark") {
            document.documentElement.style.colorScheme = "light";
            colorSchemeBtn.innerHTML = `<span class="material-symbols-outlined"> dark_mode </span>`;
         } else {
            document.documentElement.style.colorScheme = "dark";
            colorSchemeBtn.innerHTML = `<span class="material-symbols-outlined"> light_mode </span>`;
         }
      });

      // upon landing, after 3 seconds, hide the color scheme button
      window.setTimeout(() => {
         colorSchemeBtn.style.opacity = 0;
         colorSchemeBtn.style.pointerEvents = "none"; // disable any invisible click behavior
      }, 3000);

      // if the user's mouse moves and is in the lower right quarter of the viewport, show the color scheme button
      window.addEventListener("mousemove", (e) => {
         if (e.clientX > window.innerWidth / 2 && e.clientY > window.innerHeight / 2) {
            colorSchemeBtn.style.opacity = 1;
            colorSchemeBtn.style.pointerEvents = "auto";
         } else {
            colorSchemeBtn.style.opacity = 0;
            colorSchemeBtn.style.pointerEvents = "none";
         }
      });

      //----------Theme gradient headers script

      const themeHeaders = document.querySelectorAll(".theme-header");

      // for each theme header, randoamly generate a massive CSS mesh gradient
      themeHeaders.forEach((header) => {
         header.style.backgroundImage = `
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%), 
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%), 
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%)`;
      });

      //----------Theme gradient spheres script

      const themeSpheres = document.querySelectorAll(".theme-sphere");

      // same logic as theme header, only smaller gradient
      themeSpheres.forEach((sphere) => {
         sphere.style.backgroundImage = `
            radial-gradient(circle at 30% 30%, transparent, light-dark(#eee, black) 80%),
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%), 
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%), 
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
            radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
            Math.random() * 100
         )}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
            Math.random() * 50 + 50
         )}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%)`;
      });

      //----------Nav item highlighting

      const navItems = document.querySelectorAll(".nav-item");

      navItems.forEach((item) => {
         item.addEventListener("click", () => {
            // clear all previously highlighted nav items
            navItems.forEach((item) => {
            item.classList.remove("selected");
            });

            // highlight the one being clicked
            item.classList.add("selected");
         });
      });

      //----------Pop-up script

      const allPopUps = document.querySelectorAll(".pop-up");

      allPopUps.forEach((popUp) => {
         // disable Lenis to allow for nested scrolling
         popUp.setAttribute("data-lenis-prevent", "");

         // create a close button and add it to each popup
         const closeBtn = document.createElement("button");
         closeBtn.textContent = "Close";
         closeBtn.style.display = "block";
         closeBtn.style.marginLeft = "auto";

         // close button functionality
         closeBtn.addEventListener("click", () => {
            popUp.style.display = "none";
         });

         popUp.appendChild(closeBtn);
      });

      //----------Link functionality

      const codexOrigins = document.querySelectorAll("[data-codex-destination-id]"); // all elements with the attribute of "data-codex-destination-id"

      // all main pages of the document
      const allPages = document.querySelectorAll(".page");

      codexOrigins.forEach((origin) => {
         // find the destination
         const destinationElementId = origin.dataset.codexDestinationId; // value of the attribute
         const destinationElement = document.getElementById(destinationElementId);

         // listen for origin click event
         origin.addEventListener("click", () => {
            // if a page is being requested, hide all other pages
            if (destinationElement.classList.contains("page")) {
            allPages.forEach((page) => {
               page.style.display = "none";
            });

            // then show destination element
            destinationElement.style.display = "block";
            } else {
            // otherwise just show the destination element
            destinationElement.style.display = "block";
            }
         });
      });
      </script>
</body>
</html>
            
         

Just love our gradients?

We think they're gorgeous too. Thanks to this handy tool, you can generate new ones until you find one that just hits the spot. Just copy the code below and paste into the body of an HTML document to see the magic.


<!--Gradient built using CodeX-->
         
You've reached the end of the homepage. Check out our other pages to discover more about CodeX.

We write poetry in code.

At the heart of every new program we set out to build is a desire to create something genuinely inspiring and original.

"The beauty of CodeX is that, you don't have to be an expert to participate in building something awesome. All levels and languages taught here on Khan Academy are accepted. You can learn from experienced fellow members on the job, making learning to code not only productive, but fun."

- Nicolas, Admin at CodeX

At CodeX, we don't believe there's an impossible project. It's just a matter of time, effort and discovering new solutions to problems never tackled before.

Our team started small. It's still growing.

The idea of CodeX was born when LJ and CodeNinja, present-day admins at CodeX, discussed the future of larger scale collaboration on Khan Academy. The decision was to make a entire team dedicated to collaboration—a team of teams.

Today, CodeX is growing into something bigger. While the original idea of CodeX being comprised solely of other teams persisted until recently, our team has outgrown this structure, and today anyone, team or individual, can apply for membership.

With this new structure, we hope to further connect and reinforce existing networks of collaboration between Khan Academy's most creative minds.

Sound like something you could be a part of? Join today.

So...what do we actually build?

Google Docs logo

To put it simply, we build programs in all languages taught on Khan Academy. Our multidisciplinary membership allows us to tackle not only projects in any programming language available on Khan, but even integrate multiple languages into a single project.

And our work extends off of Khan Academy as well. We use GitHub and Google Forms/Sheets for Admin-related tasks.

How do we make webpages (like this one?)

HTML logo

This webpage was constructed using HTML, CSS and JavaScript, the three main languages browsers use to render websites. HTML is the content. Pure information, like text, paragraphs, navigation bars, images—that's all HTML. If a website was a human body, HTML would be the skeleton.

CSS logo

CSS is what gives webpages flair. It's what allows us to change the color of our text, shape buttons, adjust text size, add fonts, and structure layout. It's what powers all those gorgeous gradients on our site too.

If a website was a human body, CSS would be your clothes, hairstyle and, if you want, makeup.

JavaScript logo

JavaScript is what gives webpages more advanced functionality. If you want to open pop-ups with a click of a button, or show elements conditionally, you'll have to use JavaScript. Of the three, it's the only programmatic language. HTML and CSS can't do loops, or math, or conditional logic. JavaScript is a real high-level programming language, and it's applications go a lot farther than toggling light/dark mode.

If a website was a human body, JavaScript would be your organs, like your brain, heart and so on.

But wait, isn't Processing.js also JavaScript?

P5.js logo. P5.js is the modern replacement of Processing.js

Yep, it is. But it's not the plain old JS we use in making webpages like this. That's what we call vanilla JS. Processing.js is a Javascript library, meaning it's built on top of vanilla JS.

What does that mean? Well, the good news is that, if you're comfortable in ProcessingJS, you'll find vanilla JS easy, as the syntax is pretty much the same. The bad news? There's some new stuff you'll have to learn, like arrow functions and how to manipulate HTML elements with JS. But that's easy. Really, sinfully easy.

And we build in Processing.js at CodeX too. From games to graphics, Processing.js is one of our most powerful tools in creating...creating cool stuff.

But what about Python?

Python logo

We get it, Python is becoming increasingly popular here on Khan Academy, and we welcome it. Python rules when it comes to AI, scientific computing and robotics, and it's simple, minimalist syntax makes it beautiful to write and read. But it leaves it's aesthetic side in the code editor. Browsers don't read Python, and you can't build sites or style anything seriously with it.

Web dev (HTML, CSS and JS) is your art class, while Python is that math class notebook that might have answers to what's beyond the singularity of a black hole, even though it's as ugly as a cockroach in a library.

At CodeX, we build with all of these.

Yep, that's right. If you're an web dev enthusiast, rejoice, for thou hast found thy kindred. Slither on your belly and lick dust? We've got just as many Python-eers. And if you're one of those anime artists whose Processing.js graphics make all of our jaws drop and stay stuck on the hotlist for weeks at a time, we need you, because at CodeX, we don't just believe in programming: we believe in the art of programming.

How CodeX became CodeX:

Yeah, we'll admit it, AI did generate our name. But you've gotta admit, it is a good name. And once we saw it, the temptation was too hard to resist.

Actually, CodeX's original name was Coding Collaborators. Obviously, such a long-winded name didn't last long, and one of our Admins, CodeNinja, used AI to generate some ideas. Tech Hub and CodeX came up, and I'm pretty sure you can piece together from there how CodeX became CodeX.

On a side note, we do not practice or endorse the use of AI in programming, and do not use AI-generated code in our projects.

Rules, rules and more rules...

We promise, there isn't anything legal-sounding or scary in here. And if you break one of them, you won't go to jail. Just don't do it again.

  1. Equality:
    CodeX doesn't have any one leader or leaders. All members have an equal say in decisions on all matters CodeX, and no member may force any other member(s) to do anything against their wish.

  2. Structure:
    CodeX has only two levels: regular member and Admin. Regular members and admins enjoy equal rights and authority in all matters, with the exceptions of:

    1. Admins are granted edit access to the CodeX Admin account.
    2. Admins are responsible for admitting new members.
    3. Admins have the authority to expel members if required.
    4. Admins have the authority to modify/update CodeX policy.
  3. Admission:
    New members may apply upon filling out the requested information in the Join form. Applicants are not considered members until approved by a CodeX Admin. If no response is given to an applicant one week after appplication, the applicant is considered a member and possesses all the rights as such.

    CodeX Admins reserve the right to refuse membership, with or without explanation.

  4. To become an Admin:
    To become a CodeX Admin, there are several requirements:

    1. Demonstrate more than very basic coding skill in at least one of the programming languages taught on Khan Academy.
    2. Posess a usable Google account (for use with forms, spreadsheets and sensitive data sharing).
    3. Be communicative and friendly.
    4. Recieve approval from at least two existing CodeX admins. If only one CodeX admin is active, one approval will suffice.

    If you're interested in becoming an Admin, let any existing Admin know, and they will guide you through the process.

  5. Projects:
    Any member may suggest and create projects in the name of CodeX, provided the project in full compliance with Khan Academy guidelines. Members may also group to work on projects without the full involvement of the team or permission from Admins. Admins retain the right to order project cancellation if deemed necessary.

  6. AI and Plagiarism:
    Use of AI in generating code, especially entire projects, is strictly forbidden, and violators may be expelled. Use of AI in research of programming concepts, basic debugging and occassional (very small) code snippets is not forbidden.

    Plagiarism of any kind without giving appropriate credit is also strictly forbidden, and violators may also face expulsion. Use the "Spin off" button whenever possible, and when not possible, provide credit in a visible place in the program.

  7. Teams and Individuals:
    Both teams and individuals may apply for CodeX membership. Individuals may also apply in the name of their team.

  8. Members of Other Teams:
    While being a member of a team other than CodeX simultaneously is completely common and permitted, we encourage members to give careful consideration they are able to contribute to CodeX in a meaningful way before joining. Applicants are also able, and even encouraged, to invite their entire team to join CodeX if possible.

  9. Behavior:
    While CodeX does not censor socialization, members are required to be civil and respectful. Answering questions, being instructive and helpful and bearing the name of CodeX with pride and responsibility is our code. Being rude, offensive, provocative or intolerant is not permitted.

    CodeX is a place to build and learn, and to have fun while we're at it. At the same time, we're not a social club. Do not join this team or create threads for the sole purpose of socialization.

  10. Activity Status:
    CodeX has long faced issues with member inactivity. As a member, you are not obligated to be active for certain periods of time. However, you should report your inactivity in advance, so we can stay informed as to who is available for work on projects. You may do so in the Activity Status Report thread in the Tips & Thanks of this homepage.

    While we do value members keeping us informed of their activity status, we also understand it may not always be feasible to report absence. As such, CodeX Admins reserve the right to mark members as inactive/active at their own discretion.

Have any questions about our policy? Feel free to ask in the Tips & Thanks below.

A word about this design.

This homepage was designed and all text authored by me, Nicolas, a CodeX admin. I hope you find it as inspiring and enjoyable as I did making it.

The goal of this design was to emphasize the diversity that is CodeX. This design doesn't have a fixed palette. Those gradients can be any color. Our palette is the entire spectrum of visible light, just as our portfolio of languages is the entire library of languages taught on Khan Academy.

This design was partly inspired by Google's wonderful Material Design as well as OpenAI's excellently designed website. I used Google fonts DM Sans for headers, Inter for body text and Fira Code for code snippets and data. I used Google Icons for all icons on the site.

Our signature gradients are entirely CSS, and randomly generated with each page load via JavaScript. If you would like to build a project of your own with this design, please visit the homepage, where we provide boilerplate code and a gradient generator for that very purpose. Just be sure to give credit to avoid plagiarism.

Thank you for reading. Now go write some poetry in code.

Our members live here.

Wanna see your name on this list? Head over to our join page.

CodeNinja
HTML CSS JavaScript
Active

Hi, I'm CodeNinja.

GAG
HTML CSS JavaScript Python Processing.js
Active

Hi, I'm GAG.

RealCodingPro
HTML CSS JavaScript Python
Active

Hi, I'm RealCodingPro.

Nicolas
HTML CSS JavaScript
Active

I love space.

You know that one impossible thing in life you know you'll never do but can't stop dreaming of it nonetheless? For me, it's going to space.

For now, I content myself with building programs centered around my interests: space and poetry.

I'm 18, and I live in Serbia. Not Siberia. Not Syria. Serbia. In the Balkans. The country Nikola Tesla is from. Totally not the country that Gavrilo Princip is from.

I learned how to program mostly through another platform called freeCodeCamp, where I completed their HTML/CSS course. As for JavaScript, I kinda pieced it together on my own. Come to think of it, I still use JavaScript on a cave man level. Should level up on that.

I've met some incredible people here on Khan Academy, and they're the ones that inspire me to work on a team and build what I build.

I love to read and write.

My poetry website.

LJ
HTML CSS JavaScript Python
Active

Hi, I'm LJ.

Jacob Snow
Processing.js
Active

Hi, I'm Jacob Snow.

Harry Bray
Python
Active

Hi, I'm Harry Bray.

Isoroku Yamamoto
None
Active

Hi, I'm Isoroku Yamamoto.

live.sadat(LS)
HTML CSS Processing.js Python SQL
Active

Hi, I'm live.sadat.

emvalle10
Processing.js HTML CSS JavaScript
Active

Hi, I'm emvalle10.

- k a t i t e -
Processing.js
Active

Hi, I'm - k a t i t e -.

Apple834
Processing.js
Active

Hi, I'm Apple834.

Chickenfarmer2009
Processing.js Python HTML CSS JavaScript
Active

Hi, I'm Chickenfarmer2009.

Solarstar
Processing.js HTML CSS JavaScript
Active

Hi, I'm Solarstar.

Wolfstar
Processing.js HTML CSS JavaScript
Active

Hi, I'm Wolfstar.

argon
Python Processing.js
Active

Hi, I'm argon.

agodwin01
Python
Inactive

Hi, I'm agodwin01.

JustinKurt
Python HTML CSS
Inactive

Hi, I'm JustinKurt.

𝔐𝔞𝔱𝔱𝔥𝔢𝔴
Python HTML CSS JavaScript
Inactive

Hi, I'm 𝔐𝔞𝔱𝔱𝔥𝔢𝔴.

Karthikeya K
Python HTML CSS
Inactive

Hi, I'm Karthikeya K.

AGnawKneeMouse Coder
Processing.js HTML CSS JavaScript
Inactive

Hi, I'm an AGnawKneeMouse Coder.

Techstar
Processing.js HTML CSS JavaScript
Inactive

Hi, I'm Techstar.

Angelstar
Processing.js HTML CSS JavaScript
Inactive

Hi, I'm Angelstar.

Asher
Processing.js HTML CSS JavaScript
Inactive

Hi, I'm Asher.

ghost141
Processing.js Python HTML CSS JavaScript
Inactive

Hi, I'm ghost141.

Duke
Processing.js Python HTML CSS JavaScript
Inactive

Hi, I'm Duke.

Ezra
Processing.js
Inactive

Hi, I'm Ezra.

WealR
Processing.js
Inactive

Hi, I'm WealR.

XCode
Processing.js HTML CSS JavaScript
Inactive

Hi, I'm XCode.

The Old Gaffer
Processing.js
Inactive

Hi, I'm The Old Gaffer.

Orange Soda
Processing.js HTML CSS
Inactive

Hi, I'm Orange Soda.

Sméagol
Processing.js
Inactive

I am a fat guinea pig who is excessively plump.

NeonKnight447
Processing.js
Inactive

Hi, I'm NeonKnight447.

dave (^ ▽ ^)
Processing.js
Inactive

Hi, I'm dave (^ ▽ ^).

Heisenberg
HTML JavaScript Python
Inactive

Hi, I'm Heisenberg.

I write haiku.

Coco Pommel
Processing.js
Inactive

Hi, I'm Coco Pommel.

I like art, anime, and coding.

Glitchx123
Python
Inactive

Hi, I'm Glitchx123.

We're human. We make mistakes.

Notice something's off? Have you changed your avatar or nickname? Simply want to update your bio? You've come to the right place. Click here to submit an edit request. Be sure to give a good desciption of what you need to change.

Thank you for being an active member.

Our project list is growing.

Here's some of the stuff we've been working on lately.

Chips the Fish by Jacob Snow
I'm not even going to try to explain what this one is. Just enjoy another one of Snow's graphics, everyone.
Cactus Graphic by Jacob Snow
You'll feel sweltering hot just looking at it! This graphic by Snow looks straight out of a postcard of an Arizona sunset.
Moose Graphic by Jacob Snow
This Alaskan-themed graphic is one of CodeX's first completed graphic projects.
New CodeX Logo by Nicolas
With a new look comes a new logo. This is the official release of CodeX's current logo.
CodeX Loading Screen/Promo by Nicolas
Based on our now-outdated theme, this loading screen was supposed to play at the beginning of each program.
Deprecated CodeX Homepage by Nicolas
This was our homepage previous to this one. It was maintained solely by CodeNinja and saw our most extensive membership growth to date.

If you think you've built something for CodeX and can't find it here, let an admin now in the T&T below with a link to the project and we'll be happy to add it for you.

We write more than code.

Actually, we write all sorts of stuff, from full-blown tutorials to coding tips and tricks. If you're stumped on a project or simply can't figure out how to do something, chances are, you'll find answers here.

OOP vs. Functional Programming
A short comparison of the two most popular methods of building software.
2025 See post
What is Artificial Intelligence?
A brief description of different types of AI, how AI works and AI's impact on society.
2025 See post
Python vs. Processing.js
RealCodingPro examines the differences between these two popular languages on Khan Academy and explains how to choose the right one for your project idea.
2025 See post
Adding Pages to a KA Webpage
The eternal problem as finally been solved, and the solution is easier than you think.
2024 See post

Our coolest members write in the blog.

Be one. If you're a CodeX member, write something today. Your contribution could detangle the brain cells of countless learners.

So...you want to write something.

First off, we thank you. It takes special time and effort to teach programming, and it's members like you that make CodeX awesome.

Now let's get to business.

  1. Choose a topic.

    It should be clear and general. Instead of "How to draw Son Goku", consider something like "Tips on drawing anime characters in Processing.js".

  2. Structure the tutorial.

    Be sure to define clear steps, use correct, descriptive language free of spelling errors and provide code snippets whenever possible. Feel free to use code highlighting tools like Highlight.js, or just build off of a CodeX boilerplate webpage for built-in highlighting. If this sounds unfamiliar to you, talk to a CodeX admin.

  3. Style it.

    If you're not using a CodeX boilerplate, then be sure to style your page to make it attractive and readable. Use semantic text elements like h1, p and so on for visual hierarchy.

  4. Publish it.

    Yay! You did it! Now it's time to tell the world about it. Let a CodeX admin know about your blog post so we can add it to our homepage, and give them a link to the tutorial. Follow any instructions if a CodeX admin tells you to make any modifications.

    We'll advertise your program on our subscription feed too.

  5. Make sure readers know about CodeX.

    After all, you contributed to the CodeX blog, and others should know about that. State your ties to CodeX in a conspicuous spot in your tutorial.

Join. Because...why not?

Want to become a member? Apply here:

Which of the following languages have you built at least one project with?
For how long have you been programming?
Which of the following categories best describes you?
Are you the leader of a team looking to merge your entire team into CodeX?
How did you here about CodeX?

And just like that, welcome to CodeX.

Interested in becoming a CodeX Admin?

Note: only existing CodeX members can apply for an Admin role. While not mandatory, CodeX adminship is usually granted upon invitation.

To be a CodeX admin, you'll need a Google account, show exceptional technical and social skills and not plan on being inactive in the near future.

CodeX admins are more than admins. They're exemplary members of the Khan Academy programming community.

So before you apply, think about it. Make sure you can contribute in a meaningful way to CodeX.

And if you think you can, we're happy to have you.

Click here to fill out an adminship request. A CodeX admin will get back to you as soon as possible.